css - sass bem element modifier inheriting said elements properties -


i know sass provides @extend method allows me this:

%knob {   width: 10px;   height: 10px; }  .house {   &__door {     &__knob {       color: inherit;       @extend %knob;        &--red {         @extend %knob;         // $1         color: red;       }        &--blue{         @extend %knob;         // $1         color: blue;       }     }   } } 

however prefer not define abstract class %knob @ all, possible reference/include properties defined in __knob (width , height in case) within modifiers --red , --blue?

im including sassmeister snippet here out bit: http://sassmeister.com/gist/58b5b4673a18ecadbba7

example here might not issue if element long class name has 2 or more different groups of modifiers, , wont create abstract class, end html tags looking <p class="some other classes some-house__some-door__some-knob some-house__some-door__some-knob--red">example</p> find not desirable.

what achieve:

referencing parent element alow me reduce string <p class="some other classes some-house__some-door__some-knob--red"></p> without necessity of declaring abstract %knob class

why hesitant using abstract class here:

declaring abstract class inside __door element (http://sassmeister.com/gist/bc49e0885342e96a8fbd) gives me result:

.house__door .house__door__knob, .house__door .house__door__knob--red, .house__door .house__door__knob--blue {   width: 10px;   height: 10px; } 

instead of desired

.house__door__knob, .house__door__knob--red, .house__door__knob--blue {   width: 10px;   height: 10px; } 

and declaring abstract class outside of scope going used in makes code less readable

or maybe theres different apporach use in order make code more readable/maintainable?

while searching answer question came conclusion inheriting parent element properties/ using @extend or @include here might not best idea work if element had 1 modification @ most:

in other cases if multiple modifications extended same model, , used same html element, of base properties declared multiple times

also there no need @ nest elements (i.e. foo__bar__baz). separating elements makes code easier maintain.


Comments

Popular posts from this blog

javascript - Chart.js (Radar Chart) different scaleLineColor for each scaleLine -

apache - Error with PHP mail(): Multiple or malformed newlines found in additional_header -

java - Android – MapFragment overlay button shadow, just like MyLocation button -