Different types of class names in html

user17257777 0
Viewed 24

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?
naming-conventions classname html5-canvas visual-studio html
2 Answers

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".

Lorenzo Acciarri0
  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

kumling0
Related