Hi.
I have a quite complicated and very specific situation. I found a "fix" but I don't like it. So I will explain it step by step to the "fix" I found. I hope you will be able to purpose to me something better :)
I have the following CSS and HTML:
.my-block.myblock--modifier .myblock__element { ... }
my-block my-block--modifier
my-block__element /* affected */
my-block
my-block__element /* affected but unexpected */
With the --modifier
which should affect __element
. The problem is that the sub-block element is affected too by the --modifier
.
Two solutions:
1. Direct nesting block
and element
Beurk, dirty
.my-block.myblock--modifier > .myblock__element { ... }
2. Add modifier class on element
.myblock--modifier { ... }
.myblock--modifier__element { ... }
my-block my-block--modifier
my-block__element my-block--modifier__element
my-block
my-block__element /* not affected */
But.
2.1. Can we consider than a block encapsulates its elements ? If yes, we shouldn't care that the block --modifier
is affecting __element
. A solution can be to always apply modifier on elements too, regardless if its modifier is affecting it or not. It's hard to write but maybe it can be automated on JS frameworks.
2.2. I'm working on a semantic SCSS, with something like this:
@mixin my-block--modifier {
/* will generate .header__my-block .my-block__element */
.my-block__element { ... }
}
...
.header {
/* this header element is called as the block because we assume it is this block */
&__my-block {
/* modifier applied with @include so it can be applied for a particular breakpoint */
@include my-block--modifier;
Β }
}
header
header__my-block my-block
my-block__element
my-block
my-block__element /* affected */
To resolve this situation as I done at 2, I can do :
@mixin my-block--modifier {
/* will generate .header__my-block__element */
&__element { ... }
}
...
header
header__my-block my-block
header__my-block__element my-block__element
my-block
my-block__element /* not affected */
But it create a lot of long classes to apply, with the same 2.1 problem. *header__my-block__...
will have to be applied on each element.
Can you advise me better practices ? I tried to numerate my questions and problems so you can give step-by-step responses :)
I'm working on https://github.com/ncoden/caliopen.web-client-ng/tree/refactor/foundation . Take a look if you want to see what give a semantic SCSS on a medium-big project