我一直严重依赖CSS的一个网站,我正在工作。现在,所有的CSS样式都是在每个标签的基础上应用的,所以现在我试图将它移动到更多的外部样式,以帮助任何未来的变化。

但现在的问题是,我已经注意到我得到了一个“CSS爆炸”。我很难决定如何在CSS文件中最好地组织和抽象数据。

我在网站中使用了大量的div标签,从一个基于表格的网站。我得到了很多这样的CSS选择器:

div.title {
  background-color: blue;
  color: white;
  text-align: center;
}

div.footer {
  /* Styles Here */
}

div.body {
  /* Styles Here */
}

/* And many more */

这还不算太糟,但由于我是初学者,我想知道是否可以就如何最好地组织CSS文件的各个部分提出建议。我不想在我的网站上的每个元素都有一个单独的CSS属性,我总是希望CSS文件是相当直观和易于阅读的。

我的最终目标是使它易于使用CSS文件,并证明他们的力量,以提高web开发的速度。这样,将来可能在这个网站上工作的其他人也将开始使用良好的编码实践,而不必像我一样学习。


当前回答

这里有一些很棒的材料,有些人已经花了很多时间来回答这个问题,但是当涉及到单独或单独的样式表时,我会使用单独的文件进行开发,然后在部署时将所有在站点上使用的通用css合并到一个文件中。

这样你可以两全其美,提高性能(从浏览器请求的HTTP请求更少),并在开发时分离代码关注点。

其他回答

我发现最难的事情是将网站所需的设计转化为一系列规则。如果站点的设计清晰且基于规则,那么你的类名和CSS结构就可以由此而来。但是,如果人们随着时间的推移,随机地在网站上添加一些没有多大意义的内容,那么在CSS中就没有太多办法了。

我倾向于这样组织我的CSS文件:

CSS reset, based on Eric Meyer’s. (Because otherwise I find that, for most elements, I’ve got at least one or two rules that are just resetting default browser styles — most of my lists don’t look like the default HTML style for lists, for example.) Grid system CSS, if the site calls for it. (I base mine on 960.gs) Styles for components that appear on every page (headers, footers, etc) Styles for components that are used in various places across the site Styles that are only relevant on individual pages

如你所见,这主要取决于网站的设计。如果设计清晰有条理,你的CSS也可以做到。如果不是,你就完蛋了。

我可以建议少CSS动态框架吗

它类似于前面提到的SASS。

它帮助维护每个父类的CSS。

E.g.

 #parent{     
  width: 100%;

    #child1
    {    
     background: #E1E8F2;    
     padding: 5px;    
    }

    #child2
   {
     background: #F1F8E2;
     padding: 15px
   }
 }

它的作用: 将width:100%应用于#child1和#child2。

此外,#child1特定的CSS属于#parent。

这将导致

#parent #child1
{
 width: 100%;
 background: #E1E8F2;
 padding: 5px;
}

#parent #child2
{
 width: 100%;
 background: #F1F8E2;
 padding: 15px;
}

这里有一些很棒的材料,有些人已经花了很多时间来回答这个问题,但是当涉及到单独或单独的样式表时,我会使用单独的文件进行开发,然后在部署时将所有在站点上使用的通用css合并到一个文件中。

这样你可以两全其美,提高性能(从浏览器请求的HTTP请求更少),并在开发时分离代码关注点。

我建议你看看“指南针风格”CSS框架。

以下是4个例子:

CSS约定/代码布局模型 在编写我的第一个样式表时,我应该遵循哪些CSS标准? 整理CSS的最佳方法是什么? 最佳实践- CSS样式表格式

在所有4个问题上,我的回答都包含了下载并阅读Natalie Downe的PDF CSS系统的建议。(PDF包含了大量幻灯片上没有的注释,所以请阅读PDF!)注意她对组织的建议。

四年后,我想说:

Use a CSS pre-processor and manage your files as partials (I personally prefer Sass with Compass, but Less is quite good as well and there are others) Read up on concepts like OOCSS, SMACSS, and BEM or getbem. Take a look at how popular CSS frameworks like Bootstrap and Zurb Foundation are structured. And don't discount less popular frameworks - Inuit is an interesting one but there are plenty others. Combine/minify your files with a build step on a continuous integration server and/or a task runner like Grunt or Gulp.