我应该如何组织我的CSS文件的内容？

这个问题是关于在一个.css文件中组织实际的CSS指令本身。 当开发一个新的页面或一组页面时，我通常只是手工添加指令到.css文件，尽可能地重构。 一段时间后，我有数百（或数千）的线路，调整布局时很难find我需要的。

有没有人有如何组织指令的build议？

  • 我应该尝试组织自上而下，模仿DOM？
  • 我是否应该在function上进行组织，将支持UI相同部分的元素的指令放在一起？
  • 我应该按select器按字母顺序排列一切吗？
  • 这些方法的一些组合？

另外，在一个文件中保存多lessCSS是有限制的，因为它可能是一个好主意，将它分解成单独的文件？ 说，1000线？ 或者将整个事物放在一个地方总是一个好主意？

相关问题： 组织CSS规则的最好方法是什么？

看看这三个slideshare介绍开始：

  • 漂亮的可维护的CSS
  • 可维护的CSS
  • 高效，可维护，模块化的CSS

首先，最重要的是，logging你的CSS。 无论您使用什么方法来组织您的CSS，请保持一致并将其logging下来。 在每个文件的顶部描述该文件中的内容，可能提供了一个目录，可能引用容易search唯一标签，以便在编辑器中轻松跳转到这些部分。

如果你想把你的CSS分成多个文件，一定要这样做。 奥利已经提到额外的HTTP请求可能是昂贵的，但你可以有两全其美。 使用某种forms的构build脚本将您的logging良好的模块化CSS发布到压缩的单个CSS文件中。 YUI压缩器可以帮助压缩。

与其他人迄今为止所说的不同，我倾向于将每个属性单独编写一行，并使用缩进来将相关规则分组。 例如下面奥利的例子： 

#content { /* css */ } #content div { /* css */ } #content span { /* css */ } #content etc { /* css */ } #header { /* css */ } #header etc { /* css */ }

这样可以很容易地遵循文件结构，特别是足够的空白和组间明显标注的注释（尽pipe不是很容易快速浏览），并且易于编辑（因为您不必通过单行长的CSS为每个规则）。

理解和使用级联和特殊性 （所以按照字母sortingselect器是正确的）。

是否将我的CSS分成多个文件，以及哪些文件取决于网站和CSS的大小和复杂性。 我总是至less有一个reset.css 。 这往往伴随着layout.css的一般页面布局， nav.css如果站点导航菜单有点复杂和forms.css如果我有足够的CSS样式我的forms。 除此之外，我还在自己搞清楚。 我可能有colors.css和type.css/fonts.css来分割颜色/graphics和印刷， type.css/fonts.css为所有的HTML标签提供一个完整的基础风格…

我倾向于像这样讨论我的CSS：

  1. reset.css
  2. base.css：我设置了页面主要部分的布局
    1. 一般风格
    2. 头
    3. 导航
    4. 内容
    5. 页脚
  3. 其他 – [页面名称] .css：仅在一个页面中使用的类

不过你觉得最简单的阅读！

严重的是，你会得到十亿和五个build议，但你只会喜欢一些方法。

有些事情我会说，

  • 把CSS文件分解成块可以帮助你将其组织起来，但这意味着来自浏览器的更多请求，最终导致运行速度较慢的服务器（更多的请求），浏览器需要更长的时间才能显示页面。 记住这一点。
  • 打破一个文件，只是因为它是任意数量的行是愚蠢的（除了你有一个可怕的编辑器 – 在这种情况下，得到一个新的）

我个人编码我的CSS是这样的： 

 * { /* css */ } body { /* css */ } #wrapper { /* css */ } #innerwrapper { /* css */ } #content { /* css */ } #content div { /* css */ } #content span { /* css */ } #content etc { /* css */ } #header { /* css */ } #header etc { /* css */ } #footer { /* css */ } #footer etc { /* css */ } .class1 { /* css */ } .class2 { /* css */ } .class3 { /* css */ } .classn { /* css */ }

在一行上保持规则允许我快速浏览一个文件，看看有什么规则。 当他们扩大时，我觉得这太辛苦了，试图找出适用的规则。

我尝试了一些不同的策略，我总是回到这种风格： 

 .class {border: 1px solid #000; padding: 0; margin: 0;}

当谈到大量的声明时，这是最友好的。

Snook先生几乎在四年前写了这个:) 。

有许多格式化你的CSS的公认的方法。 它最终取决于你自己写的最舒服的内容，但这些将帮助你pipe理更复杂的项目。 这并不重要，但我倾向于使用BEM和SMACSS的组合。

BEM（块，元素，修饰符）

BEM是一个非常有用，function强大且简单的命名约定，可使您的前端代码更易于阅读和理解，易于使用，易于扩展，更强大，更明确，而且更严格。

块

独立实体本身是有意义的，比如： 

 header, container, menu, checkbox, input

元件

块的一部分，没有独立的意义。 它们在语义上与其块相关联： 

 menu item, list item, checkbox caption, header title

修改

在块或元素上的标志。 使用它们来改变外观或行为： 

 disabled, highlighted, checked, fixed, size big, color yellow

OOCSS

OOCSS的目的是鼓励代码重用，并最终使更快，更有效的样式表更易于添加和维护。

OOCSS基于两个主要原则：

  1. 从皮肤分离结构

这意味着将重复的视觉特征（如背景和边框样式）定义为单独的“皮肤”，您可以将其与各种对象进行混合搭配，从而在不需要太多代码的情况下获得大量的视觉效果。 查看模块对象及其外观。

  1. 容器和内容的分离

