this is my first question, so please, do not judge strictly. The essence is in follows: I imagine block structure of document as a printing press - but very remotely, of course - because press already hase content and semantic, while div's structure of document - only skeleton for it, and both mentioned subjects must be added. An object of concern to me is where I should put this semantic in document skeleton, formed with twitter bootstrap and defining structure - for example:
<div class="container">
<div class="row">
<div class="col-xs-12">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
I see two different ways, but dont know, what way is better practice in marking down html documents:
1) Adding semantic class to element, which already have class that forming my document structure - col-xs-12 - or press in my analogy.
<div class="container">
<div class="row">
<div class="col-xs-12 article-preview">
'Content, which must be wrapped in some semantically meaningfull element like, for example - article-preview class'
</div>
</div>
</div>
2) Or adding brand new semanit block under structuring block and putting my content here:
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="article-preview">
Content, which must be wrapped in some semantically meaningfull element - like, for example - article-preview class
</div>
</div>
</div>
</div>
I apologize if the question seems a little stupid to you, but I thinking about it for really long time and from now on can not do anything until it is resolved.
Thank you!
I will prefer the second way. Because bootstrap cols have their own styles and structure, so if you have additional styles or codes try to do like second way.
I think we should keep the bootstrap structure.
Go with the first approach because I feel the second approach will make your code long unnecessarily.
With the first approach as well you can add your custom styles. just add your stylesheet after the bootstrap css.
Related
For example:
<div class="menu">
<div class="menu__item">
<div class="menu__item-title">
</div>
</div>
</div>
There's some solution like menu__title.
But if menu has its own title, then how to recognize menu's title and menu item's title?
The main difference is that block__element__element is not a valid BEM selector. The markup you showed in your question is the CORRECT way of naming your elements.
Create a block
If a section of code might be reused and it doesn't depend on other
page components being implemented.
Create an element
If a section of code can't be used separately without the parent
entity (the block).
The exception is elements that must be divided into smaller parts –
subelements – in order to simplify development. In the BEM
methodology, you can't create elements of elements. In a case like
this, instead of creating an element, you need to create a service
block.
More info in the official documentation: https://en.bem.info/methodology/quick-start/#should-i-create-a-block-or-an-element
If you want to have Menu title, the markup should look something like this:
<div class="menu">
<h2 class="menu__title">..</h2>
<div class="menu__item">
<div class="menu__item-title">
</div>
</div>
</div>
BEM gets a bit tricky when you have "children" of an element. But either use the menu__item-title naming convention or rethink your element, perhaps it can be separated and reused as a Block?
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.
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
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.
I've seen lately a lot of discussions about this new concept called oocss and I was wondering if it is a bad practice to wrap your main tags in divs only for styling/page layout purposes.
I'm asking this because I see some frameworks like Twitter Bootstrap use such a method.
What are the implications of such a markup from a semantic and accessibility point of view?
For example:
<div class="container">
<div class="row">
<div class="span4">
<nav class="nav">...</nav>
</div>
<div class="span8">
...
</div>
</div>
</div>
instead of
<div class="menu">
<nav class="nav">...</nav>
...
</div>
No, it's fine. HTML is a "mark-up language", and mark-up involves styling. Besides, everyone does it. Many of the fluid multi-column layouts rest precisely on this approach.
Using unnecessary divs is not a good idea... if the HTML codes in the second box is enough to do everything that you want or need to do then don't use extra divs... secondly, HTML codes in the second box is much clear and shorter then the codes in the first box... if you keep your codes clean, short and formatted, it will help you a lot when you want or need to update your code in future...