Rule of Thumb

Never override style of a CSS native tag, only expand by adding class names.

CSS Associativity Rule

The order in which the attributes on the same level are overwritten is determined by the order in the CSS definitions, not by the order of the classes attached to the HTML element.

Attribute overwrite is determined by order the class-styles are defined in the CSS file definition order, NOT in the order of HTML class attributes.

Makes sense since HTML elements can be in any order and repeated.

The styling which is defined at the end of the CSS class will be the one to be applied.

If two classes clash with same attributes, the latter definition wins.

Illustration

Let's say you have the following HTML:

<label class="basic extra"/>Geeks</label>
<label class="extra basic"/>Geeks For Geeks</label>

Defining CSS as order of:

.extra first, .basic after:

.extra { 
  color: #00529B; 
  font-size:50px;         
  background-color: pink; 
} 

.basic {
  color: #00529B; 
  font-size:30px;         
  background-color: #90ee90; /*light green*/ 
}

Then the HTML would render as:

<!-- both renders with `.basic` class attribute -->
<label class="basic extra"/>Light Green</label>
<label class="extra basic"/>Light Green</label>

Switching the CSS definition to:

.basic first, .extra after:

.basic {
  color: #00529B;
  font-size:30px;
  background-color: #90ee90; /*light green*/
}

.extra { 
  color: #00529B; 
  font-size:50px;         
  background-color: pink; 
}

Then the HTML would render as:

<label class="basic extra"/>Pink</label>
<label class="extra basic"/>Pink</label>

Style Order Hierarchy

Rule of Thumb

CSS Associativity Rule

Illustration