The core content of a CSS file is composed of many CSS rules, and each rule contains two parts: selector and declaration; A declaration block may contain multiple declarations, each of which in turn consists of attributes and values. This is roughly the code structure of CSS.

So many rules are like a house in a small town. If the house is built without a plan, it will be very messy and difficult to see from a distance. It will give a very bad impression. Or later, due to the need of development, the town needs to build roads or build a new school. As the connection between houses is very chaotic, it will bring great difficulties to those who rebuild the town later.

Also, in the CSS world, the layout of your code is very important. Good code writing habits make code look cleaner and easier to read. Good code makes it easier for developers to find bugs and improve productivity. So as a good front-end, it is necessary to develop a good CSS coding habits.

The file name

All resource file names in a Web project should follow the same naming convention. CSS files are no exception. Here’s an example:

/* Not recommended */
MyScript.js
myCamelCaseName.css
i_love_underscores.html
1001-scripts.js
my-file-min.css
 
/* Recommended */
my-script.js
my-camel-case-name.css
i-love-underscores.html
thousand-and-one-scripts.js
my-file.min.css
Copy the code

Generally, resource files are named as follows:

  • Start with a letter, avoid a number
  • Use all lowercase, so that you are less likely to make mistakes when quoting because of case
  • Use – to separate words instead of underscores
  • For compressed files, for examplecssorjsFile, using.minInstead of-min

Set the coding

Set the encoding format to UTF-8 at the top of the CSS file. Otherwise, garbled characters may appear in the CSS file.

@charset "utf-8";
Copy the code

formatting

The CSS file contains many CSS rules, and each CSS rule is composed of two parts, namely selector and declaration block; A declaration block contains multiple declarations, which in turn consist of attributes and values. Formatting will introduce their structure and placement, including indentation, space, line breaks and individual declaration writing habits.

The indentation

Indentation of CSS code makes code structure clearer. Indentation of CSS code should follow the following points:

  • A TAB character (TabKey) is equivalent to 4 Spaces (spacebar),cssThe indentation of is generally the width of a TAB character.
  • Indent space should not be mixed with tabs and Spaces. It is recommended that one TAB in the editor be equal to 4 Spaces in width.
  • The declaration needs to be indented; inmedia queryIn all of thecssRules also need to be indented.
