[Specification] Front-end code specifications-css specifications, and front-end code css specifications

[Specification] Front-end code specifications-css specifications, and front-end code css specifications
Encoding

On the first line of css, set the file encoding to UTF-8.

@charset "UTF-8";

Class Name

The class name should be as short and meaningful as possible. Use meaningful names, organizational or objective-specific names, and do not use explicit names.

Not recommended

fw-800 {font-weight:800;}.red {color:red;}

Recommendation

.heavy {font-weight:800;}.important {color:red;}

Use hyphens (-) to separate words in the class. Although it is inconvenient for you to double-click it, it can enhance understanding. In addition, the property Selector[attribute|=value]It can also recognize hyphens (-), so it is best to use hyphens as the separator.

Not recommended

.slide_hd {}.slide_bd {}

Recommendation

.slide-hd {}.slide-bd {}

Use the latest parent class or basic class as the prefix of the new class.

Not recommended

.header .logo {}.header .banner {}

Recommendation

.header-logo {}.header-banner {}

Use.js-*Class to identify the behavior (relative to the style), and do not write these classes into any style.

Reduce selector nesting

When writing a selector, reduce the nesting level as much as possible, generally 2 ~ Layer 3: no more than Layer 4.

Not recommended

.main ul li a span {}

Recommendation

.main span {}

Optimization Selector

Use clear, accurate, and semantic class names when building selectors. Minimize the use of the tag selector. If you only care about your class name, rather than your code elements, it will be easier to maintain.

Not recommended

div.content > header.content-header > h2.title {    font-size: 2em;}

Recommendation

.content > .content-header > .title {    font-size: 2em;}

Attribute abbreviation

Css provides various shorthand attributes (font,backgroundAnd so on.

Not recommended

border-top-style: none;font-family: palatino, georgia, serif;font-size: 100%;line-height: 1.6;padding-bottom: 2px;padding-left: 1px;padding-right: 1px;padding-top: 0;

Recommendation

border-top: none;font: 100%/1.6 palatino, georgia, serif;padding: 0 1px 2px;

However, you cannot abuse the short form. Excessive use of attribute declarations in the short form can lead to code confusion and cause unexpected side effects on attribute values.

Not recommended

width:100px;margin:0 auto;

Recommendation

width:100px;margin-right:auto;margin-left:auto;

The Unit after 0 is omitted.

Do not use units after 0 values.

Not recommended

padding-bottom: 0px;margin: 0em;

Recommendation

padding-bottom: 0;margin: 0;

Color value in hexadecimal notation

The color values in css can be expressed in hexadecimal notation. If possible, they can be abbreviated, for example:#fff,#000.

Use of hack

Although hacks can easily solve the compatibility problem between browsers, we should not use hacks to solve the problem as far as possible, such as changing the structure.

Declaration Order

To ensure better readability, we should follow the following sequence:

Media query location

Store media queries near related rules as much as possible. Do not package them in a single style file or at the bottom of the document. If you separate them, they will only be forgotten in the future.

Recommendation

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

Prefix attributes

When the prefix attribute of a specific vendor is used, the value of each attribute is aligned vertically by indentation, which facilitates multi-row editing.

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

Quotation marks

Double quotation marks ("") Instead of single quotes (''. Do not use quotation marks for url values.

Not recommended

import url('//cdn.com/foundation.css');input[type='submit'] {    font-family: 'open sans', arial, sans-serif;}body:after {    content: 'pause';}

Recommendation

@import url(//cdn.com/foundation.css);input[type="submit"] {    font-family: "open sans", arial, sans-serif;}body:after {    content: "pause";}

Statement ended

To ensure consistency and scalability, each statement should end with a semicolon.

Not recommended

.demo {    width:100px;    height:100px}

Recommendation

.demo {    width:100px;    height:100px;}

Multi-line rule Declaration

For ease of modification and quick editing, statements are divided into multiple rows, even if the style contains only one declaration.

Not recommended

.demo {width:100px;height:100px;}

Recommendation

.demo {    width:100px;    height:100px;}

Chinese font reference

Css Chinese fonts can be expressed in unicode format, such as ""\5B8B\4F53. See the following table for details:

Chinese	English name	Unicode
	SimSun	\ 5B8B \ 4F53
	Microsoft YaHei	\ 5FAE \ 8F6F \ 96C5 \ 9ED1

Click to view more fonts.

Sass nesting

You can nest selector in sass, which can make the code more clean and readable. Nest all selectors, but avoid nesting selectors without any content.

If you need to specify the style attributes of some child elements, and the parent element has no style attributes, you can use the regular css selector chain, which will prevent your script from being too complex.

Not recommended

.content {    display: block;} .content > .news-article > .title {    font-size: 1.2em;}

Recommendation

.content {    display: block;    > .news-article > .title {      font-size: 1.2em;    }}

When sass Nesting is used, it is important to have a clear nesting order.

.test {    @extend %clearfix;    color:#ccc;    &:hover {        color:#000;    }    &:before {        border:1px solid #eee;        content:"";    }    &.active {        color:#f00;        &:hover {            color:#ff0;        }    }    @media screen and (max-width: 640px) {        display:block;        font-size:2em;    }    > .title {        font-size:1.2em;    }}

References

• Web Styleguide-Style guide to harmonize HTML, Javascript and CSS/Sass coding style
• Http://www.css88.com/archives/5505