What should be paid attention to when writing CSS style?
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.
