CSS style writing specifications and css style Writing

CSS style writing specifications and css style Writing

Different teams may have their own specifications, or many people write what they think when writing CSS. There are no too many constraints.

I think there is still a need for CSS code standards. Especially with the cooperation of teams and multiple people, the standards are particularly important.

The list in this article is a set of good CSS writing standards obtained in practice. We do not want everyone to fully adopt them. Instead, we can develop a set of CSS code Specifications suitable for our own teams.

I also hope that more suggestions can be made for mutual improvement. This specification can also be seen on my Github. Please leave a message or raise your PR.

 

Encoding settings

UseUTF-8Encoding, which is used in the CSS code header:

@charset "utf-8";

Note: It must be defined before all characters in the CSS file (including encoding comments ),@charset.

For example, the example below will make@charsetInvalid:

/* Character encoding */@ charset "UTF-8"; html, body {height: 100% ;}@ charset "UTF-8 ";

Namespace specifications

• Layout: Use g as the namespace, such as. g-wrap,. g-header, and. g-content.
• Status: Takes s as the namespace, indicating dynamic and interactive states, such as. s-current and s-selected.
• Tool: it uses u as the namespace to indicate reusable tools that are not coupled with the business logic, such as u-clearfix and u-ellipsis.
• Component: Uses m as the namespace to indicate reusable and transplanted component modules, such as m-slider and m-dropMenu.
• HOOK: Uses j as the namespace to indicate the class names specifically called for JavaScript, such as j-request and j-open.

Namespaces

Not selectedBEMThis naming rule is too strict and the style name is too long and ugly.

It is not recommended to use underscore _ for connection.

• Save operation, press one at a timeshiftKey
• Well differentiate JavaScript variable naming

 

Selector

When a rule contains multiple selectors, each selector excludes one row.

, + ,~ ,> Each side of the selector retains a space.

.g-header > .g-header-des,.g-content ~ .g-footer {    }

 

Rule declaration Block

• When multiple style declarations exist in the Rule declaration block, each style occupies one row.
• Add a space before the left braces.
• Add a space to the colon (:) of the style attribute without a space.
• Each style is followed by a semicolon.
• The right braces} of the block declared by the rule have an exclusive row.
• Each rule declaration is separated by blank lines.
• Use single quotation marks for all outermost quotation marks '.
• When an attribute has multiple attribute values, the attribute values are separated by commas (,). A space is added after each Comma. When a single attribute value is too long, each attribute value occupies one row.

Complete example:

.g-footer,.g-header {  position: relative;}.g-content {  background:    linear-gradient(135deg, deeppink 25%, transparent 25%) -50px 0,    linear-gradient(225deg, deeppink 25%, transparent 25%) -50px 0,    linear-gradient(315deg, deeppink 25%, transparent 25%),    linear-gradient(45deg, deeppink 25%, transparent 25%);  }.g-content::before {  content: '';}

 

Value and Unit

• When the value or color parameter is between 0 and 1, the value 0 before the decimal point is omitted.

  color: rgba(255, 255, 255, 0.5)

  color: rgba(255, 255, 255, .5);

• The Unit is omitted when the length is 0.

  margin: 0px auto

  margin: 0 auto

• The hexadecimal color attribute values are in lowercase and abbreviated form.

  color: #ffcc00

  color: #fc0

 

Style attribute order

When writing a single style rule, attributes should be grouped by function and written in the order of Positioning Model> Box Model> Typographic> Visual to improve the readability of the Code.

• If the content attribute is included, it should be placed at the beginning;
• Positioning Model Layout mode and position. related attributes include position/top/right/bottom/left/z-index/display/float /...
• Box Model. related attributes include: width/height/padding/margin/border/overflow /...
• Typographic text layout. Relevant attributes include: font/line-height/text-align/word-wrap /...
• Visual appearance. related attributes include: color/background/list-style/transform/animation/transition /...

Positioning is in the first place because it can separate an element from a normal text stream and overwrite the style related to the box model. The box model follows closely, because it determines the size and position of a component. Other attributes only work in the component or do not affect the results of the first two cases, so they are placed behind.

 

Use quotation marks properly

Some styles contain spaces or Chinese keywords.

font-familyUse quotation marks

