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

This article mainly introduces the relevant knowledge of "what is CSS taxonomic nomenclature". 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 CSS taxonomic nomenclature" can help you solve the problem.

Classified naming (much needed under the front-end componentization)

Grid (.g -): cut the page beans into several large pieces, such as head, main body, main column, sidebar, tail, etc.!

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

Element (unit) (.u -): generally, it is a relatively exquisite individual that can no longer be divided, and it is frequently used in all kinds of modules! Such as buttons, input boxes, loading and so on!

Function (.f -): in order to facilitate the use of some frequently used techniques, we strip out these items with high utilization rate and use them as needed. Usually, these decision-makers are displayed at rest, such as clearing floats, etc. Fu Cheng abuse!

State (.z -): prefix the status class pattern, counteract identification, and make it easy to identify. She can only be used in combination or emerge as a descendant (.u-ipt.z-dis {}, .m-list li.z-sel {})

Javascript (.j -): .j-will be dedicated to JS lost nodes, please do not use .j-definition style

Do not use "_" underscore to name css

Can well identify javascript variable names

Press one less shift key when entering

Dabble compatibility title (for example, the name of the determiner using _ tips, which is invalid in IE6)

Id is named in hump style (don't misuse id)

Variables, functions, alienation and placeholder in scss adopt hump naming.

On the contrary, the method of naming different classes in semantics:

You can add numbers or letters directly (such as: .m-list, .m-list2, .m-list3, etc., any list module, but it is a purely divergent 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-embellishment (example: u-btn-active)

Children's decision maker: body-embellish character is fine (for example:. M-page. Cut {}) Note: elder decision maker should not be used in page organization, because it is contaminated or more sexual.

What is csscss is a computer language used to express file styles such as HTML or XML. It is mainly used to design the style of the web page and make the web page more beautiful. It is also a language that defines style structures such as fonts, colors, locations, etc., and css styles can be stored directly in HTML pages or separate style sheet files, while the priority of style rules is determined by css according to this hierarchical structure, so as to achieve cascading effect. Up to now, css can not only decorate the web page, but also cooperate with various scripts to format the web page.

This is the end of the introduction to "what is the CSS taxonomic nomenclature". Thank you for 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.