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

This article mainly explains "what are the naming conventions of CSS". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what the naming conventions of CSS are.

Naming convention

As we said, our ultimate goal is collaborative development, so we have to make our code understandable to others. Therefore, it is necessary to have certain norms in the naming of css. Different companies have different specifications, but most of these specifications have the same characteristics:

Class names do not use magic class names, that is, your class names cannot be picked up casually and should have some meaning (for example, a class name such as aformab is an irresponsible way of naming).

If you can, please do not use Pinyin as a name, because people who read the code may not necessarily understand pinyin, which is not conducive to maintenance.

If possible, keep the class name as short as possible (as long as it is readable, that is, abbreviated on the basis of 2).

If the naming of a class name involves a long name or phrase composed of multiple words and needs to be concatenated with a hyphen, please use the underscore (-), because the underscore is often used in js, and use the underscore to avoid conflicts.

Do not use id selectors casually (or there will be a naming shortage), id selectors are unique in the page, non-reusable, and id has a high priority, so debugging will be troublesome. So try to use it as needed.

Adding a state prefix to a selector (or naming a selector directly after a state) makes it more semantic, such as when a tag is selected and activated, you can use active as an active css.

Css is not case-sensitive (not absolute, class and id are case-sensitive if you work with HTML documents, so please use lowercase as a whole), but that doesn't mean you can mix case casually, the best way is to use either uppercase or lowercase, which is easier to read as far as personal experience is concerned.

Writing order

Css is ordered, and the styles written later will overwrite the previous styles with the same priority, so please pay attention to your writing order!

Generally, when we write css, we should write css code regularly in a certain order, which will improve the readability of the code. A classic css attribute writing order is as follows:

Location attributes (position, top, right, z-index, display, float, etc.)

Size (width, height, padding, margin)

Text series (font, line-height, letter-spacing, color- text-align, etc.)

Background (background, border, etc.)

Others (animation, transition, etc.)

In addition, in some abbreviations, attributes are required to be arranged in a certain order, for example, when the background attribute is abbreviated, the order of attribute values is:

Background-color

Background-image

Background-repeat

Background-attachment

Background-position

Other code optimizations

Use abbreviations as much as possible when you can, so as to simplify the code and make it easy to read.

If there is a 0 before the decimal point, you can remove the decimal point. However, the editor still thinks that it will be more readable to keep the decimal point.

If you use a hexadecimal color code, you can abbreviate it as much as possible. (but in most cases it may not be possible to abbreviate, so it won't be a big reading problem without abbreviations.)

Comments are important to understand that the code you write is not only what you want to see in the end, good comments can make your colleagues better understand your code and avoid conflicts among colleagues (just imagine, the shit-like code you see comes from one of your colleagues who is not very popular. Will you give him a good face? ).

Don't use it! Important, which means style has the highest priority, will confuse css code that is not easy to debug if you use it. This command is usually used when debugging, so try not to write it into production code.

If you still have doubts about whether your code conforms to the specification, some development tools provide code review function (yes, I am talking about jetbrain products, their home webstorm,PHPstorm, and idea,pycharm, which can write front-end pages part-time, etc.). You can check whether css conforms to the specification.

Thank you for your reading, the above is the content of "what are the naming conventions of CSS". After the study of this article, I believe you have a deeper understanding of what the naming conventions of CSS have, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

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.