@media screen and (max-width: 640px) {
    body {
        background-color: #f8f8f8; }}Copy the code

The blank space

To make code look less crowded in the CSS world, use Spaces where appropriate:

  • Between the selector and the opening brace {of the declaration block.
  • After the colon of an attribute in a declaration and before its value.
  • For a declaration block with only one declaration, between the left and right sides of the declaration and the left and right braces.
  • After the comma that separates multiple attribute values on the same line.
  • For some particular attribute values that are comma separated, for examplergba(248, 248, 248, .5), you need to add a space after each comma
.heavy { font-weight: 700; }
 
body {
    font-family: Georgia, serif;
    background-color: rgba(248.248.248.5);
}
Copy the code

Newlines and blank lines

Line breaks and blank lines are also intended to make CSS code more elegant and structured:

  • eachcssA blank line is required between the rules.
  • Single-line comments are preceded by a blank line.
  • When multiple selectors exist in a rule, wrap each selector after a comma.
  • When there are multiple declarations in a declaration block, line breaks are required after each declaration. When there is only one declaration, the declaration goes with the selector.
  • For comma-separated and very long attribute values, consider a line break and indent a TAB character.
  • media queryThe first blank line of the declaration so that it doesn’t get crowded with the first declaration.
.modal {
    width: 500px;
    margin: 0 auto;
}
 
.modal a..modal span { color: #41b883; }
 
/* common */
.shadow {
    box-shadow:
        1px 1px 1px # 000.2px 2px 1px 1px #ccc inset;
}
 
@media screen and (max-width: 640px) {
    .modal .modal-con a {
        font-size: 12px; }}Copy the code

The selector

The selector section mainly introduces naming, writing habits and writing methods recommended for higher matching efficiency.

Naming conventions for ID and Class

The main conventions for naming ids and classes are as follows:

  • Use all letters in lower case and avoid camel case nomenclature.

  • Use a dash – to connect words. Avoid the underscore _.

    .post-title {
    font-size: 20px;
    color: #41b883;
}
Copy the code

  • Naming as far as possible semantic, let a person at a glance.

    /* Not recommended */
.fw-800 { font-weight: 800; }
 
.red { color: red; }
 
/* Recommended */ 
.heavy { font-weight: 800; }
 
.important { color: red; }
Copy the code

Avoid ID selectors whenever possible

ID selectors are frowned upon in the CSS world, where an ID is set as a unique identifier for an element, but the style of an element can be defined over and over again. Instead of using ID selectors, use class selectors.

/* Not recommended */
#article p { line-height: 28px; }
 
/* Recommended */
.article p { line-height: 28px; }
Copy the code

Avoid double qualifying with labels

What does that mean? Take a look at the following examples.

/* Not recommended */
p.desc { color: # 666; }
 
/* Recommended */
.desc { color: # 666; }
Copy the code

Be as accurate as possible, but preferably not more than level 3

CSS selection judgment also has efficiency problems, so when writing as accurate as possible; It is best not to have more than three levels of nesting of selectors, otherwise it is cumbersome and not necessarily more efficient.

/* Not recommended */
.content .title { font-size: 2rem; }
 
/* Recommended */
.content > .content-body > .title { font-size: 2rem; }
Copy the code

Attribute selectors remember to use double quotes

Attribute selectors remember to use double quotes, avoiding single quotes and no quotes

/* Not recommended */
input[type=text] { line-height: 1.2; }
 
/* Recommended */
input[type="text"] { line-height: 1.2; }
Copy the code

Statement block

As the second part of CSS rules, there are naturally a lot of caveats in the declaration block. Such as the order of declarations, the way properties and values are written, and some individual cases.

Order of declaration

There are hundreds of properties in CSS, and if you need a CSS rule you can almost fill it with them. If there is no order to these statements, then it will be a headache when it comes time to change them. You will have to take your time to find a large statement in one rule. But if your declarations are written in a logical order, the hierarchy of declarations is very clear. When declaring, more important attributes are usually written first.

  1. If it doescontentProperty, should be written first, that is, at the top of the declaration block.
  2. Locate related attributes, such asposition,top,left,z-index,display,float,visibilityandoverflow,flexAnd so on.
  3. Layout related properties, such asdisplay,float,visibility,overflow,flexandclearAnd so on.
  4. Box model-related properties, such aswidth,height,margin,padding,borderAs well asbox-sizingAnd so on.
  5. Properties related to text typesetting, such asfont,line-height,vertical-align,text-alignandwhite-space,text-decorationAnd so on.
  6. Visual sensory properties, for examplecolor,background,list-style,transform,transitionandanimationAnd so on.
.box {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
 
    /* Layout */
    display: block;
    float: right;
 
    /* Box-model */
    width: 100px;
    height: 100px;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
 
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;
 
    /* Visual */
    color: # 333;
    background-color: #f5f5f5;
}
Copy the code

Use abbreviated attributes whenever possible

Some CSS properties can be separated into separate properties, such as background, border, font, list-style, margin, and padding. These properties are called composite properties in CSS, and because a property contains multiple independent properties, it makes the code more concise when writing, so it is also called shorthand properties, which can also be understood as verbs.

/* Not recommended */
.box {
    margin: 0;
    margin-top: 10px;
}
 
/* Recommended */
.box { margin: 10px 0 0; }
Copy the code

Each statement ends with a semicolon

In CSS, declarations that do not end with a semicolon are problematic, but there is an exception where the last declaration of a declaration block does not end with a semicolon. If you change the order of the declaration or add a new declaration, the original declaration without a semicolon may not be the last declaration, so to avoid this unnecessary error, we need to get used to adding semicolons to each declaration.

/* Not recommended */
.post-content h6 {
    position: relative;
    margin: 1em 0;
    color: #4e4a4a
}
 
/* Recommended */
.post-content h6 {
    position: relative;
    margin: 1em 0;
    color: #4e4a4a;
}
Copy the code

Double quotation marks

In the CSS world, there are many places where quotation marks are necessary. To avoid confusion, it is recommended to use double quotation marks wherever quotation marks are required, rather than single quotation marks.

For the font-family attribute, if the attribute value is in English with Spaces such as Helvetica Neue or Chinese, then double quotation marks are recommended, such as the content attribute. For URI resource references, use url() to introduce resources without quotation marks. For example, introducing background images, introducing font packs when defining fonts, etc.

.tip:before {
    content: "!";
    font-family: Dosis, "Source Sans Pro"."Helvetica Neue", Arial, sans-serif;
    background: url(../img/tip.png) no-repeat center;
}
Copy the code

Try not to use! important

The order in which CSS rules are defined is important. The same level of declaration, the last definition file will overwrite the first one, but if it is used! Important to restrict the declaration to the highest priority, which is a very overbearing rule. Sometimes because of use! Important, so that the script cannot change the result of the style rendering, very annoying. So it is not recommended to use this property. Instead, if you really need to increase the priority of a selector, you can do so by increasing the style level.

/* Not recommended */
.heavy { font-weight: 700 ! important; }
 
/* Recommended */
.heavy p..heavy a { font-weight: 700; }
Copy the code

Values and units

  • Use lower case for all attributes and values.

  • When the property value is 0, do not include units.

    /* Not recommended */
.info-item { padding: 0px 10px; }
 
/* Recommended */
.info-item { padding: 0 10px; }
Copy the code

  • Use three-digit hexadecimal notation whenever possible, such as for colors.

    /* Not recommended */
.pink-color { color: #ff33aa; }
 
/* Recommended */
.pink-color { color: #f3a; }
Copy the code

  • Font-weight uses a numeric representation, 400 instead of normal and 700 instead of bold.

    /* Not recommended */
.heavy { font-weight: bold; }
 
/* Recommended */
.heavy { font-weight: 700; }
Copy the code

  • Try not to use units with line-height unless you must use PX to calibrate it.

    /* Not recommended */
.content p { line-height: 1.2 em; }
 
/* Recommended */
.content p { line-height: 1.2; }
Copy the code

  • When the attribute value is a decimal between 0 and 1, you can omit the 0.

    /* Not recommended */
.pannel { opacity: 0.8; }
 
/* Recommended */
.pannel { opacity:.8; }
Copy the code

annotation

File or module comments

A comment at the top of the file (after @charset) should probably tell you what the file is about, who wrote it, when it was last updated, etc. Of course, if a CSS file is very large and involves a lot of component module-related code, you might need a comment for each module.

/** * @name: bubuzou. CSS * @description: hexo-theme- Bubuzou theme style * @author: typeR([email protected]) * @update: The 2017-7-21 16:21:02 * /
Copy the code

Single-line comments

There must be a space between the asterisk and the content. If a single declaration needs comment, separate a space after the semicolon of the declaration to comment it.

/* This is a comment about this selector */
.another-selector {
    position: absolute;
    top: 0; /* I should explain why this is so important */
}
Copy the code

Multiline comment

Asterisks must be aligned in one column, and there must be a space between the asterisk and the content. Add a space between multi-line comments and rules to make them less crowded.

/** * Description of left, whether or not it has media queries, etc. */
 
.left { float: left; }
Copy the code

Refer to the article

  • Web Styleguide – Style guide to harmonize HTML, Javascript and CSS / Sass coding style
  • CSS Coding Standards
  • css-syntax
  • CSS style writing specification

Thank you for reading

First of all, thank you for reading this article. I believe you deserve the reward for your time. Look forward to your coming again. Not enjoying it? Check out the original:

  • Detail a directory plug-in for an article page
  • 34 Facts about Vue THAT I can tell you
  • Small program upgrade WePY2 tread pit record
  • Vue-test-utils + Jest Unit Testing Introduction and Practice