CodePen

HTML

            
              <div class="sidebar right color">asdf</div>
            
          
!
via HTML Inspector

CSS

            
              // using the cascade we can write default behavior and override it with modifying classes.

.sidebar {
  width: 30%;
  
  // default behavior is floating left
  float: left;
}

// explicit modifiers change default behavior
.sidebar.right {
  float: right;
}

// You can add generic modifiers to the bottom of your style sheet.

.right {
  float: right;
}

.left {
  float: left;
}


// default modifiers can be placed at the end and will not override explicit instances because of how things are scored.

// Here is an example of scoring where we want colored sidebars to be blue.
.sidebar.color {
  background-color: blue;
}

// The default behavior of the color modifier is red, but .sidebar.color is a stronger selector even though this is later in the cascade.
.color {
  background-color: red;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................