css - CSS“模式”操作方法

Question

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

score 6 · Accepted Answer

我非常喜欢通过内容或内容类型来命名我的 CSS 类，例如，包含导航“选项卡”的 <ul> 将具有 class="tabs"。包含日期的标题可以是 class="date"，或者包含前 10 个列表的有序列表可以有 class="chart"。类似地，对于 ID，可以给页面页脚 id="footer" 或网站标识 id="mainLogo"。我发现它不仅使类易于记忆，而且还鼓励适当的 CSS 级联。像 ol.chart {font-weight: bold; color: blue;} #footer ol.chart {color: green;} 可读性很强，并考虑了 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; }”。现在这就是我喜欢这样做的方式 - 我确信有更好的方法，但它对我有用。

最后，有几个tips：

充分利用级联，不要“过度分类”东西。如果你给一个 <ul> class="textNav" 那么你可以访问它的 <li>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>

为您的文档 <body> 标记（或 ID，因为应该只有一个...）赋予一个类可以为单个页面启用一些漂亮的覆盖，例如突出显示您当前所在页面的菜单项或摆脱它登录页面上多余的第二个登录表单，全部仅使用 CSS。“body.signIn div#mainMenu form.signIn {显示：无；}”

我希望您至少发现我的一些漫谈有用，并祝您的项目一切顺利！

score 4 · Accepted Answer

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

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

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

score 3 · Accepted Answer

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

使class名称明确。在大多数情况下，这意味着以可预测的方式为它们添加前缀。例如，而不是left，使用类似的东西header_links_object2_left。
使用id而不是class 仅当您知道页面上永远只有一个对象时。再次，id明确。
考虑副作用。margin和padding、float和等规则clear都可能对其他元素产生意想不到的后果。
如果您的样式表要用于我的几个 HTML 编码器，请考虑为它们编写一个小而清晰的指南，指导如何编写 HTML 以匹配您的方案。保持简单，否则你会厌烦它们。

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

重置规则（可能和规则一样简单 * {margin: 0; padding: 0}，Eric Meyer 的重置或 YUI 重置）
基本元素样式；这就是段落的基本排版、列表的间距等内容。
通用类；这部分对我来说通常包含诸如.error，.left（我只有 80% 语义）等内容。
通用布局/ID；#content, #header, 或任何您将页面剪切成的内容。
页面特定规则；如果您只需要为一页或几页修改现有样式，请将唯一 ID 高高放置（正文标记通常很好）并在文档末尾扔掉您的覆盖

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

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

score 1 · Accepted Answer

年度警戒线：视情况而定。

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

我最喜欢获取此类信息的地方是CSS Zen Garden & A List Apart。

score 1 · Accepted Answer

有两个世界：

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

我建议您从CSS 框架开始：

蓝图，如果你喜欢更小的东西
或YAML用于大而实用的

还有一个CSS 框架列表...

然后使用CSS 优化器(pe CSS Form.&Opti. )将其成形（用于浏览器）

您可以使用YSlow测量结果（未优化 <-> 优化）。

score 1 · Accepted Answer

还有一些保持井井有条的技巧：

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

css - CSS“模式”操作方法

8 回答 8

Related

Reference