A detailed explanation of the CSS writing specification

This article brings the content is about the CSS writing specification detailed explanation, has certain reference value, has the need friend to consult, hoped to be helpful to you.

1. Writing order

Write sequentially based on the importance of attributes

Just follow the horizontal order, first show the positioning layout class properties, the back box model, such as its own properties, and finally the text class and decorated class properties.

→→→	Display Properties	Self Properties	Text properties and other adornments
	Display	Width	Font
	Visibility	Height	Text-align
	Position	Margin	Text-decoration
	Float	Padding	Vertical-align
	Clear	Border	White-space
	List-style	Overflow	Color
	Top	Min-width	Background

1. Location Properties

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

2. size

(width, height, padding, margin)

3. Text Series

(Font, Line-height, letter-spacing, color-text-align, etc.)

4. Background

(Background, border, etc.)

5. Other

(animation, transition, etc.)

2. Selector level

A = inline styles style. b = number of ID selectors. c = Number of classes, pseudo-classes, and attribute selectors. d = number of type selectors and pseudo-element selectors.

Selector

Selector	level (A,B,C,D)
Style= ""	1,0,0,0
#wrapper #content {}	0,2,0,0
#content. dateposted {}	0,1,1,0
P#content {}	0,1,0,1
#content p {}	0,1,0,1
#content {}	0,1,0,0
P.comment. dateposted {}	0,0,2,1
P.comment p {}	0,0,1,2
. Comment P {}	0,0,1,1
P.comment {}	0,0,1,1
. Comment {}	0,0,1,0
P p {}	0,0,0,2
P {}	0,0,0,1

3. Writing specification, abbreviation attribute

Attribute abbreviations

Remove the 0 before the decimal point

Short name, but only if you want people to understand your shorthand.

16 Binary color code abbreviations

Hyphen CSS Selector naming specification

1. Long name or phrase you can use the middle horizontal line to name the selector. 2. It is not recommended to use the "_" Underline to name the CSS selector, why? Less pressing a SHIFT key when entering, browser compatibility issues (such as the use of *tips selectors named, IE6 is not valid) can be good to distinguish JavaScript variable naming (JS variable named "*")

Do not use ID easily

ID in JS is unique, can not be used multiple times, and the use of class selector is reusable, and the priority of the ID priority and class, so the ID should be used on demand, and can not be abused.

Add a status prefix to the selector

Sometimes you can add a prefix to the selector to indicate the status, so that the semantics are clearer, such as adding the ". is-" prefix.

Image

4. Naming specification

1 Layout document Doc Doc head head HD body body BD tail foot ft main block main MN main bar sub-container mainc MNC Sidebar side SD Sidebar sub-container Sidec SD  C box container Wrap/box Wrap/box Navigation nav nav2 Module sub-navigation Subnav snav breadcrumbs Crumb CRM Menus menu menu Tab tab Title Area Head/title hd/tt content Area  Body/content bd/ct listing list LST table table TB form form FM hotspot Hot Hottest TOP Top Login login log logo logo banner  Advertise AD Search Sch slide slide sld Tip Tips Tips Help helps news press download Download DLD register regist   Reg vote vote Vote copyright CPRT Results result RST title Title TT button BTN Enter input IPT3 function float Clear Clearboth CB Left Floating floatleft fl right floating floatright FR inline block level inlineblock IB Text Center Textaligncenter TAC text right Textalignright ta R text Habitat left Textalignleft tal Vertical center verticalalignmiddle vam overflow Hidden Overflowhidden oh completely disappears displaynone dn Font size fontsiz E fs font weight fontweight fw4 skin Font Color fontcolor FC background background bg background color backgroundcolor BGC background picture Backgroundimag e BGI background Positioning BACKGROUNDPOsition BGP border color bordercolor bdc5 status selected selected SEL current CRT show Show Show hide Hide hide open opening off Close close Close errors error err not available disabled dis

1. Class

Header: Header content: Content/container Tail: Footer navigation: Nav Sidebar: Sidebar column: Column page perimeter control overall layout width: Wrapper around: Left Right center login bar: Loginbar Logo: Logo ads: Banner page body: main hotspot: Hot news: News Download: Download sub-navigation: Subnav Menus: Menu submenu: submenu Search: Searching Links: F　　Riendlink footer: Footer Copyright: Copyrights scrolling: Scroll content: Contents Tags: tags article list: Listing tips: Msg tips: Tips column title: Title added: Joinus Guideline: Guide Services: Service registration: Regsiter Status: Status vote: Vote partner: Partner

2. Id

(1) Page Structure    container: Container    Header: Header    content: Content/container    page body: main    page end: Footer    navigation: Nav    Sidebar: Sidebar    column: Column    page perimeter control overall layout width: Wrapper    : Left Right Center (2) Navigation    : Nav    main: Mainnav 
   navigation: Subnav    Top navigation: Topnav    side navigation: Sidebar    left navigation: Leftsidebar    Right navigation: Rightsidebar    menu:    submenu Menu: Submenu    caption: Title    Abstract: Summary (3) function    mark: Logo    advertisement: Banner login    : Login    Login: Loginbar c25/> Register: Register    Search: Searching    Ribbon: Shop    title: Title    join: Joinus    State: Status    button: btn    Roll Move: Scroll    tab page: Tabs    article list: Listing    hint information: Msg    current tip: Tips    Icons: Icon    notes: not E    Guide: Guild    services: Service    hotspot: Hot    Press: News    download: Download    vote: Vote partner    : Partner 
   Links: Link    copyrights: Copyright

3. Documents

    Main MASTER.CSS    module module.css    Basic common base.css    layout, layout layout.css    topic themes.css column COLUMNS.CSS    
   text font.css    form forms.css    patch mend.css    print Print.css

5. Precautions

/* Header */content area/* END Header */

    1. Lowercase;　　    2. Try to use English;　　    3. Do not add the lever and underline;    4. Try not to abbreviate unless you see the words clearly.