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.
Related
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.
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.
Having seen the source of one of the Bootstrap Expo sites Tsaa Tea Shop I wonder if what they have done, adding semantic HTML5 tags in between BS classes, would give the site a better semantic value?
Considering they use the section element quite a bit, can this be seen as an accepted and good use of HTML5 tags/elements alongside BS?
Here a short excerpt:
<section class="about-us block">
<div class="container">
<div class="row">
<div class="col-md-8 text-center">
<h2 class="section-title">Welcome</h2>
<span class="fa fa-leaf"></span>
</div>
</div>
</div>
</section>
<section class="quote block">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>"We loved our relaxing time with great food and beverages..."</h2>
</div>
</div>
</div>
</section>
At the moment I am starting work on a smaller project and have something along the line of a simple one-page layout in mind.
Would it do any good in consideration of semantics to follow this approach?
The Bootstrap is unsemantic by default
Twitter Bootstrap is one of the most unsemantic frameworks on the market. If you put to your code classes like container, form-control or col-sm-2 you just can't be semantic.
But sometimes you don't want to be. You want to be readable, practical and maintainable — and that's why it is made for and it's great in it.
HTML5 tags
Yes, yes. We have all these new, sexy, useful, years-needed HTML5 tags like: article, section, nav, main, header, footer or details… But let's face truth — the section sucks almost as much as usuall div.
Semantic of the section is almost zero. God - it's a tag with display:block that is called "section". The biggest (and maybe only) advantage of it is improving of readability, not the semantics. And that's enough.
Why to still use the new HTML tags
Because:
It's more readable.
It's easier to debug.
It's more modern.
It's a bit more meaningful and consequential.
So, if you face the decision — to use or not to use HTML5 tags, do anything, but do not continue in this div-cancer-that-is-the-web-built-on.
… even minified version of new tags is more readable:
<article><section></section><section></section><aside></aside></article>
<div><div></div><div></div><div></div></div>
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 have been using twitter bootstrap for a year, its the one of those things which -"just works" . With release of twitter bootstrap3 its become even better and awesome with its mobile first approach. But i am not able to understand how to use it properly with mobile first approach.
Earlier there was .span* and .offset* class but now there are .col-xs-* .col-md-* .col-sm-* .col-lg-* and .col-xs-offset-* .col-md-offset-* classes respectively. Even now 'it-just-works' using .col-md-* i want to know the right way to use all these classes so as to not just use them but use them correctly to get most out of bootstrap3.
Thanks.
I found these links very helpful:
http://www.helloerik.com/bootstrap-3-grid-introduction
http://bootply.com/bootstrap-3-migration-guide
Currently I'm using Bootstrap 3 for web development, how I'm using the Grid system is,
<div class="container">
<div class="row">
<div class="col-md-9"> <%--this for 9X3 grid--%>
<div class="row">
<div class="col-md-6"> <%--this for 6X6 inner grid--%>
</div>
<div class="col-md-6">
</div>
</div>
</div>
<div class="col-md-3">
</div>
</div>
</div>
I found (a) Bootstrap's own documentation helpful here, but also a (b) lynda.com topic in migrating to Bootstrap 3. Specifically, see "Dealing with grid changes"
(a) http://getbootstrap.com/css/#grid-offsetting
(b) http://www.lynda.com/course20/Bootstrap-tutorials/Bootstrap-3-New-Features-Migration/138156-2.html