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

Question

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

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

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

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

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

Answer 1

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

• 美丽的可维护CSS
• 可维护的CSS
• 高效,可维护,模块化的CSS

首先,最重要的是,记录您的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.这往往伴随着layout.css一般的页面布局,nav.css如果网站导航菜单有点复杂,forms.css如果我有足够的CSS来设计我的表单.除此之外,我还在自己搞清楚.可能我colors.css和type.css/fonts.css拆断的颜色/图形和排版,base.css为所有的HTML标签提供完整的基本样式...

Answer 2

我倾向于像这样讨价还价我的css:

1. reset.css
2. base.css:我为页面的主要部分设置了布局
   1. 一般风格
   2. 头
   3. 导航
   4. 内容
   5. 页脚
3. 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(块,元素,修饰符)

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基于两个主要原则:

1. 从皮肤分离结构

这意味着将重复的视觉特征(如背景和边框样式)定义为单独的"皮肤",您可以将它们与各种对象混合搭配,从而在没有太多代码的情况下实现大量的视觉变化.查看模块对象及其外观.

2. 容器和内容的分离

从本质上讲,这意味着"很少使用依赖于位置的样式".无论你把它放在哪里,一个物体应该看起来都一样.因此,不是使用.myObject h2 {...}设置特定样式,而是创建并应用描述相关问题的类,例如.这使你得到以下保证:(1)所有未被破坏的s看起来都是一样的; (2)具有类别类(称为mixin)的所有元素看起来都是一样的; 3)当你真正想要.myObject h2看起来像正常时,你不需要为这种情况创建一个覆盖样式.

SMACSS

SMACSS是一种检查设计过程的方法,也是一种将这些僵化框架融入灵活思维过程的方法.它是尝试在使用CSS时记录一致的站点开发方法.

SMACSS的核心是分类.通过对CSS规则进行分类,我们开始看到模式,并可以围绕这些模式定义更好的实践.

有五种类别:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

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

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

模块 包含特定区域的样式,如联系表单样式,主页样式,产品列表等.

State 包含状态类,如isSelected,isActive,hasError,wasSuccessful等.

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

这里有太多细节,但也看看这些其他:

• SuitCSS
• AtomicCSS(非原子设计)
• oCSS(有机CSS)