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

CSS style writing need to pay attention to what, many novices are not very clear about this, in order to help you solve this problem, the following editor will explain in detail for you, people with this need can come to learn, I hope you can gain something.

The code is as follows:

[selector] {[property]: [value]; []}

[selector] {[attribute]: [value]; []}

When writing CSS styles, I am used to following these rules:

Class names are concatenated with a hyphen (-), except for the BEM nomenclature mentioned below

Indent 4 spaces

The declaration is split into multiple lines

Statements are arranged in relevance rather than alphabetical order

Prefixed declarations are indented appropriately to align their values

Indent the style set to reflect DOM

Keep the semicolon at the end of the last declaration.

For example:

CSS Code copies content to the clipboard

.

Widget {padding:10px; border:1px solid # BADA55; background-color:#C0FFEE;-webkit-border-radius:4px;-moz-border-radius:4px; border-radius:4px;} .widget-heading {font-size:1.5rem; line-height:1; font-weight:bold; color:#BADA55 Margin-right:-10px; margin-left:-10px; padding:0.25em;}

We can find that. Widget-heading is a child element of .widget because the style set of the former is indented one more level than the latter. In this way, indentation allows developers to quickly get such important information when reading the code.

We can also find that. Widget-heading 's declarations are arranged according to their relevance:. Widget-heading is an interline element, so let's add font-related style declarations first, followed by others.

The following is an example that is not split into multiple lines:

CSS Code copies content to the clipboard

.t10 {width:10%}

.t20 {width:20%}

.t25 {width:25%} / * 1Acer 4 * /

.t30 {width:30%}

.t33 {width:33.333%} / * 1Acer 3 * /

.t40 {width:40%}

.t50 {width:50%} / * 1Acer 2 * /

.t60 {width:60%}

.t66 {width:66.666%} / * 2Acer 3 * /

.t70 {width:70%}

.t75 {width:75%} / * 3ax 4pm /

.t80 {width:80%}

.t90 {width:90%}

In this example (from inuit.css's table grid system), putting CSS on one line makes the code more compact.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

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.