What is the diff bw

• What is the difference bw the three and is there any other naming convention too?

CodePudding user response：

The difference is that in case:

1. : to the element will be applied only the properties of class "name"
2. : like point one, but in this case the class is "name-new"
3. : in this case, to element will be applied two different classe: "name" and "new"

The "space" is used to separete multiple classes, same principle is used for the "id".

Also.. the syntax is not equal to use .

CodePudding user response：

1 and 2 - works in the same way. They are just two different classes. The corresponding style will be applied in the HTML element where they are added.

3 - The class 'name' will be applied first, then the class 'new'. The same/common style properties will be overridden by right side classes.

.name {
 color:red;
}

.name-new {
 color:blue;
}

.new {
 font-weight: bold;
 color: green;
}

<div > Name </div> //  will appear in red
<div > New-Name </div> // will appear in blue
<div > New Name </div> // will appear in bold-green 

BEM naming convention is explained here