构建 CSS 样式表的最佳方法 [关闭]答案

【问题标题】：Best way to structure a CSS stylesheet [closed]构建 CSS 样式表的最佳方法 [关闭]
【发布时间】：2013-05-14 09:56:28
【问题描述】：

我对 CSS 比较陌生，但对于新手来说，我似乎已经掌握了相当不错的语言。然而，虽然我读过的许多教程经常警告“正确组织和构造你的样式表”（我当然可以明白为什么现在我自己创建了一些相当长的样式表）我一辈子都找不到关于样式表的标准化格式或布局的逻辑模式，使以后的人类阅读变得容易。

例如，我是否为页面的每个“地理”部分（标题、行 1、行 2、文章 1 等）创建一个带注释的部分，并将该部分的所有样式保留在这些注释边框内？当我有在其他部分中重复使用的样式时，问题似乎出现了 - 并将它们放在页面范围样式的部分下，然后完全否定按部分对它们进行分组的目的。同样，通过基于文本样式、布局样式等进行分组来构建样式表似乎更加令人困惑。

有“好的做法”吗？我知道这听起来很愚蠢，但似乎无论你用 HTML 和 CSS 做什么，都有人准备告诉你它的错误、不好的做法或不合语义，我感到很困惑。我希望我的代码成为我工作的一个很好的例子，以防雇主将来想要检查它。

【问题讨论】：

w3schools 建议放置one declaration per line。

标签： css layout structure stylesheet

【解决方案1】：

我从来没有真正被教导过，但是我可以告诉你我是如何组织我的 CSS 文档的。正如你所说，我喜欢将其划分为“地理”区域......即适用于页眉、侧边栏、主要内容、页脚等的规则。然后，在这些下面我添加了非常具体的规则，假设我需要在特定页面上设置表单或表格的样式。最后，当我添加可能全面适用的通用规则时，我在底部添加了一个“General Gubbins”部分。

哦，是的，我还喜欢将设计师的调色板添加到顶部以供快速参考。

例如...

/*
PALETTE:
dark grey : #555555;
pink      : #d93575;
*/

/* HEADER */
#header {...}
#header ul {...}

/* SIDE BAR */
#side {...}
#side ul {....}

/* CONTENT */
#content{...}
#content p {....}

/* FOOTER */
#footer{...}
#footer div {....}

/* FORMS */
form {...}
input {...}

/* GENERAL GUBBINS */
.center {...}
strong {...}
floatleft {...}

【讨论】：

在阅读@spikes 答案时 - 这是一个非常好的观点。我也使用了一些样式表——一个用于“样式”，一个用于“布局/响应”，也许一个用于“通用”，我喜欢将其放入我的所有网站（例如包含一个 clearfix 和线性列表）。如果网站使用自定义字体，通常也会出现在单独的样式表中。
我还想补充一点，你是绝对正确的，@user2317093 - 总会有人告诉你你所做的事情是错误的。取决于你自己的经验来决定是现在还是现在。这是我喜欢做的方式——在其他人眼中它可能是“正确的”，也可能是“错误的”——但我相信如果其他人接手我的工作，那么很容易弄清楚如何我已经建造了它，对我来说，这很重要。来源...学校的艰难敲门和即将到来的最后期限！ :-)
感谢道格，一个很好的答案，我偷了它:-) 我特别喜欢设计师调色板的想法，我以前没见过，但当我发现自己在做笔记时，它很有意义像这样在我的样式表的顶部，但现在我有一些时髦的东西可以称呼它。
没问题...很高兴它有帮助。顺便说一句，如果你想知道，是的 - 我确实将它标记为“一般 gubbins”！ :)

【解决方案2】：

这些人建议您“使用自上而下的结构组织样式表”（http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/）。我经常使用多个样式表。例如，在 MVC 中 - 您可以按视图注册样式。这样，您就可以将特定于视图的样式放在特定样式表中，而不会弄乱您的“共享”或“布局”样式表。

【讨论】：