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

Editor to share with you the example analysis of CSS code naming rules, I believe that most people do not know much about it, so share this article for your reference, I hope you can learn a lot after reading this article, let's go to know it!

1. The attribute model of the technique.

The attributes delineated by a single title should be grouped according to compliance when copying, and there needs to be a blank line between groups.

At the same time, Positioning Model > Box Model > Typographic > Visual should be transcribed in French to improve the readability of the code.

Positioning Model organization, status, related attributes: position, top, z-index, display, float, etc.

Box Model box model, related attribute outline: width, height, padding, margin,border,overflow

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

Outside of Visual vision, related attributes include: color, bac kilogram round, list-style, transform, animation

2. CSS selector naming rules

Classified naming (very important in front-end componentization)

Grid (.g -): divide the page into several large blocks, usually head, body, main bar, sidebar, tail, and so on!

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

Component (unit) (.u -): usually a smaller individual that cannot be further divided, and is generally repeated in various modules! For example, buttons, input boxes, loading, etc.!

Defy (function) (.f -): in order to facilitate some frequently used applications, we peel out these highly used styles and use them as needed. Usually these determiners have static color display, such as eliminating floats, etc.! No, abuse!

Form (.z -): prefix, uniform identification and easy identification for state class styles, which can only be combined or presented as descendants (.u-ipt.z-dis {}, .m-list li.z-sel {})

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

Do not apply the "_" underscore to name the css

Good ability to distinguish javascript variable names

Press one less shift key when typing

Predator compatibility issues (such as naming a selector using _ tips, which is not valid in IE6)

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

Variables, functions, inclusions and placeholder in scss are named in the hump style.

Different class naming methods for mutually exclusive semantics:

Directly add numbers or letters to distinguish (such as:. M-list,. M-list2,. M-list3, etc., any list module, but a completely different kind of 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)

Descendant selector: body-embellishment (example: .m-page .cut {}) Note: elder selector should not be used in page organization, because it is more likely to purify.

3. It's best to write.

/ * this is a module * /.

M-nav {} / * module container * /.

M-nav li,.m-nav a {} / * first common beautification combination * /.

M-nav li {} / * Post-generality semantic tag resolver * /.

The commonness in the characteristics of m-nav a {} / * is modeled according to the structural method.

True colors in m-nav a.a1 {} / * Post-commonness * /

. m-nav a.a2 {} / * the nature of post-sex * /.

M-nav. Z-crt a {} / * interactive shape change * /.

M-nav. Z-crt a.a1 {}. M-nav. Z-crt a.a2 {}

.m-nav .btn {} / * Model children decision maker * /

.m-nav .btn-1 {} / * Model seniors decide to expand * /

. m-nav. Btn-dis {} / * expanded (form) of the model for future generations * /

.m-nav. Btn.z-dis {} / * inductance is the same as above, please choose one of the two (assuming it can be used when IE6 is not compatible) * /

.m-nav. M-sch {} / * contain the identity of other external modules * /

.m-nav. U-sel {} / * discipline the location of external components * /

M-nav-1 {} / * module streamlining * /

M-nav-1 li {}. M-nav-dis {} / * module simplification (shape) * /.

M-nav.z-dis {} / * Persuasion is the same as above, please choose one of the two (assuming it can be applied if it is incompatible with IE6) * /

4. Match semantic understanding and naming

Construct (.g -)

Semantic naming abbreviation

Document doc doc

Head head hd

Principal body bd

Tail foot ft

Main column main mn

Main column sub-container mainc mnc

Sidebar side sd

Side fence container sidec sdc

Box container wrap/box wrap/box

Module (.m -), component (.u -)

Semantic naming abbreviation

Navigation nav nav

Sub-navigation subnav snav

Bread crumbs crumb crm

Menu menu menu

Tab tab tab

Problem area head/title hd/tt

Content area body/content bd/ct

List list lst

Form table tb

Form form fm

Hot hot hot

Rank top top

Log in to login log

Flag logo logo

Popularize advertise ad

Search search sch

Slide slide sld

Prompt tips tips

Rescue help help

News news news

Download download dld

Register for regist reg

Voting vote vote

Copyright vcopyright cprt

Consequence result rst

Title question title tt

Button button btn

Output input ipt

Stick to (.f -)

Semantic nomenclature abbreviation

Eliminate floating clearboth cb

Left floating floatleft fl

Inline inlineblock ib

Text centered textaligncenter tac

Vertically centered verticalalignmiddle vam

Overflow latent overflowhidden oh

Pure vanishing displaynone dn

Font size fontsize fz

Font weight fontweight fs

Skin (.s -)

Semantic nomenclature abbreviation

Font hue fontcolor fc

Background color bac kg roundcolor bgc

Border color bordercolor bdc

Shape (.z -)

Semantic naming abbreviation

Check selected sel

Current current crt

Show show show

Latent hide hide

Open open open

Close close vclose

Degenerate error err

Fu Chengyong disabled dis

5. Keep things steady

All capitalized and underlined

Try not to have abbreviations.

Do not use id easily

0: 0.9rem = > .9rem after the decimal point is removed

Use the abbreviation: margin: 0 1rem 3rem

The above is all the contents of the article "sample Analysis of CSS Code naming rules". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.