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

Question 1

这个问题是关于在.css文件中组织实际的CSS指令本身。在开发一个新页面或一组页面时，通常只将手工指令添加到.css文件中，尝试在可能的时候进行重构。一段时间后，我有几百（或几千）行，调整布局时很难找到所需的内容。

有人对如何组织指令有建议吗？

我是否应该尝试自上而下地模仿DOM？
我是否应该在功能上进行组织，将支持UI相同部分的元素的指令放在一起？
我应该按选择器按字母顺序对所有内容排序吗？
这些方法的某种组合？

此外，在将一个文件拆分成多个单独的文件之前，我应该在一个文件中保留多少CSS是否有限制？说1000行吗？还是将整个事情放在一个地方总是一个好主意？

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

Question 2

看一下以下三个幻灯片分享演示：

首先，也是最重要的是，记录您的CSS。无论您使用什么方法来组织CSS，都要保持一致并记录下来。在每个文件的顶部描述该文件中的内容，也许提供一个目录，也许引用易于搜索的唯一标记，以便您在编辑器中轻松跳转到这些部分。

如果您想将CSS拆分为多个文件，则一定要这样做。Oli已经提到额外的HTTP请求可能很昂贵，但是您可以兼得两者。使用某种构建脚本将文档充分的模块化CSS发布到压缩的单个CSS文件中。在锐压缩机可以压缩帮助。

与到目前为止其他人所说的相反，我更喜欢将每个属性写在单独的行上，并使用缩进对相关规则进行分组。例如，按照Oli的示例：

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

#header {
    /* css */
}
    #header etc {
        /* css */
    }

这使得跟踪文件结构变得容易，尤其是在组之间留有足够的空格和清晰标记的注释时（尽管不那么容易快速浏览）并且易于编辑（因为您不必费一番CSS来写每个规则）。

了解并使用级联和特异性（因此，按字母顺序对选择器进行排序是正确的）。

是否将CSS拆分为多个文件，以及将文件拆分为哪些文件，取决于站点和CSS的大小和复杂性。我至少总是有一个reset.css。如果站点导航菜单变得有点复杂，并且如果我有大量的CSS来样式化表单layout.css，nav.css则通常会伴随着一般的页面布局forms.css。除此之外，我还是自己搞清楚。可能我colors.css和type.css/fonts.css拆断的颜色/图形和排版，base.css为所有的HTML标签提供完整的基本样式...

Question 3

我倾向于这样整理我的CSS：

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

Question 4

但是，您发现它最容易阅读！

认真地说，您将获得十亿个建议和五个建议，但您只会喜欢几种方法。

我会说一些话：

将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 */ }

将规则保持在一行上可以让我快速浏览文件，并查看其中有哪些规则。当它们扩展时，我发现它太像努力工作，试图找出正在应用的规则。

Question 5

有许多公认的格式化CSS的方法。最终取决于您自己感觉最舒适的编写，但是这些将帮助您管理大型复杂项目的CSS。没关系，但是我倾向于结合使用BEM和SMACSS。

BEM（块，元素，修饰符）

BEM是一种非常有用，功能强大且简单的命名约定，它使您的前端代码更易于阅读和理解，更易于使用，更易于扩展，更健壮和明确，并且更加严格。

块

具有独立意义的独立实体，例如：

header, container, menu, checkbox, input

元件

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

menu item, list item, checkbox caption, header title

修饰符

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

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

OOCSS

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

OOCSS基于两个主要原则：

从皮肤分离结构

这意味着将重复的视觉特征（例如背景和边框样式）定义为单独的“皮肤”，您可以将它们与各种对象混合搭配，从而无需太多代码即可实现大量的视觉多样性。请参见模块对象及其外观。

容器和内容物的分离

本质上，这意味着“很少使用与位置相关的样式”。无论放置在何处，对象都应该看起来相同。因此，与其创建.myObject h2 {...}样式的特定样式，不如创建并应用描述该问题的类。这样可以保证：（1）所有未分类的s看起来都一样；（2）所有具有类别类的元素（称为混合）将看起来相同；和3）当您确实希望.myObject h2看起来像正常的情况下，无需为这种情况创建替代样式。

