@[TOC]

First of all, thank you dear teacher

The sunshine embraces the rain, the green tree embraces the flowers. Darling teacher careful cultivation and guidance like a warm sun, lit up my life journey. Here I wish the teacher a happy children’s day, youth!

Ok, here is the CSS writing specification

CSS code format

The space specification

== [mandatory] the == selector must contain Spaces between {.

Example:.selector {}

== [Mandatory] == Do not contain Spaces between the attribute name and:, and must contain Spaces between == : and the attribute value.

Example:

font-size: 12px;
Copy the code

Selector specification

When a rule contains multiple selectors, each selector declaration must have an exclusive row.

Example:

/* good */
.post..page..comment {
    line-height: 1.5;
}


/* bad */
.post..page..comment {
    line-height: 1.5;
}
Copy the code

[Suggestion] The nesting level of the selector should be no more than 3 levels, and the qualification condition of the position at the back should be as accurate as possible.

Example:

/* good */
#username input {}
.comment .avatar {}

/* bad */
.page .header .login #username input {}
.comment div * {}
Copy the code

Attribute specifications

The == attribute definition must start on a separate line.

Example:

/* good */
.selector {
    margin: 0;
    padding: 0;
}

/* bad */
.selector { margin: 0; padding: 0; }
Copy the code

Attribute definition must end with a semicolon. (The last sentence does not include attributes; Yes, but strongly not recommended)

Example:

/* good */
.selector {
    margin: 0;
}

/* bad */
.selector {
    margin: 0
}
Copy the code

CSS writing sequence

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

Such as:

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 for the selector.

  2. It is not recommended to name CSS selectors with an “_” underscore. Why?

    Press shift one less while typing; Browser compatibility issues (such as selector naming with _tips, which is not valid in IE6) can distinguish JavaScript variable naming (JS variables are named with “_”). Here’s a detailed discussion of dashes and underscores

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

Sometimes you can add a state prefix to the selector to make the semantics clearer, as shown in the image below.

CSS Naming Conventions (Rules)

Common CSS naming rules

Head:headerContent:contentTail/container:footerNavigation:navSidebar column: Column Page peripheral control overall layout width: Wrapper Left right middle:left rightCenter loginbar: loginbar logo: logo advertising: banner page body:mainSub navigation: Subnav Menu:menuSubmenu: Search: Friendlink: FriendLink Footer:footerCopyright: copyrightcontentJoin: Joinus Guide: Guide Service: Service Register: Regsiter Status: Status Vote: PartnerCopy the code

Notes:

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

Copy the code

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 centerCopy the code

2) navigation

Navigation:navMain navigation: MainNav Sub-navigation: Subnav Top navigation: TopNAV Side navigation: sidebar Left navigation: Leftsidebar Right navigation: Rightsidebar menu:menuSubmenu title: Title Summary: SummaryCopy the code

3) function

Logo: LOGO Advertising: Banner Login: Login Bar: Loginbar Register: Register 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 GuildCopy the code

Matters needing attention:

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 modulemoduleCSS Themes. CSS Columns. CSS Text font. CSS forms. CSS patch mendCopy the code