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

您应该在这篇标题为What Makes For a Semantic Class Name?的文章中找到一些答案。

简而言之，如果可以，请使用新的HTML5标记：

<header></header>
<article></article>
<aside></aside>
<footer></footer>

对于你的例子，做这样的事情会更好：

<div class="btn-share"></div>
...
<div class="btn-share bigBtn"></div>

并且仅更改bigBtn类中的大小。

Answer 2

SMACCS是CSS的样式指南，可能正是您正在寻找的内容。您可以购买它，或者在网站上免费提供大部分内容。

此外，BEM是由Yandex的人开发的框架，我发现有用的阅读材料（有点）由InuitCSS使用，我个人很喜欢。< / p>

为CSS目的命名我的DOM元素的用途

2 个答案: