我试图写一个非常简约的博客作为一种重新学习html和css的方式。我正在尝试理解我应该使用什么来在纯标签，id或类之间选择页面的元素。
例如，我的一个页面可能是这样的:
<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>
非常简单，你可以看到我没有使用任何class和id
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规则，这是一个很好的实践。如果我必须在另一个上下文中样式化这些标记中的一个，例如<article>中的<header>标记，使用类应该覆盖类型选择器而没有任何问题。
.article-header {
background-color: #eee;
@include span-columns(12);
}
但是，我不确定这是正确的方法，我听说了BEM方法，我想我可以同时使用这两种方法，以获得一个很好的可扩展基础。
但是我的css应该有多少BEMed呢?
我应该首先使用标签选择器，为我的主布局，然后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>
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>
和
.body{
@include outer-container;
}
.header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
或只是:
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>
和
body{
@include outer-container;
}
header
{
@include span-columns(12);
}
.last-articles
{
@include span-columns(9);
&__title {
}
}
.article
{
&__title{
}
&__p{
}
}
我知道这看起来像是一个特别基于意见的问题，我可能会投反对票，但我认为这更多的是关于理解Bourbon/Neat和BEM是如何工作的，以及如何优化代码的可读性、可重用性和性能。
只使用类选择器，它将使你的代码更易于阅读。
我还建议使用类来满足大多数样式需求。这样做可以创造一个公平的竞争环境，并增加样式的可重用性和可移植性。
Bourbon和Neat只是帮助你更有效地编写Sass的库;他们不应该强迫你沿着某种架构路径走下去。BEM是组织类并为其他开发人员增加清晰度的好方法。语义HTML是关于内容的语义，但不要让它妨碍代码的清晰度。我建议适当地标记内容，以机器可读的方式表示它(即标记标题与标题元素，列表与列表元素，标题在header等)，并使用类注入风格到该内容。但两者并不一定需要通知对方