I'm trying to write a very minimalist blog as a way to re-learn html and css. I'm trying to understand what I should use to select the elements of my page between plain tags, id or class.
For exemple this is what one of my page coud look like :
<body>
<header>
<h1><a href="/">My fabulous blog</a></h1>
<nav>
<ul>
<li><a href="#">Page one</a></li>
<li><a href="#">Page two</a></li>
</ul>
</nav>
</header>
<section>
<h1>Latest articles</h1>
<article>
<h1>Title</h1>
<p>I like turtles</p>
</article>
<article>
<h1>Title</h1>
<p>I like potatoes too</p>
</article>
<a href="#">Browse the archive.</a>
</section>
<aside>
<h2>Social</h2>
<ul>
<li>Twitter</li>
<li>Facebook</li>
<li>Github</li>
</ul>
</aside>
<footer>© 1546-2032</footer>
</body>
So something very simple, and as you can see I don't use any class nor id.
And the css would look like :
body {
@include outer-container;
}
header {
@include span-columns(12);
}
section
{
@include span-columns(9);
}
aside
{
@include span-columns(3);
}
footer{
@include span-columns(12);
}
header, aside, footer
{
@include omega;
}
I'm not sure if I'm right but, as it is a very unspecific set of css rules, it is quite a good practice. And if I have to style one of these tags in another context a <header>tag inside an <article>for exemple, using a class should overwrite the type selector without any problem.
.article-header {
background-color: #eee;
@include span-columns(12);
}
For example
But then, I'm not sure it's the right way and I heard about the BEM methodology and I though I could use both as the same time, to get a nice scalable base.
But how much BEMed should my css be ?
Should I use tag selector first, for my main layout and then BEM styles classes for styling ? Or just go fully into BEM and use classes everywhere ?
<header class="main-header">
<h1 class="main-header__title"><a href="/">My fabulous blog</a></h1>
<nav class="main-header__nav">
<ul class="main-header__links">
<li class="main-header__item"><a href="#">Page one</a></li>
<li class="main-header__item"><a href="#">Page two</a></li>
</ul>
</nav>
</header>
scss:
main-header {
&__title {
...
}
&__nav {
...
}
&__links {
...
}
&__items {
...
}
}
But also
<body class="body">
[...]
<header class="header">
[...]
</header>
<section class="last-articles">
<h1 class="last-articles__title">Latest articles</h1>
<article class="article">
<h1 class="article__title">Title</h1>
<p class="article__p">I like turtles</p>
<p class="article__p">But I also liek potatoes.</p>
<p class="article__p">But I don't like them both in the same dish.</p>
<p class="article__p">Except in soup.</p>
</article>
and (scss)
.body{
@include outer-container;
}
.header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
or just :
But also
<body>
[...]
<header>
[...]
</header>
<section class="last-articles">
<h1 class="last-articles__title">Latest articles</h1>
<article class="article">
<h1 class="article__title">Title</h1>
<p class="article__p">I like turtles</p>
<p class="article__p">But I also liek potatoes.</p>
<p class="article__p">But I don't like them both in the same dish.</p>
<p class="article__p">Except in soup.</p>
</article>
and (scss)
body{
@include outer-container;
}
header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
I know it looks like a particularly opinion based question and I will probably get down voted for that but I think it's more about understanding how Bourbon/Neat and BEM work and how readable, reusable and performant the code could be optimized.
