Und*_*ion 8 html css html5 semantics
我刚刚阅读了CSS的可扩展和模块化架构,它让我想到了一些事情.Snook的两个主要原则是:
因此,这意味着使用语义类名称而不是依赖于非语义元素类型进行定位.例如,而不是定位.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的可重用性,则本地作用域后代选择器提供的有时可能过于严格.我设置了一个代码演示来展示我在这里谈论的内容.
另一方面,后代选择器是最常用的选择器之一,专门用于其范围目的.
Tim Murtaugh是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;
}