As I venture into the world of web development, I have decided to create a simplistic blog using HTML and CSS. The dilemma I face is whether to select elements on my page using plain tags, IDs, or classes.
For instance, here is a snippet of what one of my pages might 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>
This structure is very basic, with no classes or IDs used throughout.
The corresponding CSS would be:
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 am considering the BEM methodology for structuring my CSS styles. How heavily should I rely on this approach? Should I start with tag selectors for layout and then implement BEM modifiers for styling, or go all in with BEM by using 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 example:
main-header {
&__title {
...
}
&__nav {
...
}
&__links {
...
}
&__items {
...
}
}
Alternatively,
<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 like potatoes.</p>
<p class="article__p"`;gt;But I don't like them both in the same dish.</p>
<p class="article__p"> Except in soup.</p>
</article>
SCSS:
.body{
@include outer-container;
}
.header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
Ultimately, I aim to understand the best practices for utilizing Bourbon/Neat and BEM to optimize code readability, reusability, and performance.