Bootstrap CSS coding specifications

Syntax

Replace the tab character with two spaces - this is the only way to ensure consistent presentation in all environments .
When grouping selectors, place individual selectors on their own line.
For code readability, add a space before the opening brace of each declaration block.
The closing brace of a declaration block should be on a separate line.
A space should be inserted after : of each declaration statement.
For more accurate error reporting, each statement should be on its own line.
All declaration statements should end with a semicolon. The semicolon after the last declaration statement is optional, but if you omit it, your code may be more error-prone.
For comma-separated attribute values, a space should be inserted after each comma (for example, box-shadow).
Do not use rgb(), rgba(), hsl(), hsla() or rect() Insert a space after the comma inside the of the value. This helps distinguish multiple color values (only commas, no spaces) from multiple attribute values (add both commas and spaces).
For attribute values or color parameters, omit the leading 0 for decimals less than 1 (for example,
.5 instead of 0.5; -.5px instead of -0.5px).
Hexadecimal values should be all lowercase, for example,
#fff. Lowercase characters are easier to read when scanning a document because their form is easier to distinguish.
Try to use abbreviated hexadecimal values, for example, use
#fff instead of #ffffff.
Add double quotes for attributes in the selector, for example,
input[type="text"]. It is only optional in some cases, but for code consistency it is recommended to use double quotes.
Avoid specifying units for 0 values, for example, use
margin: 0; instead of margin: 0px;.

Have questions about the terms used here? See Cascading Style Sheets - Syntax on Wikipedia.

/* Bad CSS */

.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background -color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

Declaration Order

Related property declarations should be grouped together and arranged in the following order:

Positioning
Box model
Typographic
Visual

Since positioning (positioning) can be Elements are removed from the normal document flow and can also override box model related styles, so they are ranked first. The box model comes second because it determines the size and placement of components.

Other properties only affect the inside of the component or do not affect the first two groups of properties, so they are ranked behind.

For the complete list of attributes and their order, please refer to Recess.

.declaration-order {
/* 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;
}

Do not use `@import`

and ## Compared with the #<link> tag, the @import command is much slower, which not only increases the number of additional requests, but also causes unpredictable problems. Alternatives include:

Use multiple
<link> elements
Through Sass or Less Similar The CSS preprocessor compiles multiple CSS files into one file
The CSS file merging function is provided through Rails, Jekyll or other systems

Please refer to Steve Souders' article for more knowledge.

Position of media query

Place media queries as close to relevant rules as possible. Don't package them in a single style file or put them at the bottom of the document. If you separate them, they will only be forgotten by everyone in the future. A typical example is given below.

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min -width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}

Prefixed attributes

When using the prefixed attributes of a specific manufacturer, the value of each attribute is aligned vertically by indentation, which facilitates multi-line editing.

In Textmate, use Text → Edit Each Line in Selection (⌃⌘A). In Sublime Text 2, use Selection → Add Previous Line (⌃⇧↑) and Selection → Add Next Line (⌃⇧↓).

/* Prefixed properties */
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box -shadow: 0 1px 2px rgba(0,0,0,.15);
}

Single-line rule statement

For only contains one statement style, for legibility and quick editing, it is recommended to put the statements on the same line. For styles with multiple declarations, the declarations should still be divided into multiple lines.

The key factor in doing this is for error detection -- for example, the CSS validator indicates that there is a syntax error on line 183. If it is a single statement on a single line, you will not ignore the error; if it is multiple statements on a single line, you must analyze it carefully to avoid missing the error.

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
display: inline-block;
width: 16px;
height: 15px;
background -image: url(../style/images/sprite.png);
}
.icon ; }
.icon-account { background-position: 0 -40px; }

Abbreviated form of property declaration

In cases where all values need to be set explicitly, the use of abbreviated property declarations should be limited as much as possible. Common abuses of abbreviated attribute declarations are as follows:

padding
margin
font
background
border
##border-radius

In most cases, we do not need to abbreviate Property declarations specify all values. For example, the HTML heading element only needs to set the top and bottom margin values, so you only need to override these two values when necessary. Excessive use of shorthand property declarations can lead to cluttered code and can cause unintended side effects by causing unnecessary overrides of property values.

MDN (Mozilla Developer Network) has a very good article about shorthand properties, which is useful for users who are not familiar with shorthand property declarations and their behavior.

/* Bad example */

.element {
margin: 0 0 10px;
background: red;
background: url("../style/ images/image.jpg");
border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
margin-bottom: 10px ;
background-color: red;
background-image: url("../style/images/image.jpg");
border-top-left-radius: 3px;
border -top-right-radius: 3px;
}

Less and Nesting in Sass

Avoid unnecessary nesting. This is because although you can use nesting, it doesn't mean you should. Use nesting only when styles must be restricted to the parent element (i.e., descendant selectors) and there are multiple elements that need to be nested.

// Without nesting

.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
> th { … }
> td { … }
}

Comments

Code is written and maintained by people. Make sure your code is self-describing, well-commented, and easy for others to understand. Good code comments convey context and purpose of the code. Don't simply restate component or class names.

For longer comments, be sure to write complete sentences; for general comments, you can write concise phrases.

/* Bad example */
/* Modal header */
.modal-header {
...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
...
}

Class naming

Only lowercase characters and dashes (not underscores, nor camel case) can appear in class names. Dashes should be used in naming related classes (similar to namespaces) (for example, .btn and .btn-danger).
Avoid overly arbitrary abbreviations. .btn represents button, but .s cannot express any meaning.
class names should be as short as possible and have clear meaning.
Use meaningful names. Use names that are organized or purposeful, rather than presentational.
Based on the nearest parent class or base class as the prefix of the new class.
Use .js-* classes to identify behaviors (as opposed to styles), and do not include these classes into CSS files.

You can also refer to the specifications listed above when naming Sass and Less variables.

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

Selector

Use class for common elements, which is beneficial to the optimization of rendering performance.
For frequently occurring components, avoid using attribute selectors (for example, [class^="..."]). Browser performance can be affected by these factors.
The selector should be as short as possible, and try to limit the number of elements that make up the selector. It is recommended not to exceed 3.
Only limit the class to the nearest parent element (that is, the descendant selector) when necessary (for example, when not using a prefixed class -- prefix is similar to a namespace).

Extended reading:

Scope CSS classes with prefixes
Stop the cascade

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { . .. }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

Code Organization

Organize code segments into components.
Develop consistent annotation specifications.
Use consistent whitespace to separate code into chunks, making it easier to scan larger documents.
If using multiple CSS files, split them into components rather than pages, as pages will be reorganized and components will only be moved.

/*
* Component section heading
*/

.element { ... }

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

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

Editor configuration

Set up your editor as follows to avoid common code inconsistencies and differences:

Replace tab characters with two spaces (soft-tab is used Spaces represent tab characters).
When saving the file, delete trailing whitespace characters.
Set the file encoding to UTF-8.
Add a blank line to the end of the file.

Refer to the documentation and add these configuration information to the project's .editorconfig file. For example: .editorconfig instance in Bootstrap. For more information, see about EditorConfig.

← Bootstrap HTML coding specifications