SMACSS

SMACSS是检查您的设计过程的一种方法，也是将那些刚性框架纳入灵活的思想过程的一种方法。尝试记录使用CSS时采用一致的网站开发方法。

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

有五种类型的类别：

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

基本包含重置和默认元素样式。它还可以具有按钮，网格等控件的基本样式，这些样式可以在以后的特定情况下在文档中覆盖。

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

模块包含特定于区域的样式，例如联系表单样式，主页磁贴，产品列表等，等等。

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

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

这里有太多要详细说明的内容，但也请看一下其他内容：

西装CSS
AtomicCSS（不是Atomic设计）
oCSS（有机CSS）

Question 6

我接受这个命令：

通用样式规则，通常适用于裸元素（a，ul，ol等），但它们也可以是通用类（.button，.error）
页面布局规则适用于大多数/所有页面
个别页面布局规则

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

Question 7

我尝试了许多不同的策略，但我总是回到这种风格：

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

当涉及大量声明时，这是最友好的。

斯努克先生差不多在四年前就写过这句话：）。

Question 8

排除常见样式。没有风格，恰好是相同的，那是款式预期是一样的-在转变作风的一个选择可能意味着你要改变对方为好。我在另一篇文章中介绍了这种样式的示例：在CSS文件中创建一个变量以在该CSS文件中使用。

除此之外，将相关规则组合在一起。并将您的规则分成多个文件...除非每个页面实际上都需要每个规则。

Question 9

由于实际排序是CSS应用方式的重要组成部分，因此继续“字母顺序”建议似乎有些愚蠢。

通常，您希望将项目按它们影响的页面区域进行分组。例如，影响所有内容的主要样式首先出现，然后是页眉和页脚样式，然后是导航样式，然后是主要内容样式，然后是次要内容样式。

此时，我将避免分成多个文件，因为它可能更难以维护。（当您打开六个CSS文件时，很难将层叠顺序保持在头脑中）。但是，如果将样式仅应用于页面的子集，我肯定会开始将样式移动到不同的文件，例如，当页面实际包含表单时，表单样式仅链接到页面。

Question 10

我曾经不停地担心这个问题，但是Firebug救了出来。

如今，查看样式如何通过Firebug相互关联并从那里找出需要做的事情要容易得多。

当然，一定要确保有一个合理的结构将相关样式组合在一起，但不要太过分。Firebug使事情变得更容易跟踪，您不必担心要预先构建完美的CSS结构。

Question 11

这是我的工作。我有一个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");

它从完全重置开始。下一个文件定义了调色板以便于参考。然后，我的风格主要<div/>决定布局，页眉，页脚，列数，他们适应，等等HTML标签definses小号<body/>，<h1/>，<p/>，T等..接下来是该网站的特定部分。

这是非常标量，非常清楚。查找要更改的代码并添加到dd新节要友好得多。

Question 12

CSS文件缓存在客户端上。因此，将所有样式保存在一个文件中是一个好习惯。但是在开发时，我发现根据域来构造CSS很有用。

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

另一个有用的技巧是将可读性集中在规则上，而不是样式上。

而：

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

看起来不错，找到100行代码后，要找到规则并不容易。

相反，我使用这种格式：

rule { property: value; property: value; }

rule { property: value; property: value; }

Question 13

ITCSS

由哈里·罗伯茨（Harry Roberts）（CSS巫术）

定义全局名称空间和级联，并有助于保持选择器的低特异性。

结构体

前两个仅在使用预处理器时适用。

（设置）
（工具）
泛型
元素
对象
组件
特朗普

Question 14

通常我这样做：

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

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

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

在colors.css我@import下面（使用CSS自定义属性时）：
```
@import url(root/variable.css);
```

一切都井井有条，易于获取代码的任何部分进行编辑。如果能以某种方式帮助我，我会很高兴。