So I am trying to understand the BEM naming structure. So lets say I have the following html
<div class="banner">
<div class="banner__toprow">
<span class="banner__teamName">
{{team.name}}
</span>
<span class="banner__score">
{{team.score}}
</span>
</div>
<div class="banner__timeouts">
{{team.timeOuts}}
</div>
</div>
Now where I get confused is when you have nested divs, how that works. For example for banner__teamName, I would usually do banner__toprow__teamName. Now maybe I can do this, but does this break BEM?
From the BEM's FAQ
What would be a class name for an element inside another element? .block__el1__el2?
According to BEM method, block structure should be flattened; you do
not need to reflect nested DOM structure of the block. So, the class
names for this case would be:
.block {}
.block__elem1 {}
.block__elem2 {}
.block__elem3 {}
Whereas the DOM representation of the block may be nested:
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'>
<div class='block__elem3'></div>
</div>
</div>
Besides the fact that the classes look much nicer, it makes the elements be dependent on the block only. So, you can easily move them across the block when providing changes to the interface. The changes of the block DOM structure would not need corresponding changes to the CSS code.
<div class='block'>
<div class='block__elem1'>
<div class='block__elem2'></div>
</div>
<div class='block__elem3'></div>
I would suggest doing it like this:
<div class="banner">
<div class="banner__toprow">
<span class="banner__toprow-teamname">
{{team.name}}
</span>
<span class="banner__score">
{{team.score}}
</span>
</div>
<div class="banner__timeouts">
{{team.timeOuts}}
</div>
</div>
I don't believe it is correct to have two Elements (__) of Modifiers (--). I also try not to use camel case in my classes, that might be a personal preference but I feel it could cause problems with certain frameworks like Angular.
Related
I'm trying to adopt BEM CSS and have a component but I want small and large versions of it at the block level.
I'm unsure of what should be the block or what should be the modifier. Because then I would need two blocks which defeats the purpose of making a component. Now my elements are now modifiers whereas they should just be elements from either small or large.
<div class="c-sales c-sales__small p3">
<p class="c-sales__small--headlead">Limited time only</p>
<h1 class="c-sales__small--heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__small--subheading pt2">Only in September</h2>
<p class="c-sales__small--details">this is some text</p>
</div>
c-sales is clearly the block. Your elements are:
c-sales__headlead
c-sales__heading
c-sales__subheading
c-sales__details.
Now, for the modifier you have two options. The first, most inline with BEM, would be to create modifiers to all elements that are actually different from the base version, so you could end up with:
c-sales
c-sales__headlead c-sales__headlead--small
c-sales__heading c-sales__heading--small
c-sales__subheading
c-sales__details
The other option is less verbose, but BEM recommends against it: you can use nested selectors. That would technically be a theme instead of a modifier, but it achieves what you want (modify stuff at block level). Have a look at this: https://en.bem.info/methodology/css/#nested-selectors
c-sales c-sales-theme-small
c-sales__headlead
c-sales__heading
c-sales__subheading
c-sales__details
The best approach is to make a base version of the element first, and then add small or large modifiers to it:
<!-- Base version -->
<div class="c-sales p3">
<p class="c-sales__headlead">Limited time only</p>
<h1 class="c-sales__heading">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__subheading pt2">Only in September</h2>
<p class="c-sales__details">this is some text</p>
</div>
<!-- Small version -->
<div class="c-sales c-sales--small p3">
<p class="c-sales__headlead c-sales__headlead--small">Limited time only</p>
<h1 class="c-sales__heading c-sales__heading--small">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__subheading c-sales__subheading--small pt2">Only in September</h2>
<p class="c-sales__details c-sales__details--small">this is some text</p>
</div>
<!-- Large version -->
<div class="c-sales c-sales--large p3">
<p class="c-sales__headlead c-sales__headlead--large">Limited time only</p>
<h1 class="c-sales__heading c-sales__heading--large">FIRST 2 MONTHS <span style="color:#00ce7d;">FREE!</span></h1>
<h2 class="c-sales__subheading c-sales__subheading--large pt2">Only in September</h2>
<p class="c-sales__details c-sales__details--large">this is some text</p>
</div>
Recently I have started using BEM in my project to organize CSS but now I am up to the point where i have html like this:
<div class="container">
<div class="container__header">
<div>TITLE</div>
<div>SUBTITLE</div>
</div>
<div class="container__body">
</div>
</div>
As I am more familiar with SMACSS I treat container with header and body as layout related styles. But then content of header on each subpage will differ, sometimes it will have title/subtitle that need different styling sometimes it will be some completly different structure. In terms of SMACSS I would put it in module folder and manage there but now with BEM would be it good practice to now create element such as note-header that will have elements __title and __subtitle?
<div class="container">
<div class="container__header note-header">
<div class="note-header__title">TITLE</div>
<div class="note-header__subtitle">SUBTITLE</div>
</div>
<div class="container__body note-body">
...
</div>
</div>
The problem I have with this approach is that note-header will most of the time probably be empty class just for the sake of naming convention. What is best practice to handle such case
I personally use three types of elements, namely:
l- prefixed layout elements, such as containers, headers, footers.
b- prefixed block elements, such as a menu, a small header inside a layout, etc.
c- prefixed component elements, such as buttons, links etc.
This in conjunction with modifiers say: c-button--white and c-button--black works fine.
Consider the following structure for your example:
<div class="l-container">
<div class="b-note">
<div class="b-note__title">TITLE</div>
<div class="b-note__subtitle">SUBTITLE</div>
<div class="b-note__content">
<div class="c-button">
<button class="c-button__button">Submit</button>
</div>
</div>
<div class="b-slideshow">
<div class="b-slideshow__title"></div>
</div>
</div>
</div>
In my projects, it's vital to make sure general styling is separate. Therefore I try to minimise any blocks / classes being used throughout other elements. This avoids styling drama later on because you're using b-note-header__title somewhere else as well, that requires just a small adjustment, but changing the main rule messes up your other titles.
i want to fill text in selenium firefox broswer
how to find entering text selector its very complex for me please explain me the only way i want to achieve this using only css selector
<div class="Gb WK">
<div class="Rd"guidedhelpid="sharebox_editor">
<div class="eg">
<div class="yw oo"">
<div class="yw vk"">
</div>
<div class="URaP8 Kf Pf b-K b-K-Xb">
<div id="195" class="pq"
Share what's new...
</div>
<div id=":37.f" class="df b-K b-K-Xb URaP8 editable" contenteditable="true"
g_editable="true"role="textbox"aria-labelledby="195"></div>
</div>
</div>
</div>
</div>
You already wrote the cssSelector. However I will explain this for you. CssSelector allows you to use single/multiple attribute search. In case if you don't find a single attribute unique you can keep adding more attribute to the selector
Single attribute
[role='textbox']
Multiple attributes
[role='textbox'][contenteditable='true']
If you want to add div for a faster search that's possible too
div[role='textbox'][contenteditable='true']
Notice if I don't add div it's going to be tag independent search
I keep bumping into this issue where everyone keeps:
a) wanting to wrap HTML5 semantic tags with divs, and
b) wants to apply class selectors to the divs and not the semantic tags. It's as if people are afraid of slapping classes onto semantic tags for some reason.
For example, I am constantly told that this is "incorrect",
<body class="container">
<header class="row">
<div class="col-md-12"> ...
And something like this is more preferable,
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
And here, where the first example I have the column class in the h2 tag
<div class="row">
<h2 class="col-4 feature">Featured Work</h2>
</div>
But "the correct" way is to add yet another div tag to apply the class,
<div class="row">
<div class="col-4 feature">
<h2>Featured Work</h2>
</div>
</div>
I understand that this might be opinion-based, but I have found that when dealing with HTML5, opinions actually matter since virtually everyone is having issues and there is no other way to hammer out the details without opinions.
I recommend sticking to the
<body>
<div class="container">
<div class="row">
<div class="col-md-12"> ...
format.
If you intend to work with a lot other developers or with bootstrap templates- you will see that the container classes typically nest row class divs.
Since we are talking about markup there is no right answer, but following this convention is strongly recommended.
For consistency
For easy changes to styling & reusability with other projects- this even opens the door to drop-in replacements of css stylesheets from other projects or bootstrap templates. (I have had some surprisingly good results with this).
However, if you insist on giving non-div tags "container" and "col-X" tags, be consistent. I wouldn't recommend it though and would consider any template that follows its own convention to be an indicator of poor code quality.
I'm having a very hard time assigning intelligent class names to my DOM elements.
I feel like the example below is something my CSS commonly devolves into:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share"></div>
</div>
</div>
</div>
But then later I'll want to add a different style of "Share" button lower on the page. So I end up doing:
<div class="article">
<div class="title-container">
<div class="title>Something fantastic</div>
<div class="sub-title-controls">
<div class="btn-like"></div>
<div class="btn-google-plus-one"></div>
<div class="btn-share-tiny"></div>
</div>
</div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>
Then things spiral out of control from there.
I guess what I'm looking for is: Is there any kind of Chicago Manual of Style for CSS? Like when is a <div> really better described as a <section> or <footer>? How do you intelligently name non-visual DIVs that serve as containers?
My CSS is a nightmare after 2 years of coding without structure. Just about given up and gone all inline on this particular project. :) Tips appreciated.
SMACCS is style guide for CSS, and might be exactly what you're looking for. You can buy it, or alternatively much of the content is available free on the site.
Additionally, BEM is a framework developed by the guys at Yandex, which I found useful reading and is used (somewhat) by InuitCSS, which I personally am keen on.
You should find some answers here, in this article titled: What Makes For a Semantic Class Name?.
In a nutshell, when you can, use the new HTML5 tags:
<header></header>
<article></article>
<aside></aside>
<footer></footer>
for your example, it would be better to do something like this :
<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>
and only change the size in the bigBtn class.