CSS specificity order

When you load css bundle asyncronously this can happen:
>> FYI- bundling assets is a separate issue from CSS core features
1) it load:
.class-3 { color: green; }
<div class="class-3">

2) it load
.class-1 { color: red; }
.class-2 { color: blue; }

<div class="class-1 class-2"> this works correctly

3) you load a new component but the style are not what you expect
<div class="class-2 class-3"> class 3 is overwritten by class-2 
>> As I would expect - order & specificity are core to CSS intentionally. This comes to designer considerations for the CSS developer but can be predicted 

One design solution is to utilize a BEM pattern with single selectors in your css.
### BEM Proposal

```scss
  .my_color {
    
    &--green {
      color: green;
    }
    
    &--red {
      color: red;
    }
    &--blue {
      color: blue;
    }
    
  }
```
```html
  <div class="my_color--blue"></div>
```
The above example yields this CSS...
```css
  .my_color--green {
    color: green;
  }
  .my_color--red {
    color: red;
  }
  .my_color--blue {
    color: blue;
  }
```

Even in web app where there is a single css file, dev prefer use mixin to share patterns.
>> Preference should not be assumed here. Additionally, not every web app should have a single file. HTTP 1 optimization has led us to this paradigm of bundling & minifying css (and js) and it will change with the adoption of HTTP2 to favor modular files

Composing classes in html cons:
- depend of code order and specificity
  >> core to CSS design and will not be changed. This is something that developers need to understand & embrace
- dev can introduce unintendent inheritance
  >> patterns like BEM & single classname selector approaches. This is not an issue in CSS though.  
- mutation is in multiple places with no source of truth, combination generated are not clear
  >> What does this mean specifically?
- refactoring is diffuclt if the piece of html is across the entire website
  >> core to CSS design which is the Cascade. This is something that, like order & specificity, should be account for in application development with CSS

Using sass mixin pros:
- css abstraction is in css
- css dependencies is in css
  >> not sure what is meant here
- one source of truth
  >> not necessarily true without sourcemapping. I think this is not neceessarily a pro or a con though
- Developer tooling (built in linting, mixin functionality, maps, loops, frameworks & libraries)
cons:
- duplicate a lot of line of code
>> only if you design your SCSS in that way. A BEM approach, for instance can utilize SCSS nesting without this issue.
- precompile step
- build dependencies requirements and complexity (webpack, gulp, node, ruby, etc)
>> not always but increases complexity & learning curve in many cases

Solution written is sass work for single css file you cannot do it with async css loading
>> Precompiling renders to a static css file usually in a build step but definitely before the HTML page is sent. I am not sure what you mean by async CSS.
>> For arguments sake, assume these mixins...

```scss  
  @mixin pattern-1(){
    color: green;
  }
  
  @mixin pattern-2(){
     color: red;
  }
  
  @mixin pattern-3(){
     color: blue;
  }
```

### Example 1: 

```scss
.class-3 { @include pattern-3(); }`
```
```html
<div class="class-3">`
```

The above code yields the following code for `.class-3`...
```css
  .class-3 {
     color: blue;
   }
```

### Example 2
```scss
  .class-2 { 
    @include pattern-1();
    color: red; 
  }
```
```html
<div class="class-2">
```

The above code yields the following code (as expected where the second color rule overrides the first)...
```css
  .class-2 {
     color: green;
     color: red;
   }
```

### Example 3

```scss
.class-4 { 
  @include pattern-2();
  @include pattern-3();
}
```
```html
<div class="class-4">
```

The above code yields the following code (as expected where the second color rule overrides the first)...
```css
  .class-4 {
     color: red;
     color: blue;
   }
```

>> The mixins work as expected as far as I can see.

>> For performance & reuse optimization in SCSS use @extend with placeholders over included mixins to deduplicate css and create compund selectors (for cases without parameters in mixins)...
Example:

```scss
  %my_color {
    color: rgba(255,255,255,0);
  }
  
  .test {
    @extend %my_color;
  }
  
  .test2 {
    @extend %my_color;
  }
  
```

precompilezs to...

```css
  
  .test, 
  .test2 {
    color: rgba(255,255,255,0);
  }
```

The above code outputs to...