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

This article mainly introduces the relevant knowledge of "what is the writing order of CSS naming". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the writing order of CSS naming" can help you solve the problem.

1. Style attribute normal degree

When writing attributes under the rules of a single trick, they should be grouped according to the development of listening, and there should be a blank line between the groups.

At the same time, the code should be written at the pace of Positioning Model > Box Model > Typographic > Visual to improve the readability of the code.

Positioning Model construction method, identity, related attributes: position, top, z-index, display, float, etc.

Box Model box model, relational attributes include: width, height, padding, margin,border,overflow

Typographic text typesetting, relational attributes include: font, line-height, text-align

Visual visual outside, related attributes include: color, bac kg round, list-style, transform, animation

2. Naming rules for CSS selectors

Taxonomic nomenclature (important in front-end componentization)

Organization (grid) (.g -): cut the page beans into several large pieces, such as head, main body, main bar, sidebar, tail, etc.

Module (module) (.m -): generally a larger whole that is semantic and can be used repeatedly! Such as navigation, login, registration, etc.

Element (unit) (.u -): generally, it is a relatively small individual that can no longer be divided, and it is usually used in various modules again and again! For example, buttons, input boxes, loading and so on!

Obedience (function) (.f -): in order to facilitate some commonly used applications, we peel out these high-usage styles and apply them on demand. Usually these decisions are revealed with fixed techniques, such as eliminating floats, etc.! No, abuse!

Form (.z -): add a prefix to the morphological pattern, the same logo, easy to identify, she can only be used in combination or as an advanced presentation (.u-ipt.z-dis {}, .m-list li.z-sel {})

Javascript (.j -): .j-will be dedicated to JS missing nodes, please do not use the .j-definition pattern

Do not use "_" underscore to name css

Can well identify javascript variable names

Press one less shift key when typing

Reader compatibility title issues (for example, applying the name of the determiner of _ tips, which is valid in IE6)

Id accepts hump naming (don't spend id)

Variables, functions, assimilation, placeholder accepted hump naming in scss

The gap of communication semantics is named as the door path:

You can add numbers or letters directly (such as:. M-list,. M-list2,. M-list3, etc., any list module, but it is a completely different module). Other examples: .f-fw0, .f-fw1, .s-fc0, .s-fc1, .m-logo2, .m-logo3, u-btn, u-btn2, and so on.

Naming method (BEM): class-body (example: g-head), class-body-modifier (example: u-btn-active)

Junior selector: body-embellishment (example: .m-page .cut {}) Note: descendant decision maker should not be used in page organization, because it is more likely to be infected.

This is the end of the content about "what is the writing order of CSS naming". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.