Я пытаюсь написать очень минималистский блог, чтобы заново выучить html и css. Я пытаюсь понять, что мне следует использовать для выбора элементов моей страницы между простыми тегами, идентификатором или классом.
Например, вот как может выглядеть одна из моих страниц:
<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>
Итак, что-то очень простое, и, как вы видите, я не использую ни класс, ни идентификатор.
И css будет выглядеть так:
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;
}
Я не уверен, прав ли я, но, поскольку это очень неопределенный набор правил CSS, это довольно хорошая практика. И если мне нужно стилизовать один из этих тегов в другом контексте, например, <header>tag внутри <article>for, использование класса должно перезаписать селектор типа без каких-либо проблем.
.article-header {
background-color: #eee;
@include span-columns(12);
}
Например
Но с другой стороны, я не уверен, что это правильный путь, и я слышал о методологии БЭМ, и я подумал, что могу использовать обе одновременно, чтобы получить хорошую масштабируемую базу.
Но насколько BEMed должен быть мой css?
Должен ли я сначала использовать селектор тегов для моего основного макета, а затем классы стилей БЭМ для стиля? Или просто полностью погрузиться в БЭМ и везде использовать классы?
<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>
сксс:
main-header {
&__title {
...
}
&__nav {
...
}
&__links {
...
}
&__items {
...
}
}
Но и
<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>
и (ссс)
.body{
@include outer-container;
}
.header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
или просто :
Но и
<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>
и (ссс)
body{
@include outer-container;
}
header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
Я знаю, что это похоже на вопрос, основанный на мнении, и я, вероятно, проголосую за это, но я думаю, что это больше о понимании того, как работают Bourbon/Neat и BEM, и насколько читаемый, повторно используемый и производительный код может быть оптимизирован.
