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

This article mainly introduces what are the naming and writing standards in CSS, which can be used for reference by interested friends. I hope you can learn a lot after reading this article.

Naming convention for selector

1. Modular naming

For example:

Layout-related styles start with "g". Such as "g-content" and "g-header"

Styles associated with hooks start with "j". Such as "j-open" and "j-request"

Styles associated with components start with "m". Such as "m-dropMenu" and "m-slider"

State-related styles start with "s". Such as "s-current" and "s-selected"

Tool-related styles start with "u". Such as "u-clearfix" and "u-ellipsis".

"tools" refer to styles that are decoupled from business logic and can be reused; "components" refer to custom reusable and portable basic web page elements; and "hooks" refer to styles that JavaScript manipulates.

The above instructions are just examples. You can customize the opening characters according to the requirements of the project. The purpose of this is to make the CSS code clean and easy to maintain.

Here the editor has built a front-end learning and exchange QQ group: 132667127, I have sorted out the latest front-end materials and advanced development tutorials, if you want, you can join the group to learn and communicate together.

two。 Selectors are all in lowercase.

Recommended way of writing:

G-first-header {line-height: 16px;}

Not recommended way to write:

.g-FirstHeader {line-height: 16px;} 3. Each selector has an exclusive column

With the exception of the last selector, each column selector ends with a comma. If a sibling element selector is used, a half-width space is left at the left and right ends of the related symbol.

Recommended way of writing:

