BEM CSS: Similar Blocks and Splitting Styles
Reading about BEM CSS and coding some small sites - I'm pretty familiar with it. However, I'm still not sure how to deal with blocks that are very similar but have nothing to do with it.
Let's say I have many unordered list boxes that have the same style for the top row. Other elements of the list can be decomposed in different ways and are completely unrelated to each other.
I find myself referring to a block for what it is (eg, "breaking news", "upcoming events") and then getting cumbersome to stack all of those blocks in CSS - not to mention difficult to manage.
Please rate that this material is not suitable for any solution; but imagine that many people are faced with the same questions. Wouldn't it be more efficient to call these blocks, "standard list", and then have the list items as blocks?
It just seems against the whole principle of what BEM is trying to achieve. I need to be able to deliver "breaking news" anywhere. So I would need to get the correct "standard list" that contained the latest news content?
Hope this isn't too confusing! Any advice would be great!
source to share
There's one important thing that often slips out of sight - the use of mixtures.
A mix is the ability to put several different blocks in the same DOM node.
So for your example, you can create
<ul class="latest-news list">
which will give you the general style you need for lists and add features for the latest news only.
source to share