本质上，这意味着“很less使用位置相关的样式”。 一个物体应该看起来一样，不pipe你放在哪里。 因此，不要使用.myObject h2 {…}来创build具体的样式，而应该创build并应用描述问题的类。 这给了你以下的保证：（1）所有未分类的s看起来都一样; （2）具有类别类的所有元素（称为mixin）看起来都是一样的; 和3）你不需要创build一个覆盖风格的情况下，当你真的想让.myObject h2看起来像正常。

SMACSS

SMACSS是检查您的devise过程的一种方式，也是将这些僵化的框架纳入灵活的思维过程的一种方式。 这是一个尝试，logging使用CSS时一致的网站开发方法。

SMACSS的核心是分类。 通过对CSS规则进行分类，我们开始看到模式，并可以为每个模式定义更好的实践。

有五种types： 

 /* Base */ /* Layout */ /* Modules */ /* State */ /* Theme */

基础包含重置和默认元素样式。 它也可以具有控件的基本样式，如button，网格等，在特定情况下可以在文档中稍后重写。

布局将包含所有的导航，面包屑，站点地图等。

模块包含区域特定的风格，如联系表格样式，主页瓦片，产品列表等等

State包含状态类，如isSelected，isActive，hasError，wasSuccessful等。

主题包含与主题相关的任何样式。

有太多的细节在这里，但也看看这些其他人：

  • SuitCSS
  • AtomicCSS （不是primefacesdevise）
  • oCSS （有机CSS）

分解常见的风格。 不是那些恰好相同的样式，相同的样式 – 改变一个select器的样式可能意味着你会想改变另一个样式。 我在另一篇文章中提供了这种风格的例子： 在CSS文件中创build一个variables用于CSS文件 。

除此之外，团体有关的规则在一起。 并将您的规则分成多个文件…除非每个页面实际上需要每个规则。

我按照这个顺序去

  1. 一般的风格规则，通常应用于裸露的元素（a，ul，ol等），但也可以是一般类（.button，.error）
  2. 适用于大多数/所有页面的页面布局规则
  3. 单独的页面布局规则

对于适用于单个页面或小型分组页面的任何样式规则，我会将主体设置为一个id和一个类，以便轻松定位特定的页面。 id是文件的基本名称，而类是它所在的目录名称。

由于实际的顺序是你的CSS如何应用的重要组成部分，所以继续使用“按字母顺序排列”的build议似乎有点愚蠢。

一般而言，您想要将项目按其影响的页面区域分组在一起。 例如，首先影响所有内容的主要样式，首先是页眉和页脚样式，然后是导航样式，然后是主要内容样式，然后是次要内容样式。

在这一点上，我会避免分成多个文件，因为维护起来可能会比较困难。 （当您打开六个CSS文件时，要保持级联顺序非常困难）。 但是，如果仅将样式应用于页面的子集，我肯定会开始将样式移动到不同的文件中，例如，当页面实际上包含表单时，表单样式只能链接到页面。

CSS文件caching在客户端上。 所以最好将所有样式保存在一个文件中。 但是在开发时，我发现根据域来构buildCSS是很有用的。

例如： design.css ， text.css ， text.css等等。 当我发布最终产品时，我将所有样式混合成一个文件。

另一个有用的提示是将重点放在规则上，而不是样式上。

而： 

 ul li { margin-left: 10px; padding: 0; }

看起来不错，当你拥有100行代码时，find规则并不容易。

相反，我使用这种格式： 

 rule { property: value; property: value; } rule { property: value; property: value; }

我曾经为此一直担心，但萤火虫来救援。

这些日子，看看你的风格如何通过Firebug相互关联，并从那里找出需要做的事情就容易多了。

当然，一定要确保有一个合理的结构，将相关的风格分组在一起，但不要太过分。 Firebug让事情变得如此简单，以至于你不必担心在前面做出完美的CSS结构。

这是我做的。 我有一个没有指示的CSS索引页面，它调用不同的文件。 这里是一个简短的例子： 

 @import url("stylesheet-name/complete-reset.css"); @import url("stylesheet-name/colors.css"); @import url("stylesheet-name/structure.css"); @import url("stylesheet-name/html-tags.css"); @import url("stylesheet-name/menu-items.css"); @import url("stylesheet-name/portfolio.css"); @import url("stylesheet-name/error-messages.css");

它从一个完整的重置开始。 下一个文件定义了调色板以便于参考。 然后，我devise了确定布局，页眉，页脚，列数，适合的位置等的主要<div/> s。html标签定义<body/> ， <h1/> ， <p/>吨等…接下来是网站的具体部分。

这是非常scalabale和非常清楚。 find更改的代码和dd新的部分更友好。

ITCSS

哈里·罗伯茨（CSS Wizardry）

定义全局命名空间和级联，并有助于保持select器特异性低。

结构体

前两个只适用于使用预处理器的情况。

  1. （设置）
  2. （工具）
  3. generics
  4. 分子
  5. 对象
  6. 组件
  7. 王牌

通常我这样做：

  1. <link rel="stylesheet" href="css/style.css">

  2. 在style.css中我@import以下内容： 

     @import url(colors.css); @import url(grid.css); @import url(custom.css); + some more files (if needed)

  3. 在colors.css我@import以下（使用CSS自定义属性时）： 

     @import url(root/variable.css);

一切都是为了便于获取代码的任何部分进行编辑。 如果有帮助，我会很高兴。

Interesting Posts

CSS：当没有固定大小的div已知时，垂直alignmentdiv

获取元素的实际浮点宽度

如何在Firebug中查看打印媒体CSS？

省略号用于在下拉框中溢出文本

如何alignment标签和textarea？

CSS – 等高度列？

弹性框：将最后一行alignment到网格

CSS隐藏所有具有匹配的SRC属性的图像

实际表与比较 Div表

两个Div，彼此相邻，然后与响应变化堆叠