Shulou(Shulou.com)06/01 Report--

This article mainly introduces "the method of CSS style writing standard". In the daily operation, I believe that many people have doubts about the method of CSS style writing standard. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the doubts of "CSS style writing standard method". Next, please follow the editor to study!

Encoding settin

UTF-8 encoding is used in the CSS code header:

@ charset "utf-8"

Note that @ charset must be defined before all characters in the CSS file (including encoding comments) for @ charset to take effect.

For example, the following examples invalidate @ charset:

/ * character encoding * /

@ charset "utf-8"

Html

Body {

Height:100%

}

@ charset "utf-8"

Namespace specification

Layout: use g as the namespace, for example: .g-wrap, .g-header, .g-content.

State: uses s as the namespace to represent dynamic, interactive states, such as .s-current, s-selected.

Tools: use u as the namespace to represent reusable tools that decouple business logic, such as u-clearfix, u-ellipsis.

Components: use m as the namespace to represent reusable and portable component modules, such as m-slider, m-dropMenu.

Hook: uses j as the namespace to represent the class name specific to JavaScript calls, such as j-request, j-open.

Namespace thought

Instead of choosing the rule that the naming of BEM is too harsh and the style name is too long and ugly, a more eclectic solution is adopted.

Underscore _ is not recommended for connection

Save the operation, press one less shift key when typing

Can well distinguish between JavaScript variable naming

Character lowercase

The defined selector names, attributes, and property values are all written in lowercase.

Selector

When a rule contains multiple selectors, each selector has a unique row.

Leave a space on each side of the, +, ~, > selector.

.g-header > .g-header-des

.g-content~.g-footer {

}

Short naming and good semantics

For the naming of selectors, try to be concise and semantic, and there should be no semantic ambiguity such as g-abc.

Rule declaration block

When there are multiple style declarations in the rule declaration block, each style has a unique line.

Add a space before the opening brace {of the rule declaration block.

Add a space after the colon of the style attribute, without a space before it.

Each style ends with a semicolon.

The closing brace} of the rule declaration block has an exclusive line.

Each rule declaration is separated by a blank line.

All outermost quotation marks are in single quotes'.

When an attribute has multiple attribute values, separate the attribute values with a comma, add a space after each comma, and each attribute value occupies a row when the single attribute value is too long.

The complete example is as follows:

. g-footer

. g-header {

Position:relative

}

. g-content {

Background:

Linear-gradient (135DEGRAPHING Pink25% Demo transparent25%)-50px0

Linear-gradient (225degmending Pink25% meme transparent25%)-50px0

Linear-gradient (315degmending Pink25% meme transparent25%)

Linear-gradient (45 degregma transparent 25% Demo transparent 25%)

}

. g-content::before {

Content:''

}

Numerical value and unit

When the attribute value or color parameter is a number between 0 and 1, the 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 value is 0.

Margin: 0px auto

Margin: 0 auto

Hexadecimal color attribute values are lowercase and as short as possible.

Color: # ffcc00

Color: # fc0

Style attribute order

When writing attributes under a single style rule, they 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 first

Positioning Model layout mode, location, related attributes include: position / top / right / bottom / left / z-index / display / float / …

Box Model box model, related attributes include: width / height / padding / margin / border / overflow / …

Typographic text typesetting, related attributes include: font / line-height / text-align / word-wrap / …

Visual visual appearance, related properties include: color / background / list-style / transform / animation / transition / …

Positioning is in the first place because he can take an element out of the normal text stream and override the styles associated with the box model. The box model follows because it determines the size and location of a component. Other properties work only within the component or do not affect the results of the first two cases, so they are at the bottom of the list.

Rational use of quotation marks

In some styles, there will be some keywords with spaces or Chinese keywords.

Use quotation marks in font-family

When there is a space in the middle of the font name, the Chinese name font and the Chinese font represented by Unicode character coding, it is recommended to add single or double quotation marks at both ends of the font to ensure compatibility:

Body {

Font-family:'Microsoft YaHei',' boldface-Jane, 'b8bf53'

}

Use quotation marks within the url of background-image

If there are spaces in the path, the old version of IE is unrecognizable, which will invalidate the path. It is recommended to add single or double quotation marks regardless of whether there is a space:

Div {

Background-image:url ('...')

}

Avoid using! important

Except for some very special cases, try not to use! important.

! the existence of important can have a nightmare impact on post-maintenance and multi-person collaboration.

When there is a style overlay cascading, if you find that a newly defined style cannot overwrite an old style, it will only take effect if you add! important, because the priority of your newly defined selector is not higher than that of the old style selector. Therefore, a reasonable writing new style selector can completely avoid some situations that seem to need to use! important.

Code comment

Single-line comment

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

/ * discoloration of interlaced tables * /

Multiline comment

The asterisk must be aligned in one column, and a space must be left between the asterisk and the content.

/ * *

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

, /

Comments within the rule declaration block

Use / comment, followed by a space, and comment on a separate line.

. g-footer {

Border:0

/ /....

}

File comment

The top of the file must contain file comments, which are identified by @ name. An asterisk must be aligned in one column, a space must be left between the asterisk and the content, and a space must be left between the identifier colon and the content.

/ * *

* @ name: file name or module name

* @ description: file or module description

* @ author: author-name (mail-name@domain.com)

* author-name2 (mail-name2@domain.com)

* @ update: 2015-04-29 00:02

, /

@ description is the description of the file or module.

@ update is optional. It is recommended to update it every time you change it.

When the business project is mainly carried out by one or more fixed individuals, the @ author logo needs to be added to respect the results of labor on the one hand and facilitate the rapid identification of those responsible when needed on the other.

Recommendations for using SASS

Nested hierarchy rule

When using preprocessors such as SASS and LESS, it is recommended that the nesting level should not exceed 3 layers.

How to use components / common classes

The component / common class is defined using% placeholders and referenced by @ extend. Such as:

% clearfix {

Overflow:auto

Zoom:1

}

. g-header {

@ extend%clearfix

}

Thinking of component Class

With SASS, some common component classes are often pre-defined, such as clearing floats, horizontal and vertical centering, and literal ellipsis. Or multiple elements have the same style, we want to be able to write this part of the code less, the common part is extracted and written only once, to achieve reuse.

But there are many ways to reuse in SASS, so should you use a separate class definition to add the required tags, or use @ include or @ extend to introduce a @ mixin or a @ function into the defined class?

For the sake of making CSS more concise and code reuse, adopt the above scheme using the% placeholders definition and the @ extend reference.

% placeholders, which is just a placeholder, will not generate any code amount after compilation as long as it is not called through @ extend

The @ extend reference is used because the same CSS styles compiled will be merged every time the same% placeholders is called (conversely, if you use @ include to call the defined @ mixin, the same CSS styles will not be merged)

The component classes here refer specifically to those CSS styles that do not change dynamically, and should be distinguished from @ mixin methods that can generate different numerical styles by passing parameters.

Avoid using label signatures as much as possible

There is also this confusion in using SASS, or in CSS.

Suppose we have the following html structure:

When naming the writing style for the innermost tag, we have two options:

. g-content {

.g-content-list {

Li {

...

}

}

}

Or

. g-content {

.g-content-list {

.item {

...

}

}

}

That is, the following two are generated after compilation. Which one should I use?

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

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

Based on the parsing rules of the CSS selector (from right to left), it is recommended to use the second. G-content. G-content-list. Item {} above. Avoiding the use of universal tag signatures as part of the selector can improve CSS matching performance.

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

At this point, the study of "the method of CSS style writing specification" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.