7

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

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

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

4

2 回答 2

5

我从来没有真正被教过，但是我可以让你知道我是如何组织我的 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 {...}
于 2013-05-14T10:02:06.923 回答
1

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

于 2013-05-14T10:03:27.030 回答