G-first-header,.g-second-header-1 > .g-second-header-2 {border: 2px solid # C3C3C3;}

Not recommended way to write:

G-first-header, .g-second-header-1 > .g-second-header-2 {border: 2px solid # C3C3C3;} 4. Avoid HTML markup

When building selectors, try to use semantically explicit category names and avoid HTML tags, because once the structure of the HTML changes, the corresponding style is invalid. Try to separate styles from structures, which makes hierarchical stylesheets easier to maintain in the future.

Recommended way of writing:

.g-content. G-item {flex-basis: 20%;}

Not recommended way to write:

.g-content li {flex-basis: 20%;} 5. Use less ID

The uniqueness of ID determines that the style of its corresponding elements is disposable and cannot be reused. Once the structure of HTML changes, the selector that applies ID will be modified accordingly. Another important reason is that ID has the highest weight value, which may cause styles added later to fail to overwrite the previous style.

Recommended way of writing:

G-special-content {height: 100px; width: 300px;}

Not recommended way to write:

# special-content {height: 100px; width: 300px;}

Writing specification of attribute

1. Arrange attributes in order

When writing, the attributes under each rule should be grouped by category, in the following order:

Location: bottom, float, display, left, position, right, top and z-index etc.

Size: height, margin, padding, width, etc.

Layout: color, font, letter-spacing, line-height and text-align, etc.

Background: background et al.

Others: animation and transition, etc.

two。 Abbreviated attribute

Some attributes can be put together to simplify the code and make it easy to read.

Recommended way of writing:

.test-selector-1 {padding: 3px 5px;}

Not recommended way to write:

Test-selector-1 {padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px;} 3. Remove the 0 at the beginning of the decimal

Recommended way of writing:

.test-selector-2 {font-size: .5em;}

Not recommended way to write:

.test-selector-2 {font-size: 0.5em;} 4. Abbreviated hexadecimal value

Recommended way of writing:

.test-selector-3 {background-color: # 0b0;}

Not recommended way to write:

.test-selector-3 {background-color: # 00bb00;} 5. Rational use of quotation marks

For the "font-family" attribute, we usually clip font names with spaces in quotation marks, but for general fonts that do not have these features, the existence of quotation marks does not affect the display of the page. In order to ensure visual unity and maximum compatibility with all kinds of browsers, it is recommended that you put quotation marks at both ends of all font names.

Recommended way of writing:

.test-selector-4 {font-family: "Microsoft YaHei", "Microsoft is in bold", "\ 5b8b\ 4f53";}

Not recommended way to write:

.test-selector-4 {font-family: "Microsoft YaHei", Microsoft boldface,\ 5b8b\ 4f53;}

The values of individual attributes contain the "url ()" string, to which the developer needs to pass a resource path. Note that in earlier versions of Internet Explorer, spaces in the path may not be recognized, so that resources cannot be found. To be on the safe side, it is best to put quotation marks at both ends of the path you pass in, regardless of whether there are spaces in the path.

Recommended way of writing:

.test-selector-5 {background-image: url (".. / Images/BacPic.png");}

Not recommended way to write:

Test-selector-5 {background-image: url (.. / Images/BackPic.png);} 6. Stay away! Important

"! important" will cause trouble for future maintenance and make it difficult for developers to find style problems. If you find that the new style cannot copy the old style while writing. There are usually two reasons: either the new style is written in front of the old style, or the selector corresponding to the new style has a lower weight than the old style. In the latter case, this problem can be completely avoided by increasing the weight value of the new style selector, without the need for "! important".

Recommended way of writing:

.test-selector-6 .test-selector-7 {font-size: 16px;} .test-selector-6 .test-selector-7 .test-selector-8 {font-size: 14px;}

Not recommended way to write:

.test-selector-6 .test-selector-7 {font-size: 16px;} .test-selector-8 {font-size: 14px! important;} 7. Specification notes

In a single column comment, leave a half space between the asterisk and the content.

Recommended way of writing:

/ * this is the first comment text. * / / this is the second comment text. Copy the code

Not recommended way to write:

/ * here is a piece of comment text. * / / this is the second comment text. Copy the code

In multi-column comments, multiple asterisks are arranged in a single line. Also leave a half-width space between the asterisk and the content.

Recommended way of writing:

/ * here is a piece of comment text. * this is the second paragraph of the note. , /

Not recommended way to write:

/ * here is a piece of comment text. * this is the second paragraph of the note. , /

In document comments, in addition to writing multiple columns of comments, you should also use identifiers to describe a certain part of the document, leaving a half-width space between the right side of the colon after the identifier and the description text.

Recommended way of writing:

/ * * @ name: file name; * @ description: description text; * @ author: Zhang San, Li Si; * @ update: December 19, 2018. , /

Not recommended way to write:

/ * * @ name: file name; * @ description: description text; * @ author: Zhang San, Li Si; * @ update: December 19, 2018. * / 8. Place standard attributes at the bottom

Some attributes have not been fully standardized in some browsers, and each browser developer may not have a uniform implementation of these attributes, so it is necessary to add the browser vendor's proprietary string at the beginning. So the same attribute needs to be written multiple times, but there is one thing to note: place the attribute without a pretag at the bottom.

Recommended way of writing:

.test-selector-9 {opacity: 0;-webkit-transition: opacity 3s;-moz-transition: opacity 3s;-ms-transition: opacity 3s;-o-transition: opacity 3s; transition: opacity 3s;}

Not recommended way to write:

Test-selector-9 {opacity: 0;-webkit-transition: opacity 3s; transition: opacity 3s;-moz-transition: opacity 3s;-ms-transition: opacity 3s;-o-transition: opacity 3s;} 9. Pay attention to punctuation

Each property has a unique column. The colon immediately following the style attribute, followed by a half-width space. The value ends with a semicolon.

Recommended way of writing:

.test-selector-10 {opacity: .5;}

Not recommended way to write:

.test-selector-10 {opacity:.5} 10. Leave a blank line between style blocks

The style selector and its style blocks should leave a blank line with the surrounding content to avoid overcrowding and hindering the search.

Recommended way of writing:

.test-selector-11 {opacity: 0.5;} .test-selector-12 {font-size: 16px;} .test-selector-13 {overflow: hidden;}

Not recommended way to write:

.test-selector-11 {opacity: 0.5;} .test-selector-12 {font-size: 16px;} .test-selector-13 {overflow: hidden;} 11. Fold excessively long content into columns

When there is more than one value of the same attribute or when the value is too long, the values are separated by commas, each comma is followed by a space, and values that are too long can be listed in another column.

Recommended way of writing:

.test-selector-14 {linear-gradient (135deg, deeppink 25%, transparent 25%)-50px 0, linear-gradient (225deg, deeppink 25%, transparent 25%)-50px 0, linear-gradient (315deg, deeppink 25%, transparent 25%), linear-gradient (45deg, deeppink 25%, transparent 25%);}

Not recommended way to write:

.test-selector-14 {linear-gradient (135deg, deeppink 25%, transparent 25%)-50px 0, linear-gradient (225deg, deeppink 25%, transparent 25%)-50px 0, linear-gradient (315deg, deeppink 25%, transparent 25%), linear-gradient (45deg, deeppink 25%, transparent 25%);} 12. Avoid CSS Hack

The so-called "CSS Hack" is to add a few special symbols to the stylesheet so that browsers that can recognize different symbols can calculate different styles on the same element. The reason for CSS Hack is that older browsers, such as the much-maligned Internet Explorer 6, do not calculate the same set of stylesheets the same way as other browsers, which is likely to cause layout confusion. So in the past, we used to write targeted CSS for individual weird browsers. For example, width: 300px; _ width: 200px; for other browsers, the width of the selector should be 300 pixels, but IE 6 can recognize the bottom line, so it calculates a width of 200 pixels.

13. Reduce the use of properties that affect performance

Do not include too many filter expressions and repeat keywords in the stylesheet, which will degrade the rendering performance of the web page. To repeat the background picture, the width and height of the original image is not less than 8px.

Thank you for reading this article carefully. I hope the article "what are the naming and writing standards in CSS" shared by the editor will be helpful to you. At the same time, I also hope that 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.