CSS“模式”操作方法答案

【问题标题】：CSS 'schema' how-toCSS“模式”操作方法
【发布时间】：2008-10-08 14:30:27
【问题描述】：

如何建立通用元素样式、嵌套元素样式和分类元素样式的 CSS“模式”或层次结构。对于像我这样的新手来说，我查看的样式表中的信息量完全是压倒性的。与内联样式属性相比，创建一个或多个因子良好的样式表时遵循什么流程？

【问题讨论】：

另见：stackoverflow.com/questions/72911/…

【解决方案1】：

我非常喜欢通过内容或内容类型来命名我的 CSS 类，例如，包含导航“选项卡”的

适当的缩进也是一个很大的帮助。您的 CSS 可能会增长很多，除非您想在每次向网站添加新部分或想要发布新类型的内容时重构 HTML 模板。无论您多么努力，都不可避免地需要添加一些您在原始模式中没有预料到的新规则（或例外）。 Indeting 将允许您更快地扫描大型 CSS 文件。我个人的偏好是缩进选择器的具体和/或嵌套程度，如下所示：

    ul.tabs {
    list-style-type: none;
    }
        ul.tabs li {
        float: left;
        }
            ul.tabs li img {
            border: none;
            }

这样，“父”总是在最左边，因此文本被父容器分解成块。我也喜欢将样式表分成几个部分；首先是 HTML 元素的所有选择器。我认为这些非常通用，以至于它们应该首先出现。在这里我放了“body { font-size: 77%; }”和“a { color: #FFCC00; }”等。之后我会为页面的主要框架部分放置选择器，例如“ul#mainMenu {浮动：左；}”和“div#footer {高度：4em；}”。然后是常见的对象类，“td.price { text-align: right; }”，最后是额外的小位，如“.clear { clear: both; }”。现在这就是我喜欢做的方式 - 我确信有更好的方法，但它对我有用。

最后，有几点建议：

充分利用级联，不要“过度分类”东西。如果你给一个
- s 和他们的孩子，而无需添加任何额外的课堂作业。 ul.textNav li a:hover {}
- 不要害怕在单个对象上使用多个类。这是完全有效且非常有用的。然后，您可以控制来自多个轴的对象组的 CSS。还给对象一个 ID 添加了第三个轴。例如：
```
<style>
div.box {
float: left;
border: 1px solid blue;
padding: 1em;
}

div.wide {
width: 15em; 
}

div.narrow {
width: 8em; 
}

div#oddOneOut {
float: right;
}
</style>

<div class="box wide">a wide box</div>
<div class="box narrow">a narrow box</div>
<div class="box wide" id="oddOneOut">an odd box</div>
```
- 为您的文档
  标记（或 ID，因为应该只有一个...）提供一个类可以为各个页面启用一些漂亮的覆盖，例如突出显示您当前所在页面的菜单项打开或删除登录页面上多余的第二个登录表单，所有这些都仅使用 CSS。 “body.signIn div#mainMenu form.signIn { display: none; }”

我希望您至少发现我的一些漫谈有用，并祝您在项目中取得好成绩！

【讨论】：

你在开玩笑吗？大多数开发人员都可以正确缩进，您绝对应该缩进选择器中的属性（因此您在 float: left 等之前使用 4 个空格。
不开玩笑。 CSS 对空格不敏感。规范也没有说明缩进。而且我是格式和标准的坚持者。不缩进声明是个人选择；如果您不喜欢它，请继续缩进它们！我看到很多人把简短的（有时不是那么短！）CSS 块放在一行上，我觉得这很烦人，尽管我有时在 JS 中这样做。哦，我用制表符而不是空格来缩进我的 CSS（和 JS 和 HTML）文件。随心所欲地尖叫。

【解决方案2】：

您可以做很多不同的事情来帮助您组织 CSS。例如：

将您的 CSS 拆分为多个文件。例如：有一个文件用于布局，一个用于文本，一个用于重置样式等。
注释您的 CSS 代码。
为什么不添加目录？
尝试使用像 960.gs 这样的 CSS 框架来开始您的工作。

这完全取决于个人喜好。但这里有一些您可能会觉得有用的链接：

【讨论】：

【解决方案3】：

将 CSS 视为创建 HTML 可以引用的“工具包”。以下规则将有所帮助：

使class 名称明确。在大多数情况下，这意味着以可预测的方式为它们添加前缀。例如，不要使用left，而是使用header_links_object2_left 之类的名称。
使用id 而不是class 仅如果您知道页面上只有永远一个对象。同样，使id 明确。
考虑副作用。 margin 和 padding、float 和 clear 等规则都可能对其他元素产生意想不到的后果。

和往常一样，在多个浏览器、多个操作系统、许多不同的页面以及您能想到的任何其他异常情况下对其进行测试。

【讨论】：

我不认为使用依赖于样式的名称（即调用样式“head_links_left”）是一个好主意。如果您决定将左侧的链接移到右侧怎么办？您应该更改样式名称！这并不容易维持。我更喜欢使用“语义”名称，例如“head_links”。

【解决方案4】：

将所有 CSS 声明按照它们在文档层次结构中的大致相同顺序放置通常是一件好事。这使得未来的读者很容易看到哪些属性将被继承，因为这些类将在文件中更高。

此外，这与您的问题有点正交，但如果您正在寻找一种工具来帮助您阅读 CSS 文件并查看所有内容如何变化，我不能推荐 Firebug。

【讨论】：

我喜欢 FireBug 的 Inspect Element。事实上，我喜欢 FireBug 的所有内容。

【解决方案5】：

我收到的最好的组织建议来自 An Event Apart 的一次演讲。

假设您将所有内容保存在一个样式表中，它基本上有五个部分：

重置规则（可能就像 * {margin: 0; padding: 0} 规则， Eric Meyer 的重置，或 YUI 重置）
基本元素样式；这是基本排版之类的东西段落，列表间距，等
通用类；本节对我来说通常包含的东西比如.error，.left（我只有80% 语义）等。
通用布局/ID； #content, #header, 或者你把页面剪掉的任何东西进入。
页面特定规则；如果你需要修改现有样式只是一页或几页，贴一个唯一的 ID 高（身体标签是通常很好）并折腾你的覆盖在文档的末尾

我不建议使用 CSS 框架，除非您需要在 HTML fast 中模拟某些东西。它们太臃肿了，而且我从未遇到过语义对我有意义的人。当你弄清楚你的项目随着时间的推移共享哪些代码时，创建你自己的“框架”会更好。

阅读其他人的代码完全是另一回事，我祝你好运。那里有一些真正可怕的 CSS。

【讨论】：

【解决方案6】：

年度最佳应对方式：视情况而定。

你需要做多少造型？您需要更改几乎每个元素的方面，还是只需要更改几个？

我最喜欢去的地方是CSS Zen Garden和A List Apart。

【讨论】：

【解决方案7】：

有两个世界：

The human editor perspective: CSS 最容易理解的地方是，它具有清晰的结构、良好的格式、冗长的名称、结构化的布局、颜色和排版...
The consumer perspective: 如果您的网站加载速度很快，如果它在他的浏览器中看起来很完美，那么访问者会非常高兴，因此 css 必须很小，在一个文件中（以节省更多连接）并包含 CSS hack 以支持所有浏览器。李>

我建议你从CSS framework开始：

Blueprint如果你喜欢更小的东西
或YAML 大而实用的

还有一个list of CSS Frameworks...

然后使用CSS Optimizer（例如CSS Form.&Opti.）将其成形（用于浏览器）

您可以使用YSlow 衡量结果（未优化优化）。

【讨论】：

【解决方案8】：

关于保持井井有条的更多提示：

在每个声明中，采用您坚持的属性顺序。例如，我通常按此顺序列出边距、填充、高度、宽度、边框、字体、显示/浮动/其他，以便在我的下一个技巧中更易于阅读
像编写任何其他代码一样编写 CSS：缩进！您可以轻松扫描 CSS 文件中的高级元素，然后向下钻取，而不是简单地按照 HTML 的源顺序进行。
具有良好类名的语义 HTML 有助于记住哪些样式适用于哪些元素。

【讨论】：