One, foreword

First, this is a standard article, mainly in the daily front-end work encountered some problems to make a summary. As I have experienced project development in a number of companies before and after, the coding specifications of these companies have a certain understanding, but recently in the process of the company’s project development found some problems on the CSS coding specifications, borrow this article to record. (Keep adding…)

Problem description

In general, a project is jointly completed by many people, and the code writing method of the project is often uneven due to personal coding habits, which mainly reflects the following problems:

  1. In the process of reading CSS code, because of the CSS properties, if you encounter a selector with a large number of CSS properties, it is very difficult to read;
  2. If the CSS preprocessors are not unified, the coding mode may be different.
  3. CSS coding styles are not uniform, there are many ways to write, such as whether to write braces, colon, semicolon, and so on;
  4. The CSS is not named properly, which makes it difficult to locate and understand.

Second, coding specifications

Here will be combined with some of their own understanding and work experience given some coding norms.

Naming conventions

Although the scope of the style can be set by scoped in engineering front-end projects, the naming convention of BEM is recommended for code readability, and the reduction of hierarchy nesting in CSS preprocessors can effectively reduce the size of the project packaging.

BEM stands for Block, Element, and Modifier.

  • A Block is a separate Block in a page that can be reused in different situations. Each page can be viewed as consisting of multiple blocks.
  • An Element is an Element that constitutes a Block. It is meaningful only within the corresponding Block and depends on the existence of the Block.
  • Modifier describes the properties or state of a Block or Element; You can have more than one Modifier for the same Block or Element.

In the selector, the extended relationship is represented by the following three concatenation symbols:

  • -Hyphen: Used only as a hyphen, a link between words indicating a block, child element, or state.
  • __Double underline: Double underline is used to connect a block to its children.
  • --Double dashes: Double dashes describe a state of a block or its children.

Template: type – block__element – modifier

Problem solved: Complete decoupling between components without causing namespace contamination, such as the potential nesting risk of.mod-xxx ul Li.

Performance related: BEM naming makes Class names longer, but this bandwidth overhead is negligible after gZIP compression

1. Common CSS naming rules

Head: the header; Content: Content /container; Tail: footer; Navigation: nav; Sidebar: sidebar; Column: column; Page periphery controls the overall layout width: Wrapper; Left right center: left right center; Loginbar: loginbar; Logo: Logo; Advertising: banner; Page body: main; Hot: hot; News C. Download: Download; Subnavigation: subnav; Menu: menu; Submenu: submenu; Search: search; Friendlink: FriendLink; Footer: footer; Copyright: copyright; Scroll; Content: content; Tags: tags; List of articles: list; Prompt message: MSG; Tips: Tips; Column title: Title; Join: Joinus; Guide: guide; Service: service; Register: Regsiter; Status: status; Vote d. Partner: Partner

2. Name the ID

(1) Page structure

Container: container; Header: header; Content: Content /container; Page body: main; Footer; Navigation: nav; Sidebar: sidebar; Column: column; Page periphery controls the overall layout width: Wrapper; Left right center: left right center

(2) navigation

Navigation: nav; Main navigation: MainNAV; Subnavigation: subnav; Top navigation: topnav; Side navigation: sidebar; Left navigation: leftsidebar; Right navigation: Rightsidebar; Menu: menu; Submenu: submenu; Title: title; Abstract: the summary

(3) function

Logo: Logo; Advertising: banner; Login: login; Loginbar: loginbar; Register: register; Search: search; Functional area: Shop; Title: title; Join: Joinus; Status: status; Button: BTN; Scroll; TAB page: TAB; List of articles: list; Prompt message: MSG; 1. current; Tips: Tips; Icon: icon; Note: note; Guidelines: Guild; Service: service; Hot: hot; News C. Download: Download; Vote d. Partner: Link: link; Copyright: copyright

Attribute order

The related attribute declarations should be grouped together in the following order:

  • Positioning – Positioning attributes
  • Box Model – Box model property
  • Typographic – Typesetting property
  • Visual – Visual properties
  • Misc – Other attributes

Positioning is at the top of the list because it removes elements from the normal document flow and also overwrites box Model-related styles.

The box model comes second because it determines the size and location of the components.

The other attributes only affect the inside of the component or do not affect the first two sets of attributes, and therefore fall behind.

/ * sample * /
.selector {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: # 333;
    text-align: center;
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
    /* Misc */
    opacity: 1;
}

Copy the code

Writing standards

1. Abbreviated attributes

Use abbreviable CSS properties (such as font) to improve coding efficiency and code readability.

/ * sample * /
.demo {
    border-top: 0;
    font: 100%/1.6 palatino, georgia, serif;
    padding: 0 1em 2em;
}
Copy the code

2. Value writing

  • Remove the “0” before the decimal point;
  • When the value is 0, you do not need to add units;
  • Hexadecimal color code abbreviation;
/ * sample * /
.demo {
    margin: 0;
    padding: 0;
    font-size:.8em;
    color: #ebc;
}
Copy the code

3. Do not use the ID selector arbitrarily

Because ID selectors are named for a unique reason, a lot of frequent use can lead to naming conflicts.

4. Code format

  • To reflect hierarchy and improve readability, block-level content should be indented;
  • Each CSS line should end with a semicolon;
  • There should be a space between the attribute name and value;
  • Delimit selectors with Spaces between {};
  • Each selector should start on a separate line;
  • Rules are separated by blank lines;
  • Attribute selectors and attribute values are quoted in single quotes; URI values are not quoted;
  • In the case of CSS preprocessing Less, Stylus, etc., try to keep nested levels within layers.
/ * sample * /
@import url(//www.google.com/css/maia.css);

h1.h2..demo1 {
    background: #fff;
    color: # 444;
}

.demo2 {
    background: #fff;
    color: # 444;
}
Copy the code

Iii. Reference materials

  • You are advised to use the CSS in a standard and sequence
  • CSS naming convention -BEM
  • Google HTML/CSS specification
  • CSS code specification