BEM (Block, Element, Modifier)

Question

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

有没有人有关于如何组织指令的建议？

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

另外，在将文件分成单独的文件可能是一个好主意之前，我应该在一个文件中保留多少CSS？说，1000行？或者将整个事物放在一个地方总是一个好主意？

相关问题：What's the best way to organize CSS rules?

Answer 1

看看这三个幻灯片共享演示文稿开始：

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

如果您想将CSS分成多个文件，请务必这样做。 Oli已经提到额外的HTTP请求可能很昂贵，但您可以充分利用这两个方面。使用某种构建脚本将已记录良好的模块化CSS发布到压缩的单个CSS文件中。 YUI Compressor可以帮助压缩。

与其他人到目前为止所说的相比，我更喜欢在单独的一行上编写每个属性，并使用缩进来对相关规则进行分组。例如。跟随Oli的例子：

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

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

这样可以很容易地遵循文件结构，特别是有足够的空格和组之间清晰标记的注释（虽然不容易快速浏览）并且易于编辑（因为你不必涉及单个长的每条规则的CSS行。）

理解并使用cascade和specificity（因此按字母顺序对选择器进行排序是正确的。）

我是否将我的CSS分成多个文件，以及哪些文件取决于网站和CSS的大小和复杂程度。我总是至少有一个reset.css。对于一般页面布局，layout.css往往伴随着nav.css，如果网站导航菜单有点复杂，forms.css如果我有足够的CSS来设置表单的样式，则colors.css。除此之外，我还在自己搞清楚。我可能会type.css/fonts.css和base.css拆分颜色/图形和排版，{{1}}为所有HTML标记提供完整的基本样式...

Answer 2

我倾向于像这样对我的CSS进行讨价还价：

reset.css
base.css：我为页面的主要部分设置了布局
1. 一般风格
2. 标题
3. 导航
4. 含量
5. 页脚
additional- [页面名称] .css：仅在一个页面中使用的类

Answer 3

但是你觉得最容易阅读！

说真的，你会得到十亿和五个建议，但你只会喜欢几种方法。

我会说些些事情：

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

在一行上保留规则允许我非常快速地浏览文件并查看有哪些规则。当它们被扩展时，我发现它太过于努力找出正在应用的规则。

Answer 4

有许多公认的CSS格式化方法。它最终取决于您感觉最舒适的写作，但这些将有助于管理您的CSS以进行更大更复杂的项目。 并不重要，但我倾向于使用BEM和SMACSS的组合。

BEM (Block, Element, Modifier)

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）所有未经过查看的人都会看到相同; （2）具有类别类的所有元素（称为mixin）会看起来一样; 3）您不需要创建覆盖样式对于你确实希望.myObject h2看起来像的情况正常。

SMACSS

SMACSS是一种检查设计过程的方法，也是一种将刚性框架融入灵活思维过程的方法。这是尝试在使用CSS时记录一致的站点开发方法。

SMACSS的核心是分类。通过分类CSS   规则，我们开始看到模式，并可以定义更好的实践   这些模式中的每一种。

有五种类别：

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

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

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

<强>模块包含区域特定样式，如联系表单样式，主页面板，产品列表等等。

<强>国家包含状态类，如isSelected，isActive，hasError，wasSuccessful等等。

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

这里有太多细节，但也要看看其他人：

SuitCSS
AtomicCSS（非原子设计）
oCSS（有机CSS）

Answer 5

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

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

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

Mr. Snook wrote about this almost four years ago :)

Answer 6

我按照这个顺序去了：

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

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

Answer 7

排除常见风格。不是恰好相同的样式，意图的样式是相同的 - 改变一个选择器的样式可能意味着你也想要改变另一个。我在另一篇文章中举了一个这种风格的例子： Create a variable in CSS file for use within that CSS file

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

Answer 8

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

通常，您希望按照所影响的页面区域将项目组合在一起。例如。影响一切的主要样式首先是页眉和页脚样式，然后是导航样式，然后是主要内容样式，然后是次要内容样式。

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

Answer 9

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; }

Answer 10

这是我的工作。我有一个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标签定义<body/>，<h1/>，{{ 1}}，t等...接下来是网站的特定部分。

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

Answer 11

我曾经不停地担心这一点，但Firebug来救援。

现在，通过Firebug查看您的样式如何相互关联并从中找出需要完成的工作要容易得多。

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

Answer 12

ITCSS

Harry Roberts（CSS Wizardry）

定义全局命名空间和级联，并帮助保持选择器特异性低。

<强>结构

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

（设置）
（工具）
泛型
元素
对象
部件
王牌

Answer 13

通常我会这样做：

<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);
```

一切都井井有条，易于编辑任何代码部分。如果它有所帮助，我会很高兴。

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

13 个答案:

BEM (Block, Element, Modifier)

阻止

元素

改性剂

OOCSS

SMACSS

ITCSS