The best Bootstrap CSS Coding Standards Tutorial In 2024, In this tutorial you can learn grammar,Declaration order,Do not use @import,Media queries (Media query) position,With attributes prefix,Single-line rule declaration,Shorthand property declarations,Less and Sass nested,Note,class name,Selector,Code Organization,Configuration Editor,
:
after should insert a space. box-shadow
). rgb()
, rgba()
, hsl()
, hsla()
or rect()
behind the internal values comma insert a space. Such benefits from a plurality of attribute values (also both comma and space) to distinguish between a plurality of color values (only a comma, no spaces). .5
instead of 0.5
; -.5px
replaced -0.5px
). #fff
. When scanning a document, lowercase characters easy to distinguish, because their form is more easily distinguishable. #fff
instead of #ffffff
. input[type="text"]
. Only in certain circumstances it is optional , however, for consistency code proposals in double quotes. margin: 0;
instead of margin: 0px;
. For terms used herein have questions? Please refer to Wikipedia on Cascading Style Sheets - grammar .
/* 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; }
Property-related statements should be grouped and arranged in the following order:
As the positioning (positioning) can remove the element from the normal document flow, and also cover the box model (box model) related to style, so in the first row. The box model in second place, because it determines the size and position of components.
Other properties affect only the internal components (inside) or does not affect the first two groups attribute, so at the back.
Complete list of properties and their order 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; }
@import
And <link>
compared tag, @import
command much slower, not only increases the number of additional requests, but also lead to unexpected problems. There are several alternatives:
<link>
element Refer to Steve Souders article to learn more knowledge.
<!-- Use link elements --> <link rel="stylesheet" href="core.css"> <!-- Avoid @imports --> <style> @import url("more.css"); </style>
The media queries placed as close to the relevant rules. Do not pack them in a single style file, or at the bottom of the document. If you take them apart, and in the future everyone will be forgotten. Here's a typical example.
.element { /en. } .element-avatar { /en. } .element-selected { /en. } @media (min-width: 480px) { .element { /en.} .element-avatar { /en. } .element-selected { /en. } }
When using vendor-specific attributes prefixed by indentation, which allows the value of each property are aligned in the vertical direction, it is easy to multi-line editing.
In Textmate, using Text → Edit Each Line in Selection ( ^⌘A). In Sublime Text 2, use the 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); }
For styles that contain only a statement, in order to facilitate legibility and quick editing, we recommend that the statement on the same line. For a number of styles with a declaration or statement should be divided into multiple lines.
A key factor in doing this is to detect errors - for example, CSS validator pointed out that 183 line has a syntax error. If it is a single-line single statement, you will not ignore this error; if it is more than a single-line statement, you must carefully analyze the mistakes to avoid missing.
/* 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(/en/img/sprite.png); } .icon { background-position: 0 0; } .icon-home { background-position: 0 -20px; } .icon-account { background-position: 0 -40px; }
In the need to explicitly set the value of all cases, we should try to limit the use of shorthand property declarations. Situation commonly abused shorthand property declared as follows:
padding
margin
font
background
border
border-radius
In most cases, we do not need to specify all values for the attribute declaration abbreviated form. For example, HTML heading elements only on the set top and bottom margins (margin) value, therefore, when necessary, just covering these two values can be. Excessive use the short form of the property declaration can lead to confusing code, property value and would bring unnecessary overlap causing unexpected side effects.
MDN (Mozilla Developer Network) on a very good idea about shorthand properties of the article, for the less familiar shorthand property declaration and user behavior is useful.
/* Bad example */ .element { margin: 0 0 10px; background: red; background: url("image.jpg"); border-radius: 3px 3px 0 0; } /* Good example */ .element { margin-bottom: 10px; background-color: red; background-image: url("image.jpg"); border-top-left-radius: 3px; border-top-right-radius: 3px; }
Avoid unnecessary nesting. This is because although you can use the nest, but that does not mean you should use nested. Only in the style you must limit within the parent element (ie descendant selector), and need only a plurality of nested elements using nested exist.
// Without nesting .table > thead > tr > th { … } .table > thead > tr > td { … } // With nesting .table > thead > tr { > th { … } > td { … } }
The code is written and maintained by the people. Please make sure that your code can be self-describing, well-commented and easy to understand others. Good code comments can convey context and purpose of the code. Do not simply reiterate component or class name.
For longer comments, be sure to write a complete sentence; for general comments, can write simple phrases.
/* Bad example */ /* Modal header */ .modal-header { /en. } /* Good example */ /* Wrapping element for .modal-title and .modal-close */ .modal-header { /en. }
.btn
and .btn-danger
). .btn
representatives button, but .s
not express any meaning. .js-*
class to identify the behavior (as opposed to style), and do not contain these class to the CSS file. Sass and Less for variable naming is also read all the specifications listed above.
/* Bad example */ .t { /en. } .red { /en. } .header { /en. } /* Good example */ .tweet { /en. } .important { /en. } .tweet-header { /en. }
[class^="/en."]
). Browser performance will be affected by these factors. Further reading:
/* Bad example */ span { /en. } .page-container #stream .stream-item .tweet .tweet-header .username { /en. } .avatar { /en. } /* Good example */ .avatar { /en. } .tweet-header .username { /en. } .tweet .avatar { /en. }
/* * Component section heading */ .element { /en. } /* * Component section heading * * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough. */ .element { /en. } /* Contextual sub-component or modifer */ .element-heading { /en. }
Your editor in accordance with the following configuration settings to avoid common code inconsistencies and differences:
Referring to the document and add the configuration information to the project .editorconfig
file. For example: on Bootstrap in .editorconfig instance . For more information, please refer to the About EditorConfig .