SMACSS，语义类名和嵌套元素 [英] SMACSS, Semantic Class Names and Nested Elements

问题描述

我刚刚阅读过 CSS的可扩展和模块化架构，它让我想起了几件事。 Snook的两个原则是：

1. 增加一段HTML和内容的语义值
   
2. 减少特定HTML结构的期望

类名称，而不是依赖于无意义的元素类型进行定位。例如，而不是定位 .someClass h5 ，我可以改为定位 .someClass-title ，以便如果h5被交换出去为别的东西，事情不打破。

我个人觉得编码一个元素的层次结构在它的名字种类不愉快（即使它在语义上是正确的）。我更喜欢做 .someClass .title 。但是要使用类作为泛型作为标题，你需要接受这个类将在许多不同的上下文中使用。

使用同一个类有什么问题在完全不同的上下文中如果我知道它将由选择器中的上一个项目命名空间？

例如，我有三个不同的地方，标题'有意义：

HTML

 < header class =pageHeader> 
< h1 class =title>部分标题< / h1> 
< / header> 
 
 ... 
 
< article class =leadArticle> 
< h3 class =title>部分文章标题< / h3> 
< / article> 
 
 ... 
 
< ul class =productPreviews> 
< li class =product> 
< h5 class =title>一些产品名称< / h5> 
< / li> 
< / ul> 
  
 
 
 
  CSS  
  .pageHeader .title 
 {
 
} 
 
 .leadArticle .title 
 {
 
} 
 
 .productPreview .product .title 
 {
 
} 
  
 修改：作为 Alohci 在下面的答案中提到的，标头标签不是无意的，所以也许这是wasn  
 
 
 
显然，我可能在这些上下文中做的与标题完全不同，但标题绝对有意义的模块命名空间，我从来没有使用标题作为一般选择器的任何意图。
 
 
 
这似乎打勾所有的框。它是语义丰富的，完全脱离实现。例如，如果最后一个例子变成了一个ol或者一个div的堆栈，没有什么会破坏，如果标题被包装在一个div，它仍然会被定位。
 
 
 
这对我有意义，但我没有看到这种方法使用了很多，我想知道为什么。一个明显的缺点是，你在选择器中链接类，但我认为这是更好的命名空间每个类名。
解决方案
 I喜欢使用类.title而不是只选择h5元素，因为我觉得它解耦的HTML从CSS更多。如果，无论什么原因，你决定一个h4或h6更适合文档大纲或一些其他元素/原因，如果你选择元素（h5）vs选择一个类，你将不得不重构你的CSS。标题）。
 
 
 
这就是为什么我更喜欢将所有的THINGS与元素选择器，因为标记可能会随时间改变。如果你在一个较小的网站上工作，没有看到很多更新，这可能不是一个问题，虽然它是很好意识。 
 
 
 
 至于在完全不同的上下文中使用相同的类有什么问题，如果你知道它将由选择器中的前一个项目命名，   
 
 
 
一方面，一些问题可以想起来，例如.title的使用/含义/角色可能是空的没有它的父选择器。 （.pageHeader .title）虽然我认为.title是一个完美的类名，它可能很难让其他开发人员理解它的意义来自一个父选择器如 .pageHeader .title  
 
 
 
另一个问题是，如果你在模块中使用.title类的多个实例titles，你可以遇到问题。基本思想是，如果试图延长模块内的.title的可重用性，则局部范围界定后代选择器提供有时可能太限制。我设置了一个代码演示，以显示我在此处的内容。
 
 
 
另一方面，后代选择器是最常用的选择器之一，专门用于其范围界定目的。
 
 
 
 Tim Murtaugh是其中一个开发人员（不确定他是否是领导开发人员） A List Apart 使用后代选择器他的个人样式的大部分网站。
 
 
 
我最近一直在探索这个和BEM，并同意你的结论，这是更好的命名每个类名。
 
 
 
我喜欢.pageHeader .title {...}与.pageHeader__title {...}，但总是有一种方法在某种情况下比其他方法更有利。
 
 
 
