构建CSS样式表的最佳方式

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

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

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

来源

2013-05-14 user2317093

[w3schools]（https://en.wikipedia.org/wiki/W3Schools）建议放置[每行一个声明]（http://www.w3schools.com/css/css_syntax.asp）。 – mbomb007 2015-11-20 14:51:39

我从来没有真正教过，但是我可以让你知道我如何组织我的CSS文档。正如你所说，我喜欢把它分成“地理”区域......即适用于标题，边栏，主要内容，页脚等的规则。然后，在这些之下，我添加了非常具体的规则，说如果我需要在特定页面上创建表单或表格。最后我在底部添加一个“通用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-14 10:02:06 Doug

在阅读@spikes答案 - 这是一个很好的观点。我也使用了一些样式表 - 一个用于“样式”，一个用于“布局/响应式”，也许一个用于“通用”，我喜欢将其放入我的所有站点（例如包含清晰的修补程序和线性列表）。如果网站使用自定义字体，通常也会在单独的样式表中使用。 – Doug 2013-05-14 10:10:26

我还想补充一点，你绝对正确，@ user2317093 - 总会有人告诉你，你所做的是错误的。由你自己决定是或现在根据你自己的经验。这是我喜欢这样做的方式 - 在其他人看来，它可能是'正确的'，它可能是'错误的' - 但我相信如果其他人拿起我的作品，那么要弄清楚如何我建立了它，对我来说，这是重要的事情。来源......艰难的敲门声和迫近的截止日期！ :-) – Doug 2013-05-14 10:32:59

感谢Doug这个好回答，我偷了它:-)我特别喜欢这个设计师调色板的想法，我以前没有看到过，但是当我发现自己在我的样式表的顶部，但现在我有一些豪华的称呼它。 – user2317093 2013-05-14 10:37:49

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

来源

2013-05-14 10:03:27

构建CSS样式表的最佳方式

回答

相关问题