Sometime ago I got interested in BEM methodology and tried to use it in my projects. I probably used some modified version of it, so my css looks like this:
.block for blocks
.block__element for elements
.block--modifier and .block__element--modifier for block and element modifiers.
I do not use elements within elements, so I have .block__element-two instead of .block__element-one__element-two.
It all seems pretty convenient, but I still don't get some key principles of it. For example, what should be considered as "independent entity"?
Let's say we have three different blocks with headers, with the headers keeping the same set of rules. As we use these headers all around the page, and probably on some other pages, they seem to be independent. So we can create a block for them and use it every time. And in this case we write the rules only once.
Demo for header as a block:
http://plnkr.co/edit/rCWCk3yGJJzAWpHqzpHa?p=preview
<div class="up-content">
<h4 class="header">upper</h4>
<div class="up-content__picture">picture</div>
<div class="up-content__picture">picture2</div>
<div class="up-content__picture">picture3</div>
</div>
<div class="mid-content">
<h4 class="header">middle</h4>
<div class="mid-content__text">Lorem ipsum dolor sit amet.</div>
<div class="mid-content__images">
<div class="mid-content__graphic">graphic one</div>
<div class="mid-content__graphic">graphic two</div>
</div>
</div>
<div class="bottom-content">
<h4 class="header">bottom</h4>
<div class="bottom-content__video">YOUTUBE VIDEO</div>
</div>
.header{
color:red;
margin-bottom:10px;
font-size:18px;
text-decoration:underline;
text-transform:uppercase;
}
But at the same time we see that all the headers are children of some parent blocks, so they depend on them. Then we can consider them as elements and therefore give them separate names. In this case we will have to duplicate the same css for three times.
Demo for headers as elements:
http://plnkr.co/edit/nxh0ObqXDSRKg3N4zAKc?p=preview
<div class="up-content">
<h4 class="up-content__header">upper</h4>
<div class="up-content__picture">picture</div>
<div class="up-content__picture">picture2</div>
<div class="up-content__picture">picture3</div>
</div>
<div class="mid-content">
<h4 class="mid-content__header">middle</h4>
<div class="mid-content__text">Lorem ipsum dolor sit amet.</div>
<div class="mid-content__images">
<div class="mid-content__graphic">graphic one</div>
<div class="mid-content__graphic">graphic two</div>
</div>
</div>
<div class="bottom-content">
<h4 class="bottom-content__header">bottom</h4>
<div class="bottom-content__video">YOUTUBE VIDEO</div>
</div>
.up-content__header{
color:red;
margin-bottom:10px;
font-size:18px;
text-decoration:underline;
text-transform:uppercase;
}
.mid-content__header{
color:red;
margin-bottom:10px;
font-size:18px;
text-decoration:underline;
text-transform:uppercase;
}
.bottom-content__header{
color:red;
margin-bottom:10px;
font-size:18px;
text-decoration:underline;
text-transform:uppercase;
}
So what approach should I choose? Is there any way to clearly identify things as independent blocks or dependent elements?
UPD Today I asked similar question on the BEM forum and learned about mixes.
https://en.bem.info/method/definitions/#mix
In BEM, mix is used when you need to blend two entities together. As I understand, it means that the same thing can be a block and an element simultaneously. So, in my case, we can combine an element with a block, an it will look like this:
http://plnkr.co/edit/2VoROHHULVATpyejJmRn?p=preview
<div class="up-content">
<h4 class="up-content__header header">upper</h4>
<div class="up-content__picture">picture</div>
<div class="up-content__picture">picture2</div>
<div class="up-content__picture">picture3</div>
</div>
<div class="mid-content">
<h4 class="mid-content__header header">middle</h4>
<div class="mid-content__text">Lorem ipsum dolor sit amet.</div>
<div class="mid-content__images">
<div class="mid-content__graphic">graphic one</div>
<div class="mid-content__graphic">graphic two</div>
</div>
</div>
<div class="bottom-content">
<h4 class="bottom-content__header header">bottom</h4>
<div class="bottom-content__video">YOUTUBE VIDEO</div>
</div>
.header{
color:red;
margin-bottom:10px;
font-size:18px;
text-decoration:underline;
text-transform:uppercase;
}
Formally all the headers remain elements, but all their css rules are set in the .header block. We mix the entities together.
It probably means that header element classes in html will remain useless, as we have the .header block for all the rules we need. I don't know, if it's a normal practice, but anyway, mixes make it all much easier.