J'essaie d'écrire un blog très minimaliste comme un moyen de ré-apprendre html et CSS. J'essaie de comprendre ce que je devrais utiliser pour sélectionner les éléments de ma page entre les balises simples, id ou classe.Bourbon Soignée et sémantique HTML5, qu'en est-il de BEM?
Pour c'est ce exemple une de ma page Coud ressemblent:
<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>
donc quelque chose de très simple, et comme vous pouvez le voir, je ne pas utiliser de classe ni id.
Et le css ressemblerait à ceci:
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;
}
Je ne sais pas si je ne me trompe pas, mais, comme il est un ensemble de règles très non spécifique css, il est tout à fait une bonne pratique. Et si je dois styliser l'une de ces balises dans un autre contexte, une balise <header> à l'intérieur d'un <article> par exemple, l'utilisation d'une classe devrait écraser le sélecteur de type sans problème.
.article-header {
background-color: #eee;
@include span-columns(12);
}
Par exemple
Mais, je ne suis pas sûr que c'est la bonne et j'ai entendu parler de la méthode EBM et je pensais que je pouvais utiliser à la fois comme en même temps, pour obtenir une belle base de évolutive .
Mais combien BEMed devrait être mon css?
Dois-je d'abord utiliser le sélecteur de balises pour ma mise en page principale, puis les classes de style BEM pour le style? Ou juste aller complètement dans BEM et utiliser des classes partout?
<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 {
...
}
}
Mais aussi
<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>
et (SCRT)
.body{
@include outer-container;
}
.header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
ou tout simplement:
Mais aussi
<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>
et (SCRT)
body{
@include outer-container;
}
header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
Je sais que cela ressemble à une question et je base notamment sur l'opinion sera probablement descendre voté pour cela, mais je pense qu'il est plus de comprendre comment Bourbon/Neat et BEM fonctionnent et comment lisible, réutilisable et performant le code pourrait être optimisé.