I'm not sure if SO is the right place to ask such question. Let me know if it is not so.
I'm learning the BEM CSS methodology recently and I like how it solves many of the CSS problems like specificity issues. It makes our CSS more maintainable.
As I'm new to it, I'm having a hard time creating correct HTML layout with proper BEM class. I've created a module using BEM and would like experts on opinion on what could be the correct layout according to the best practices of BEM.
Here is the screenshot of what I'm trying to using BEM CSS methodology.
Here is HTML layout that I've come up with so far, please let meknow what would be right way to achieve the same.
<section class="content">
<div class="step-nav">
<div class="step-item">
<div class="step-item__left">
<div class="step-item__progress">
<div>
<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<span>Step 1</span>
</div>
<div>100%</div>
</div>
<h2 class="step-item__title">General Information</h2>
</div>
<div class="step-item__right">
<i class="fa fa-angle-right" aria-hidden="true">
<span class="screen-reader-text">Next</span>
</i>
</div>
</div>
<div class="step-item"></div>
<div class="step-item"></div>
</div>
</section>
Looks about correct, but you should have just a step-nav block, and all the subsequent child components are simply elements, i.e.:
step-item should really be step-nav__item, since item is an element of step-nav
step-item__left should really be step-nav__item--left since left is a modifier. With that in mind, you should combine them so that you will be using <div class="step-nav__item step-nav__item--left"> in the same nesting level, removing that extra unnecessary level of <div> nesting
Of course, if you think step-nav is too long of a word, you can use step instead.
Related
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'm currently building an application for a Pomodoro Timer, I'm using Bulma as a CSS Framework, and so far I'm loving it, I'm still learning how Flexbox works, I would like to know what would be the best approach to this situation and if it can be done using only Bulma classes or if I would have to create my own.
I'm trying to create "cards" for each task added, but I want them to be just about half or less that the full screen width. I don't understand how to make this happen using Bulma, since everything just takes the full width and I can't just center everything since it doesn't have a hard-coded width. This is my code for the section that contains the task cards.
<div class="section">
<div class="task-container is-center">
<div class="card is-clearfix is-1-touch" style="margin-bottom: 10px" v-for="task in tasks" :key="task.id">
<input type="checkbox" class="checkbox">
<span class="has-text-left">
{{task.desc}}
</span>
<span class="icon is-pulled-right has-text-danger"><i class="far fa-times-circle"></i></span>
<span class="icon is-pulled-right has-text-primary"><i class="far fa-play-circle"></i></span>
</div>
</div>
</div>
Any help, tips, suggestions, etc. Would be greatly appreciated!.
You could use columns classes to achieve what you want
<div class="task-container columns is-multiline">
<div class="card column is-half is-offset-one-quarter">
// statements
</div>
</div>
Here is the link to the official documentation: https://bulma.io/documentation/columns/options/#centering-columns
You could wrap the card div with a columns container and use the is-half class if you don't want to use the offset class.
I have a doubts about this HTML structure. Is it correct according to BEM approach?
<div class="boxWithBorder">
<div class="header">
<h2 class="boxWithBorder__element"></h2>
</div>
</div>
To my mind it should look like that
<div class="boxWithBorder">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
What keeps elements encapsulated.
Generally we do components and structures, that means structures are compositions of components. It will require nesting so that part is ok. As far as your first approach that is not ok by our standards and not used. block1 should not live inside block2 but block2 has to live inside block1 as it's a nested component. Makes sense? BTW BEM is perfectly fine to use and a lot of frontend devs do it, heavyweights as well, check out csswizardry.com for instance, he got some great articles about BEM
Also I would suggest the following using BEM (or any html/css for that matter) is that skip the camleCase and use "-" instead
<div class="box-with-border">
<div class="header">
<h2 class="header__element"></h2>
</div>
</div>
<div class="hero hero--red-with-border">
<h1 class="hero__title>Title...</h1>
<p class="hero__body-text">Text...</p>
</div>
Wonder if that is correct the BEM way. Let's say I have a component/block "box".
<div class="box">
<div class="box__title">Box Title</div>
</div>
This box can be used everywhere. But then for example this box can also be used in a list ex.
<ul>
<li>
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
It is correct to call the DOM-Classes like that?
<ul class="box__list">
<li class="box__item">
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
So "box__list" and "box__item" is somehow outside of the block "box".
"box__item" then have some specific stuff.
.box__item {
margin-bottom: 20px;
}
It is "allowed" to do it this way or do I need here completly something different like "box-wrapper__list" and "box-wrapper__item".
Thanks for commenting. :)
Since the elements are outside of the .box then no, it does not make sense to give them these classes.
You have to think what your base components/blocks (think 'building blocks') are.
A component/block is something you can (ideally) place anywhere inside your layout and still have it look/behave the same way, regardles of parent or adjacent elements. The BEM naming convention tries to enforce CSS "modularity" in this sense.
To me it looks like you definitely have a .box component. If you think the list should be another component/block, then name it something else, as you would name a block and not an element.
References:
BEM key concepts
BEM naming conventions
so this makes now more sense - thanks!
<ul class="box-wrapper">
<li class="box-wrapper__item>
<div class="box">
<div class="box__title">Box Title</div>
</div>
</li>
</ul>
I completely understand the thought process behind your question and it is something I have attempted to resolve.
The solution I came up with is stopping using the __wrap naming convention and changing to __inner or content. Essentially a word that best describes the inside, rather than outside as wrap did.
From there we can create an example like so.
This does mean that you will have to change the way you apply classes slightly, but i did find that it helps encapsulate the entire block, rather than having to deal with the ambiguity haing box__wrap on the outside creates.
<div class='box'>
<div class='box__inner'>
<div class='box__head'>head</div>
<div class='box__main'>main</div>
<div class='box__foot'>foot</div>
</div>
</div>
Hopefully my answer helps you in some way,
Yes, #b_ element can be placed outside his block in DOM. Also different blocks & elements can intersections in DOM-tree: https://en.bem.info/forum/43/ (proof from authors of BEM-methodology).
But in your current case you shouldn't use that for positioning, your version with wrappers is correct.
I just started out using BEM and SMACCS for my stylesheets but have run into some trouble as far as naming deeply nested elements in the DOM. Say for instance I have a div called .main-container. Nested inside the first level of the main-container is an additional div which by convention would be named .main-container__article.
<div class="main-container>
<div class="main-container__article></div>
</div>
This is where things get confusing. Inside that article div let's say I have a header followed by a paragraph that has a nested span tags. Do I continue prepending classes with main-container__article as so?
<div class="main-container>
<div class="main-container__article>
<h1 class="main-container__article__header">Heading</h1>
<p class="main-container__article__copy">
<span class="main-container__article__copy__intro-text>Example text.</span>
</p>
</div>
</div>
How far down does the rabbit hole go when it comes to naming parent/child elements? Is there a point where you reset at the second-level element and go from there?
<div class="main-container>
<div class="article>
<h1 class="article__header">Heading</h1>
<p class="article__text">
<span class="article__text__intro-text>This is example text.</span> for a paragraph
</p>
</div>
</div>
BEM naming shouldn't resemble DOM structure because otherwise you won't be able to change markup without changes in CSS.
So for your example I'd make it like this:
<div class="main-container">
<div class="article">
<h1 class="article__header">Heading</h1>
<p class="article__copy">
<span class="article__intro-text">Example text.</span>
</p>
</div>
</div>
There's also a quite powerful thing called mixes, which gives possibility to mix different BEM entities on the same DOM node:
Heading
Example text.
So now you may apply CSS to article block and main-container__article element separately which is very useful when you need to reuse article outside main-container.
.main-container__article__copy__intro-text
definitely doesn't help the readability and maintainability of your stylesheets.
I suggest to break such giant blocks into several smaller blocks. If you do this, you can reuse your styles - in your example you couldn't use the article-block somewhere else.
I would "reset" everytime you can encapsulate a block which can potentially be used in several places in your app/website.