I need a little advice on nesting HTML elements. I have a general structure where X contains a New section (where I'll add form elements for creating an X) and a List section that displays whatever Xs already exist:
<div id="X">
<div id="New">
...
</div>
<div id="List">
...
</div>
</div>
now it turns out I need to have two on the page:
<div id="X">
...
</div>
<div id="Y">
...
</div>
so whilst I can differentiate the 2 News like this:
#X #New {} /* in CSS */
$('#Y #New') /* in jQuery */
I'm left with the queasy feeling that #New should be unique in the document... so one alternative might be:
<div id="X">
<div id="XNew">
...
</div>
<div id="XList">
...
</div>
</div>
but then the notion of using X for nesting (as a namespace) seems moot since I've flattened the names... or perhaps another:
<div id="X">
<div class="New">
...
</div>
<div class="List">
...
</div>
</div>
but here I'm using a class where I really mean to designate a single element. How do you all do this sort of thing?
IDs should always be unique. That's why they're called identifiers. Using a class is the correct solution in this case. Then you can easily reference the elements via #X .New and #x .List for example. This also makes it easier to apply common styles and behaviour to all List and New divs.
Related
** writing multiple block on same element is right approach in BEM ? *
<div class="block-1 block-2 block-1_modifier block-2_modifier">
<div class="block-1__element1">
<div class="block-1__element3 block-2__element2">
</div>
</div>
<div class="block-1__element2">
<div class="block-1__element4">
</div>
</div>
</div>
Yes, this is partially correct, although your naming convention above should be more like:
block-1 SHOULD NOT HAVE block-2
Your single nest level for block-1__element3 is good.
Don't do block-1__element2__element3
because that creates messy nesting.
Only nest one level deep - like the example you indicated.
This is a tidier approach to BEM which was overlooked by those who used it.
See corrections:
<div class="block-1 block-1--modifier-1 block-1--modifier-2">
<div class="block-1__element1">
</div>
<div class="block-1__element2">
<div class="block-1__element3"> </div>
</div>
</div>
</div>
I have a question regarding BEM (Block Element Modifier) class naming conventions.
What if I need to have 3 nested divs, how should I name the class of the 3rd one?
.one{} //block
.one__two{} //block element
//?
<div class="one">
<div class="one__two">
<!-- How should I rename class "three"? -->
<div class="three"></div>
</div>
</div>
I want to rename ".three" to "one__two__three", or "two__three", but I'm not sure that this is right, because as I understand, according to BEM nesting elements inside of elements is not allowed.
To me, it's about relationships, particularly key-value relationships, so I would approach it that way.
Without exploring contextual naming paradigms, it could be suggested to use one__three.
Alternatively, if one is simply a container for two, then one could be renamed two__container and three renamed to two__item. Of course that doesn't make a whole lot of sense using numbered labels like this, but I hope you can see where it could lead.
Nesting elements is fine; build the structure to your needs. The important thing is to not couple the classnames to your nesting. The classname schema does really only recognize two types of DOM elements: the block itself and the elements of that block; of the latter all are equal regarding the naming schema, no matter how deeply nested in the block.
Here is an example:
<div class="product-card">
<div class="product-card__img-area">
<img class="product-card__product-picture" src="https://example.com/cabulator.jpg"/>
</div>
<div class="product-card__header">
<span class="product-card__main-headline">Encabulator</span>
<span class="product-card__sub-headline">The turbo shmeerf of all Shmoof</span>
</div>
<div class="product-card__text-body">
Lorem ipsum shmeerf of Shmoof quooz bar moof bla bla
</div>
<div class="product-card__footer">
<a class="product-card__cta" href="https://example.com/buy.html">Buy it!</a>
</div>
</div>
And modifiers are added as needed:
<div class="product-card__footer">
<a class="product-card__cta product-card__cta--bargain" href="http://exmpl.com/buy">
Buy it! 50% off for first-time customers!!!!!! OMG!!!!
</a>
</div>
I am structuring the CSS in my web application according to the BEM convention.
I have a block called item and 3 elements: item__section, item__title and item__description.
I am using these BEM classes as follows:
<div class="item">
<div class="item__section item__title"> ... </div>
<div class="item__section item__description"> ... </div>
</div>
The item__section element class contains style that we reuse between elements.
Is this valid BEM or should I create a modifier for item__section for each kind of section(title and description)?
That's absolutely valid and is called mix:
https://en.bem.info/methodology/key-concepts/#mix
https://en.bem.info/methodology/css/#mixes
I don't think you should.
You could add mixin like:
<div class="item">
<div class="item__section u-title"> ... </div>
<div class="item__section u-description"> ... </div>
</div>
but don't use two elements of the same block in the same tag because you can end up with specificity problems
I would like to know if, according to BEM methodology, I can have the following structure:
.block1
.block1__element1
.block2
.block1__element2 <-- ??
Am I allowed to use an element from a parent block, inside a children block?
Thanks.
UPDATE:
This is the actual DOM structure:
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
// <-- ???
</div>
</div>
</div>
According to best practices of BEM methodology: am I allowed to move the element with head__user inside the menu block? Or all elements inside the menu block need to start with the menu__ prefix?
I hope this clears out the problem.
I been using BEM for sometime and from what I got it's not recommended nor intended to be used like that. You can nest different BEM elements to each other like menu-blockintohead-block, but menu-block items should not go outside its parent menu-block, like you should not put menu-block__item at the top of head-block. Does it makes sense? :)
To illustrate there are two ways to go. What should be noted here is that depending on the scale of your project and how you build things (component based?). If you don't have a large project and are not doing or reusing the menu else where you can do it both ways. Lets say your menu is huge amount of html/css I would do it like #1
This is not correct
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="head__something"></div>
</div>
</div>
</div>
Recommended solution
Based on this part of the documentation. Now you can chop your own header design into blocks, does this below match?
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="menu__something"><img src="" class="menu__image" /></div>
</div>
</div>
</div>
I think this variant is allowed:
<div class="head">
<div class="head__nav">
<div class="menu">
<div class="head__user"></div>
</div>
</div>
</div>
I haven't found the current part in the official BEM documentation, but I've found this part:
The block name defines the namespace, which guarantees that the elements are dependent on the block (block__elem).
A block can have a nested structure of elements in the DOM tree:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2">
<div class="block__elem3"></div>
</div>
</div>
</div>
However, this block structure is always represented as a flat list of elements in the BEM methodology:
Example
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
This allows you to change a block's DOM structure without making changes in the code for each separate element:
Example
<div class="block">
<div class="block__elem1">
<div class="block__elem2"></div>
</div>
<div class="block__elem3"></div>
</div>
The block's structure changes, but the rules for the elements and their names remain the same.
I understand it as there is only one rule about HTML structure for elements in BEM: an element has to be inside its block (it doesn't matter how deep).
One possible problem that I can imagine for this case is using some of BEM tree formats. But if you don't need it, I think there's no problem.
I would consider making the potential head__something into simply something, and then to provide multiple modifications of it. e.g. something--head and something--menu.
<div class="head">
<div class="head__user"></div>
<div class="head__nav">
<div class="menu">
<div class="something--menu" />
</div>
</div>
<div class="something--head" />
</div>
Also, refactoring further, I would consider getting rid of head__nav as it probably does not add any richer semantics than menu.
<div class="head">
<div class="head__user"></div>
<div class="menu">
<div class="something--menu" />
</div>
<div class="something--head">for those cases where you want <code>something</code> directly descending from <code>head</code></div>
</div>
Using BEM CSS class syntax, lets say I have an element with the following class:
...
<div class="purchase__module2__heading__tooltip">...</div>
...
Now lets say there is an event or something where this "tooltip" becomes active or visible. What is the proper way to express this with BEM? Do I replace the current class so now it becomes:
...
<div class="purchase__module2__heading__tooltip--active">...</div>
...
or do I add it
...
<div class="purchase__module2__heading__tooltip purchase__module2__heading__tooltip--active">...</div>
...
Or can I just do something simple like this:
...
<div class="purchase__module2__heading__tooltip active">...</div>
...
I think the answer is #2, but it seems very drawn out. #3 is nice and simple but I can't tell if this follows proper BEM guidelines or not.
If you're modifying a block or element you must include the base class as well.
For example
<div class="block">
<div class="block__element">...</div>
</div>
could have the block modified as:
<div class="block block--modifier">
<div class="block__element block--modifier__element">...</div>
</div>
or the element modified as:
<div class="block">
<div class="block__element block__element--modifier">...</div>
</div>
In either case you start needing to use multiple classes.
Looking over your example of:
<div class="purchase__module2__heading__tooltip">
It's clear that you're nesting too deeply, preventing yourself from being able to reuse the majority of your code.
Given the names you're using, I'd guess that what you actually have is:
a purchase module (.purchase-module)
with a heading (.purchase-module__heading)
a tooltip (.tooltip)
The markup could look something like:
<article class="purchase-module">
<h1 class="purchase-module__heading">
...heading text...
<span class="tooltip">...</span>
</h1>
</article>
Note how making the tooltip active now just requires changing a short class:
<span class="tooltip tooltip--active">...</span>
That's the ideal with BEM.
You are right and the answer is #2.
Here's why:
https://en.bem.info/methodology/faq/#why-include-the-block-name-in-names-of-modifier-and-element
https://en.bem.info/methodology/faq/#how-do-i-make-global-modifiers-for-blocks
BTW, you shouldn't keep DOM structure in naming. And here's why: https://en.bem.info/methodology/faq/#why-does-bem-not-recommend-using-elements-within-elements-block__elem1__elem2