0

我很难为我的 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>真的更好地描述为 a <section>or <footer>？如何智能地命名用作容器的非可视 DIV？

经过 2 年没有结构的编码后，我的 CSS 是一场噩梦。几乎放弃并在这个特定的项目上全部投入。:) 提示赞赏。

4

2 回答 2

1

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

此外，BEM是由Yandex的人开发的一个框架，我发现它很有用，并被InuitCSS （在某种程度上）使用，我个人很喜欢它。

于 2013-06-11T13:35:09.487 回答
1

你应该在这里找到一些答案，这篇文章的标题是：什么是语义类名？.

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

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

对于您的示例，最好执行以下操作：

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

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

于 2013-06-11T00:07:37.870 回答