Question

我对CSS比较陌生，但我似乎已经为新手提供了相当好的语言。然而，虽然我阅读的许多教程经常警告“正确组织和构造样式表”（我当然可以看到为什么我自己创建了一些相当长的样式表）我不能找到任何关于a的信息。样式表的标准化格式或布局的逻辑模式，使以后的人类阅读变得容易。

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

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

Answer 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 {...}

Answer 2

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

构建CSS样式表的最佳方法

2 个答案: