On the writing standard and order of CSS

Time:2020-7-20

The specification and order of CSS writing is a hurdle that most front-end ers must overcome. If they do not write CSS code according to good CSS writing standards, it will affect the reading experience of the code. This paper summarizes a CSS writing specification and CSS writing order for your reference. These are summed up by referring to some foreign articles and my personal experience. I think it is worth learning for the front-end users who write CSS.

 

CSS writing order

 

1. Location attributes (position, top, right, Z-index, display, float, etc.)
2. Width, height, padding, margin
3. Text Series (font, line height, letter spacing, color text align, etc.)
4. Background (background, border, etc.)
5. Others (animation, transition, etc.)

 

   

 

CSS writing specification

 


 

Use CSS abbreviation properties

Some properties of CSS can be abbreviated, such as padding, margin, font, etc., so as to simplify the code and improve the user’s reading experience.

 

  

 


 

Remove “0” before decimal point

 

  

 


 

Abbreviated naming

Many users like to abbreviate the class name, but the premise is to let people understand your name can be abbreviated Oh!

 

  

 


 

Hexadecimal color code abbreviation

Some color codes can be abbreviated. Let’s abbreviate them as much as possible to improve the user experience.

 

  

 


 

Naming specification for hyphen CSS selectors

1. Long names or phrases can be named for selectors with a middle horizontal line.

2. It is not recommended to use “_” Underline is used to name CSS selectors. Why?

  • When inputting, press one less shift key;
  • Browser compatibility issues (such as using_ Tips selector naming, invalid in IE6)
  • Can distinguish JavaScript variable naming well (JS variable name is “UU”)

 

  

 


 

Don’t use ID at will

ID is unique in JS and cannot be used multiple times. However, class class selector can be used repeatedly. In addition, ID has priority over class, so ID should be used on demand and not abused.

 

  

 


 

Add a status prefix to the selector

Sometimes you can add a prefix indicating the state to the selector to make the semantics clearer. For example, the prefix “. Is -” is “is added in the following figure.

 

  

 

CSS writing order          

 


 

Common CSS naming rules

Head: header
Content: content / container
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center
Login bar: loginbar
Logo: Logo
Advertisement: Banner
Page body: Main
Hot spot: Hot
News: News
Download: Download
Subnav: subnav
Menu: menu
Submenu: submenu
Search: Search
Link: FriendLink
Footers: footers
Copyright: Copyright
Scroll: Scroll
Content: content
Tags: Tags
Article list: List
Message: MSG
Tips: Tips
Title: title
Join: joinus
Guide
Service: Service
Registration: regsite
Status: Status
Vote
Partner: Partner

 


 

Note writing method:

 /* Header */
Content area
 /* End Header */

 


 

Name of ID:

1) Page structure

Container: container
Header: header
Content: content / container
Page body: Main
Tail: footer
Navigation: nav
Sidebar: sidebar
Column: column
Page peripheral control overall layout width: wrapper
Left right center

(2) Navigation

Navigation: nav
Main navigation: mainnav
Subnav: subnav
Top navigation: topnav
Side navigation: sidebar
Left navigation: leftsidebar
Right navigation: rightsidebar
Menu: menu
Submenu: submenu
Title: title
Abstract: summary

(3) Function

Logo: Logo
Advertisement: Banner
Login: Login
Login bar: loginbar
Register: Register
Search: Search
Function area: shop
Title: title
Join: joinus
Status: Status
Button: BTN
Scroll: Scroll
Tab: tab
Article list: List
Message: MSG
Current: current
Tips: Tips
Icon: Icon
Note: Note
Guide: Guild
Service: Service
Hot spot: Hot
News: News
Download: Download
Vote
Partner: Partner
Link: link
Copyright: Copyright

 


 

matters needing attention::

1. All of them are in lowercase;
2. Try to use English;
3. Do not add middle bar and underline;
4. Try not to abbreviate, unless you can see the words clearly.

 


 

CSS style sheet file naming

Main master.css
Module module.css
Basic sharing base.css
Layout, layout layout.css
Theme themes.css
Column columns.css
Words font.css
Forms forms.css
Patch mend.css
Printing print.css

 

 

Recommended Today

Infinite scroll list

Complexities of an infinite scroller Code example of implementation There are many usage scenarios for infinite scrolling, and some difficulties need to be paid attention to. For example, the links in the footer cannot be accessed because the content keeps pushing the footer away; How do you handle resizing events when the phone changes from […]