Different types of class names in html

Question

What is the diff bw

• class="name"
• class="name-new"
• class="name new" What is the difference bw the three and is there any other naming convention too?

Answer 1

The difference is that in case:

1. class="name" : to the element will be applied only the properties of class "name"
2. class="name-new" : like point one, but in this case the class is "name-new"
3. class="name new" : 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 class="name-new" is not equal to use class="name_new" .

Answer 2

1. class="name"
2. class="name-new"
3. class="name new"

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 class="name"> Name </div> //  will appear in red
<div class="name-new"> New-Name </div> // will appear in blue
<div class="name new"> New Name </div> // will appear in bold-green 

BEM naming convention is explained here