与大多数事情一样，这取决于，但我认为如果你不让嵌套变得太深，并深思如何使用它们，后代选择器是强大的和良好的解决方案
 
 
 
例如：
  / *所有.title的全局范围样式* / 
 .title {
 font-family：serif; 
 font-weight：bold; 
} 
 
 / *个人.title的本地作用域样式* / 
 .pageHeader .title {
 color：＃f00; 
} 
 
 .leadArticle .title {
 color：＃00f; 
} 
 
 .productPreview .product .title {
 color：＃0f0; 
} 
  
 
I've just read Scalable and Modular Architecture for CSS and it's got me thinking about a few things. Snook's two principle tennets are:

Increase the semantic value of a section of HTML and content 
Decrease the expectation of a specific HTML structure
So this means using semantic class names rather than relying on unsemantic element types for targeting. For example rather than targeting .someClass h5, I might target .someClass-title instead so that if the h5 is swapped out for something else, things don't break. 

Personally I find encoding an element's hierarchy in its name kind of unpleasant (even if it is semantically correct). I would prefer doing .someClass .title. But to use a class as generic as title you need to accept that this class will be used in lots of different contexts.

So is there anything wrong with using the same class in completely different contexts if I know it will be namespaced by a previous item in the selector?

For example say I have three different places in my site where a class of 'title' makes sense:

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
{

}
Edit: as Alohci mentions in his answer below, a header tag isn't unsemantic, so perhaps this wasn't the best example to use.

Obviously I might be doing something completely different to the title in these contexts, but title makes absolute sense with it's module's namespace, and I never have any intention of using title as a general selector.

This seems to tick all the boxes. It is semantically rich, completely decoupled from implementation. For example if the last example was changed into an ol or a stack of divs, nothing would break, and if title was wrapped in a div it would still be targeted.

This makes sense to me, but I haven't seen this approach used much and I'm wondering why. An obvious disadvantage is that you are chaining classes in the selector, but I think this is preferable to namespacing each classname.
解决方案
I prefer using a class like .title rather than selecting just the h5 element, as I feel it decouples the HTML from the CSS some more. If, for whatever reason, you decide an h4 or and h6 is more appropriate for the document outline, or some other element/reason, you would have to refactor your CSS if you are selecting the element(h5) vs select a class(.title).

This is why I prefer to class ALL THE THINGS vs. element selectors because the markup may change over time. If your working on a smaller site that isn't seeing many updates, this may not be a concern, though it's good to be aware of. 

As far as if there is anything wrong with using the same class in completely different contexts if you know it will be namespaced by a previous item in the selector, I have mixed thoughts on it. 

On one side, some concerns come to mind, for instance the use/meaning/role of .title could be empty without it's parent selector. (.pageHeader .title) While I think that .title is a perfectly fine class name, it may be difficult for other devs to understand it's meaning comes from a parent selector like .pageHeader .title

Another concern is if you are using the class .title for multiple instances of "titles" in a module, you can run into issues. The basic idea is that the local scoping descendant selectors provide can sometimes be too restricting if trying to stretch the reusability of .title within the module. I set up a code demo to show what I'm talking about here.

On the other side, descendant selectors are one of the most used selectors, specifically for their scoping purpose.

Tim Murtaugh, who is one of the developers (not sure if he is the lead dev or not) for A List Apart uses descendant selectors for the majority of his styles on his personal site.

I've recently been exploring this and BEM and would agree with your conclusion, "this is preferable to namespacing each classname."

I prefer .pageHeader .title{...} vs. .pageHeader__title{...} but there are always instances where one approach may be more beneficial in a situation over the other.

As with most things, it depends, but I think if you don't let the nesting go too deep and are thoughtful with how you use them, descendant selectors are powerful and good solution for providing locally scoped styles while also offering a solution for globally scoping styles.

For example:
/* 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;
}


                        
这篇关于SMACSS，语义类名和嵌套元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！