CSS naming conventions Save debug Time Solutions

This article mainly and everyone to share the CSS naming specification can save Debug time related knowledge, interested friends to see together, hope to help everyone. Debug CSS is a time-consuming operation and can save a lot of debug time if you have a good naming convention.

Comment: Debug CSS is a very time-consuming operation, if you have a good naming specification can save a lot of Debug time.

Use hyphens ('-') to separate strings

You may be used to naming a small hump in Javascript:

var RedBox = document.getElementById (' ... ')

However, it is not recommended to use this naming method in CSS:

. redBox {   border:1px pure red;}

Instead, you should use this:

. red-box {    border:1px pure red;}

This is a standard CSS naming convention that has better readability.

In addition, he has the same name as the CSS property.

Correct. Some-class {    font-weight:10em}//was wrong. Some-class {    Fontweight:10em}

BEM Naming conventions

The team has different ways to write CSS selectors. Some teams use hyphenation separators, while others tend to use more structured naming conventions called BEM.

In general, there are three issues for CSS naming conventions to solve:

1. The function of the selector can be clearly understood by name.

2. To see where the selector can be used.

3. Can see the relationship between class.

Have you ever seen a class name that reads like this:

. nav--secondary {...  }. Nav__header {  ...}

This is the BEM naming convention.

B Representative Block

BEM attempts to divide the entire user interface into reusable blocks (block, note that the block here does not refer to Inline-block), and a header is a block,header nested element (logo, input, menu) can also be Block.

For an example, the following image:

This is a stickman (we can think of it as a Block), according to the previous argument, the name of this component can be set to Stick-man.

The style of the primary key should resemble the following:

. Stick-man {   }

E represents the Element

There are usually multiple elements in a Block, for example: The Stickman has a head, two arms and a feets.

Head, feet, and arms are all elements in the component. Use the BEM naming convention, which is named by a double underline connection block (block) and an element (Elements).

. stick-man__head {}.stick-man__arms {}.stick-man__feet {}

M represents modifier

BEM M is a modifier that can be decorated with blocks or elements (an adjustment of appearance or behavior), we can adjust our matches into Blue Stickman and red stickman (in fact we may need a blue button and a red button).

Using the BEM naming convention we use double connectors to name ('--')

For example:

. stick-man--blue {}.stick-man--red {}

Modifiers can also be used with elements (element), for example, we just want to adjust the size of the Stickman's head. We can name this.

. stick-man__head--small {}.stick-man__head--big {}

The above is the naming of BEM, this naming method although a bit verbose but in the complex project can be very good to clarify the relationship between the parts, if only a simple project directly using the delimiter name on the line.

What CSS class names to use in JavaScript should be named

When you see this article start to refactor your project.

You will have the original code:

<p class= "SiteNavigation" ></p>

Changed to:

<p class= "Site-navigation" ></p>

It looks great, but you forget that you used the class name Somewhere (JavaScript):

The javasript codeconst nav = Document.queryselector ('. SiteNavigation ')

Nav will get null at this time.

To prevent this, we can use the following naming to remind us.

Use ' js-* ' to name

We can use js-to name our class:

<p class= "Site-navigation js-site-navigation" ></p>

In JavaScript code we use Js-site-navigation to get the DOM:

The javasript codeconst nav = Document.queryselector ('. Js-site-navigation ')

Now, as soon as we see js-site-navigation, we'll think of using that class name in some JavaScript code to get DOM objects.