JSFiddle - React, Tailwind, and code Playground

by Darren Galway

HTML

<a href="" class="foo" id="bar">LINK</a>

SCSS

// ALL PROPERTY IS GREAT FOR REMOVING INHERITANCE WHEN REFACTOR LEGACY CSS

// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for
//all: inherit;


// .rf- IS A REFACTORED PREFIX WERE ADDING TO OUR CODE BASE THIS SIGNALS WORK COMPLETION

// FIND ANY ELEMENTS THAT HAVENT BEEN REFACTORED

/*
[class]:not([class*=".rf-"]) {
  outline: 5px solid red;
}
*/


// FIND ANY ELEMENTS THAT HAVE BEEN REFACTORED

/*
[class*=".rf-"] {
  outline: 5px solid red;
}
*/


/*
  SHOWING SPECIFICITY DEFAULTS
*/


/*
#bar {
  color: blue;
}

.foo {
  color: green;
}

a {
  color: red;
}
*/


/*
  HACKING SPECIFICITY
*/


// ELEMENT & CLASS EQUIVALENT
/*
html [id="bar"] {
  color: blue;
}

// ELEMENT & CLASS
.foo.foo {
  color: green;
}

// CLASS EQUIVALENT & ELEMENT
:root a {
  color: red;
}
*/

/*
  FURTHER HACKING SPECIFICITY
*/

// SAME SPECIFICITY AS ONE CLASS
/*
[id="bar"] {
  color: blue;
}

// SAME SPECIFICITY AS TWO CLASSES
.foo.foo {
  color: green;
}

// SAME SPECIFICITY AS A CLASS & AN ELEMENT
:root a {
  color: red;
}
*/