Shulou(Shulou.com)06/01 Report--

This article mainly introduces the CSS code style example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.

CSS code style

Basic settings

2 space indent

UTF-8 coding

White space and format

Leave a space between the braces and the selector, a space after the colon, and a space before and after the comment.

Reason: it is said to be more beautiful this way.

/ * I am the comment * /

Div {/ * I am comment * /}

Span {

Color: red; / * I am the comment * /

}

It is not mandatory to write to the same line as the selector when there is only one style.

Reason: writing three lines takes up too much screen space.

Each line is written when there are multiple style declarations in a selector.

Reason: so that the error report can be accurate to the specific rules, easy to troubleshoot.

Multiple selectors are written on different lines when separated by commas, with curly braces on a separate line.

Reason: it is not easy to miss the selector after the comma when modifying.

Div

Span {

Color: red

Font-size: 12px

}

Each style declaration is followed by that semicolon.

Reason: it is easy to copy.

All outermost quotation marks are in double quotes.

Reason: consistent with HTML.

Multiple style values separated by commas are written in multiple lines.

Reason: easy to read and edit.

.block {

Box-shadow: 000 rgba (# 000,0.1)

1px 1px 0 rgba (# 000,0.2)

2px 2px 0 rgba (# 000,0.3)

3px 3px 0 rgba (# 000,0.4)

4px 4px 0 rgba (# 000,0.5)

}

Function limit

Avoid using ID selectors.

Reason: the weight is too high to maintain.

The use of @ import to import CSS files is prohibited. Reason: all kinds of tricks can not be explained.

Naming and modularization

Units with a value of 0 are recommended to be omitted, but not mandatory.

Reason: most zero units are useless.

Letters in hexadecimal color values are uniformly lowercase.

Reason: it's troublesome to change case.

All letters in the class name are lowercase.

Reason: it is not case-sensitive, does anyone want to unify uppercase?

Only letters, numbers, and "-" are used in class names.

Reason: if there is no limit, I am afraid that some monkeys will use Arabic.

.hello {} / * OK * /

.module-title {} / * OK * /

.panel-level1 {} / * OK * /

. Navigation bar / * Fuck * /

Thank you for reading this article carefully. I hope the article "sample Analysis of CSS Code style" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.