To ensure compatibility, we recommend that you add single or double quotation marks at both ends of the font to ensure compatibility when there are spaces in the font name, Chinese name font, and Chinese font represented by Unicode character encoding:

Body {font-family: 'Microsoft yahei', '- ',' \ 5b8b \ 4f53 ';}

background-imageUse quotation marks in the url

If there are spaces in the path, the earlier version of IE cannot be identified, which will cause the path to become invalid. We recommend that you add single quotation marks or double quotation marks no matter whether there are spaces:

div {  background-image: url('...');}

Avoid using !important

Do not use!important.

!importantWill bring a nightmare impact to later maintenance and multi-person collaboration.

If you find that a new style cannot overwrite an old one!importantThis is because the priority of the new selector is not higher than that of the old style selector. Therefore, a reasonable new style selector can be used to avoid seemingly unnecessary!important.

 

Code comment single line comment

A space must be reserved between the asterisk and the content.

/* Change the color of the table to the same row */

Multi-line comment

The asterisks must be aligned in one column. A space must be reserved between the asterisks and the content.

/** * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough. */

Comments in the Rule declaration Block

Use // annotation, // Add a space next to it to annotate an independent line.

.g-footer {    border: 0;    // ....}

File comment

The file description must be included at the top of the file and identified by @ name. An asterisk must be aligned in one column. A space must be reserved between the asterisk and the content, and a space must be reserved between the colon and the content of the identifier.

/*** @ Name: file name or module name * @ description: file or module description * @ author: author-name (mail-name@domain.com) * author-name2 * @ update: */

• @ Description is a file or module description.
• @ Update is optional. We recommend that you update each change.

When the business project is mainly undertaken by one or more fixed individuals, you need to add the @ author logo. On the one hand, it is to respect the fruits of labor, and on the other hand, it is convenient to quickly locate the owner when necessary.

 

SASS recommended nesting Hierarchy Rules

UseSASS,LESSWhen waiting for the pre-processor, it is recommended that the nesting level not exceed three layers.

 

Usage of components/public classes

Component/public class usage%placeholdersDefinition, use@extendReference. For example:

%clearfix {  overflow: auto;  zoom: 1;}.g-header {  @extend %clearfix;}

Component class

When using SASS, some common public component classes are often pre-defined, such as clearing floating, horizontally vertical center, and text ellipsis. Or multiple elements have the same style. We hope that we can write less code, and the public part is extracted and written only once for reuse.

However, there are multiple reuse methods in SASS. You can use a single class definition to add or use the required labels.@includeOr@extendIntroduce@mixin, Or@functionWhat about it?

Based on the considerations of making CSS simpler and reusing code%placeholdersDefinition, use@extendThe referenced scheme.

• %placeholdersIs just a placeholder, as long as it does not pass@extendCall. No code is generated after compilation.
• Use@extendBecause the same%placeholdersThe same CSS style will be merged (otherwise, if you use@includeCall defined@mixin, The same CSS style will not be merged)
• The component classes here refer to CSS styles that do not change dynamically. Note that they are different from those that can generate different numeric styles by passing parameters.@mixinMethod

 

Avoid using tag names whenever possible

The use of SASS, or in CSS, also has this confusion.

Suppose we have the following html structure:

<div class="g-content">    <ul class="g-content-list">        <li class="item"></li>        <li class="item"></li>        <li class="item"></li>        <li class="item"></li>    </ul></div>

When naming the writing style for the label at the innermost layer, we have two options:

.g-content {  .g-content-list {    li {      ...    }  }}

Or

.g-content {  .g-content-list {    .item {      ...    }  }}

That is, after compilation, the following two are generated. Which one is better?

• .g-content .g-content-list li { }
• .g-content .g-content-list .item { }

CSS selector-based parsing rules (from right to left), we recommend that you use the second.g-content .g-content-list .item { }Avoid using a common tag name as a part of the selector to improve CSS matching performance.

The browser's typographical engine parses CSS based on the right-to-left (right-to-left) rule, so that style rules can match nodes on the rendering tree more quickly.

 

This specification can also be seen on my Github. Please leave a message or raise your PR.

At the end of this article, if you have any questions or suggestions, you can have a lot of discussions, original articles, and limited writing skills. If there are any mistakes in this article, please kindly advise.