Answer the question
In order to leave comments, you need to log in
What is the benefit of using CSS preprocessors to include the name of its parent in a nested style name?
Will explain. For example, we have footer. And we need to describe his styles. There are conditionally two options that I have encountered when using Sass / Less preprocessors by authors:
1. Without including parent names in child names:
.footer_bottom
display: flex
.autor
text-align: left
.policy
text-align: right
.company
text-align: right
.footer_bottom {
display: flex;
}
.footer_bottom .autor {
text-align: left;
}
.footer_bottom .policy {
text-align: right;
}
.footer_bottom .company {
text-align: right;
}
.footer_bottom
display: flex
&--autor
text-align: left
&--policy
text-align: right
&--company
text-align: right
.footer_bottom {
display: flex;
}
.footer_bottom--autor {
text-align: left;
}
.footer_bottom--policy {
text-align: right;
}
.footer_bottom--company {
text-align: right;
}
Answer the question
In order to leave comments, you need to log in
Read about BEM. Moreover, it is desirable not just a brief explanation of the methodology, but with historical calculations, where and why it came from. It is also very useful to listen to Vitaly Kharisov's old lectures on this topic.
PS For my taste, the above example with a bunch of imports is overcomplicated. It makes no sense to pull out each element of the block into a separate file. Why a separate file with a dozen lines of code? And if there are a lot of them, then most likely the block should be divided into subblocks.
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question