css - 出于 CSS 目的，如何命名我的 DOM 元素

Question

我很难为我的 DOM 元素分配智能类名。

我觉得下面的示例是我的 CSS 通常涉及的内容:

<div class="article">
  <div class="title-container">
     <div class="title>Something fantastic</div>
     <div class="sub-title-controls">
        <div class="btn-like"></div>
        <div class="btn-google-plus-one"></div>
        <div class="btn-share"></div>
     </div>
  </div>
</div>

但稍后我想在页面下方添加不同样式的“共享”按钮。所以我最终做了:

<div class="article">
  <div class="title-container">
     <div class="title>Something fantastic</div>
     <div class="sub-title-controls">
        <div class="btn-like"></div>
        <div class="btn-google-plus-one"></div>
        <div class="btn-share-tiny"></div>
     </div>
  </div>
</div>
<div>...More stuff...</div>
<div class="btn-share-big"></div>

然后事情从那里开始失控。

我想我要找的是:是否有任何类型的 CSS 芝加哥样式手册？就像什么时候是 <div>真的更好地描述为 <section>或 <footer> ？您如何智能地命名用作容器的非可视 DIV？

经过 2 年没有结构的编码，我的 CSS 简直就是一场噩梦。几乎放弃并完全内联这个特定元素。 :) 提示表示赞赏。

Answer 1

SMACCS是 CSS 的样式指南，可能正是您要查找的内容。您可以购买，或者网站上的大部分内容都是免费的。

此外，BEM是由 Yandex 的人开发的框架，我发现它很有用，并被 InuitCSS 使用(有点) ，我个人很喜欢。