Я пытаюсь написать очень минималистский блог как способ переучить html и css. Я пытаюсь понять, что я должен использовать, чтобы выбирать элементы моей страницы между обычными тегами, id или классом.Бурбон Аккуратный и семантический HTML5, как насчет BEM?
Для Exemple это то, что одна из моей страницы coud выглядеть следующим образом:
<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> внутри <article>, например, использование класса должно без проблем переписывать селектор типов.
.article-header {
background-color: #eee;
@include span-columns(12);
}
Например
Но тогда, я не уверен, что это правильный путь, и я слышал о методологии БОЙ и я, хотя я мог бы использовать и как то же самое время, чтобы получить хорошую масштабируемую базу ,
Но насколько BEMed должен быть мой css?
Должен ли я использовать селектор меток во-первых, для моего основного макета, а затем для стилей стилей BEM для стилизации? Или просто полностью входите в BEM и используете классы повсюду?
<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{
}
}
Я знаю, это выглядит как вопрос особенно мнение основано, и я, вероятно, спускайтесь проголосовали за это, но я думаю, что это больше о понимании того, как Бурбон/Аккуратная работа и работа BEM, а также то, как можно было бы читать, многократно использовать и выполнять код.