• Beautiful Maintainable CSS
• Maintainable CSS
• Efficient, maintainable, modular CSS

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

YUI Compressor 可以帮助压缩。

与其他人到目前为止所说的不同,我更喜欢将每个属性写在单独的一行上,并使用缩进对相关规则进行分组。例如,以奥利为例:

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

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

cascade 和 specificity (所以按字母顺序排列选择器是正确的)。

我是否将CSS拆分为多个文件,以及使用哪些文件取决于站点和CSS的大小和复杂性。我总是至少有一个 reset.css layout.css 对于一般页面布局, nav.css forms.css 如果我有足够的CSS来设计我的表单。除此之外,我自己也还在想办法。我可能有 colors.css 和 type.css/fonts.css 要分离颜色/图形和排版, base.css

1. reset.css
2. base.css:我设置了页面主要部分的布局
   1. 一般风格
   3. 导航
   5. 页脚
3. 附加-[页面名称].css:仅在一个页面中使用的类

然而,你发现它最容易阅读!

但我要说的是:

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

将规则保持在一行可以让我快速浏览一个文件,看看有什么规则。当它们被扩展时,我发现这太像是一项艰苦的工作,试图找出应用了哪些规则。

有许多公认的方法来格式化CSS。最终由您决定您觉得最适合写什么,但这些将有助于管理更复杂的大型项目的CSS。 这并不重要,但我倾向于结合使用边界元法和SMACS。

BEM (Block, Element, Modifier)

块

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) 具有category类的所有元素(称为mixin) 典型的

SMACSS

SMACS是一种检查设计过程的方法,也是一种将那些僵硬的框架融入灵活的思维过程的方法。在使用CSS时,它试图记录一种一致的站点开发方法。

规则,我们开始看到模式,并可以围绕这些规则定义更好的实践 每一种模式。

有五种类型的类别:

/* Base */

/* Layout */

/* Modules */

/* State */

/* Theme */

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

将包含所有的导航,面包屑,网站地图等。

模块

状态 包含状态类,如isSelected、isActive、hasError、wasSuccessful等。

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

• SuitCSS
• AtomicCSS (不是原子设计)
• oCSS

1. 常规样式规则,通常应用于裸元素(a、ul、ol等),但也可以是常规类(.button、.error)
2. 应用于大多数/所有页面的页面布局规则

对于应用于单个页面或小分组页面的任何样式规则,我将把主体设置为id和类,以便于针对特定页面。id是文件的基本名称,类是文件所在的目录名。

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

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

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

预定的 同样,更改一个选择器的样式可能意味着您也要更改另一个选择器。我在另一篇文章中举了一个这种风格的例子: Create a variable in CSS file for use within that CSS file

除此之外,将相关规则组合在一起。并将规则拆分为多个文件。。。除非 每一个 每一个 规则

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

由于实际的排序是CSS应用的一个重要部分,所以继续使用“字母顺序”的建议似乎有点愚蠢。

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

我会避免在此时破坏多个文件,因为维护起来会更困难。(当您打开六个CSS文件时,很难在脑海中保持级联顺序)。但是,如果样式仅适用于页面的子集,我肯定会开始将样式移动到不同的文件,例如,表单样式仅在页面实际包含表单时链接到页面。

我过去常常不停地担心这件事,但萤火虫来救了我。

现在,通过Firebug查看您的风格是如何相互关联的,并从中找出需要做的事情,就容易多了。

这就是我要做的。我有一个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/> <body/> , <h1/> , <p/>

这是非常可缩放的,非常清晰。查找要更改的代码和添加新部分更为友好。

ITCSS

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

结构

前两种方法仅在使用预处理器时适用。

2. (工具)
3. 仿制药
4. 元素
6. 组件
7. 特朗普

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

2. @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);
   

一切都井然有序,代码的任何部分都很容易编辑。 如果能有所帮助,我会很高兴的。