CSS writing sequence

1. Position 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. 5. Other (animation, transition, etc.)

CSS writing specifications

Use CSS abbreviation properties

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

Remove the “0” in front of the decimal point

Abbreviated name

Many users like to abbreviate the class name, but the premise is to let people understand your name to abbreviate oh!

Hexadecimal color code abbreviation

Some color codes can be abbreviated, we try to abbreviate it, improve user experience.

Hyphenated CSS selector naming convention

1. Long names or phrases can be named using a dash.

2. CSS selectors cannot be named with an “_” underscore. Why?

  • Some browsers already don’t allow CSS selectors to be named with underscores (just not compatible);
  • Good at distinguishing JavaScript variable names.

Don’t play around with ids

Id is unique in JS and cannot be used more than once, whereas using the class selector can be used more than once. In addition, id takes precedence over class, so id should be used as needed, not abused.

Adds a status prefix to the selector

It is sometimes possible to add a state prefix to the selector to make the full semantics clearer, such as the “. Is – “prefix shown below.

 

 

CSS Naming Conventions (Rules)

Common CSS naming rules

Header: Header content: Content/Container End: Footer Navigation: Nav Sidebar: sidebar Column Page Peripheral control Overall layout width: Wrapper Left right Center: Left Right Center Login bar: Loginbar logo: Logo Advertising: banner Page main: main Hot: Hot News: News Download: Download Sub-navigation: Subnav menu: Menu Sub-menu: submenu search: Search Friendlink footer: Footer copyright: Copyright Scroll: Content Tags Article list: MSG Tips column title: Join: Joinus Guide: Guild Services: Service Register: Regsiter Status: Status Vote: Vote Partner: Partner

Notes:

/* Header */ content area /* End Header */

Name of id:

1) Page structure

Container: Container Header: Header Content: Content/Container Main: Main End: Footer Navigation: Nav Sidebar: Column Page Peripheral control Overall layout width: Wrapper Left right Middle: left right center

(2) navigation

Navigation: Nav Main navigation: Mainbav sub-navigation: Subnav Top navigation: TopNav side navigation: sidebar left navigation: Leftsidebar right navigation: Rightsidebar menu: Menu sub-menu: Submenu title: Title summary

(3) function

Logo: Logo Advertising: Banner Login: Login Bar: Loginbar Register: Regsiter Search: Search Functional Area: Shop Title: Title Join: JoinUS Status: Status Button: BTN Scroll: Scroll TAB: TAB article list: list Prompt: MSG Current: scroll icon: Guild guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild Guild

Notes ::

1. All lowercase; 2. Try to use English. 3. Do not add middle bars and underscores; 4. Try not to abbreviate, except for words that are obvious at first sight.

 

CSS stylesheet file name

The main master. CSS module module. CSS basically shares base. CSS layout, layout layout. CSS themes. CSS columns Mend. CSS print print. CSS