html – SMACSS,语义类名称和嵌套元素

前端之家收集整理的这篇文章主要介绍了html – SMACSS,语义类名称和嵌套元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我刚读了 Scalable and Modular Architecture for CSS,它让我想到了一些事情. Snook的两个主要原则是:

>增加HTML和内容的一部分的语义值
>降低特定HTML结构的期望

因此,这意味着使用语义类名称而不是依赖于非语义元素类型进行定位.例如,而不是以.someClass h5为目标,我可能会将.someClass-title作为目标,这样如果h5被换掉其他东西,事情就不会破坏.

就个人而言,我发现编码元素的层次结构在其名称中是令人不愉快的(即使它在语义上是正确的).我更喜欢做.someClass .title.但是要使用类作为标题通用,您需要接受此类将在许多不同的上下文中使用.

因此,如果我知道它将被选择器中的前一项命名空间,那么在完全不同的上下文中使用相同的类是否有任何问题?

例如,假设我的网站中有三个不同的位置,其中“标题”类是有意义的:

HTML

<header class="pageHeader">
   <h1 class="title">Some Title</h1>
</header>

...

<article class="leadArticle>
   <h3 class="title">Some Article Title</h3>
</article>

...

<ul class="productPreviews">
   <li class="product">
      <h5 class="title">Some Product Name</h5>
   </li>
</ul>

CSS

.pageHeader .title
{

}

.leadArticle .title
{

}

.productPreview .product .title
{

}

编辑:正如Alohci在下面的回答中提到的,标题标签不是非语义的,所以这可能不是最好的例子.

显然,我可能会在这些上下文中做一些与标题完全不同的东西,但title对于模块的命名空间是绝对有意义的,而且我从来没有打算使用title作为常规选择器.

这似乎勾选了所有方框.它在语义上很丰富,完全与实现分离.例如,如果最后一个示例被更改为ol或一堆div,则没有任何内容会中断,如果title被包装在div中,它仍然会被定位.

这对我来说很有意义,但我没有看到这种方法用得太多,我想知道为什么.一个明显的缺点是你在选择器中链接类,但我认为这比命名每个类名称更可取.

解决方法

我更喜欢使用像.title这样的类,而不是只选择h5元素,因为我觉得它将HTML与CSS分离了一些.无论出于何种原因,如果你认为h4或h6更适合文档大纲或其他一些元素/原因,如果你选择元素(h5)而不是选择一个类,你将不得不重构你的CSS(.标题).

这就是为什么我更喜欢将所有事情与元素选择器分类,因为标记可能会随着时间的推移而改变.如果您在一个没有看到很多更新的小型网站上工作,这可能不是一个问题,尽管知道这一点很好.

如果在完全不同的上下文中使用同一个类有任何问题,如果你知道它将被选择器中的前一个项命名,那么我对它有不同的想法.

一方面,我会想到一些问题,例如.title的使用/含义/角色可能是空的,没有它的父选择器. (.pageHeader .title)虽然我认为.title是一个非常精细的类名,但是其他开发者可能很难理解它的意思来自像.pageHeader这样的父选择器.title

另一个问题是,如果您将类.title用于模块中的多个“标题”实例,则可能会遇到问题.基本思想是,如果试图在模块中扩展.title的可重用性,那么本地作用域后代选择器提供的有时可能会受到限制.我设置了一个代码演示来展示我所说的here.

另一方面,后代选择器是最常用的选择器之一,专门用于其范围目的.

Tim Murtaugh是A List Apart的开发人员之一(不确定他是不是主要开发人员)A List Apart在他的个人网站上使用了后代选择器.

我最近一直在探索这个和BEM,并同意你的结论,“这比命名每个类名更好.”

我更喜欢.pageHeader .title {…}与.pageHeader__title {…}相比,但总有一种方法可以让一种方法在另一方面更有利.

与大多数事情一样,这取决于,但我认为如果你不让嵌套过于深入并且对如何使用它们深思熟虑,那么后代选择器是提供本地范围样式的强大而好的解决方案,同时也为全局提供解决方案范围风格.

例如:

/* Globally scoped styles for all .title(s) */
.title{
   font-family: serif;
   font-weight: bold;
}

/* Locally scoped styles for individual .title(s) */
.pageHeader .title {
    color: #f00;
}

.leadArticle .title {
    color: #00f;
}

.productPreview .product .title {
   color: #0f0;
}
原文链接:https://www.f2er.com/html/227155.html

猜你在找的HTML相关文章