看一些CSS方法

在大型、复杂、快速迭代的系统中，CSS是出了名的难以管理。一个原因是CSS缺乏内置的作用域机制。CSS中的一切都是全局的。

这意味着您所做的任何更改都有可能级联和改变UI中不相关部分的表示。扩展CSS语言，也就是CSS预处理器，比如Sass，少和Stylus通过提供使编写CSS更容易的功能使事情变得更简单。

但在我看来，即使是这些扩展的CSS语言，也不能真正解决可伸缩性问题。在CSS拥有自己的本地作用域机制之前，我们需要设计自己的系统来将样式锁定到HTML文档的特定部分。CSS方法是解决方案。

在这篇文章中，我们将看看这些CSS方法:

• 面向对象CSS (OOCSS)
• 块、元素、修饰符(BEM)
• 可扩展和模块化的CSS体系结构(SMACSS)
• 西装的CSS
• 系统的CSS

充分披露:我是系统CSS的创建者。CSS方法是一种正式的、文档化的系统，用于编写CSS，使我们能够将前端开发、维护和扩展为一组小的、孤立的模块。而不是一大块不可分割的代码。采用CSS方法——即使它是你自己创建的——将使你更容易设计和迭代你的网页设计项目，无论规模和复杂性如何。

相关:大型网站的CSS开发每种CSS方法针对CSS可伸缩性/可维护性问题提供了一组略有不同的解决方案。CSS方法通常会定义以下方面的指导方针:

• CSS和HTML最佳实践
• 类和id命名约定
• CSS样式规则的排序和分组
• 代码格式化

没有“最好的”CSS方法。不同的方法适用于不同的个人/团队/项目。

希望通过研究一些现有的CSS方法可以帮助您找到适合自己需求的方法。或者，它可能会启发您创建自己的自定义css创作指南。

面向对象CSS (OOCSS)

Nicole Sullivan的面向对象CSS(简称OOCSS)于2009年发布。它确实是第一个被广泛采用的CSS方法。它在今天仍然具有巨大的影响力。OOCSS提倡将结构与皮肤分离。

该方法明确区分了内容及其容器。在OOCSS中，样式规则只使用CSS类选择器编写。

允许的例子

例如，你的风格按钮元素可以通过你给的两个类来设置:

• .button-提供按钮的基本结构
• .grey-btn-应用颜色和其他视觉属性

CSS

.button{box-sizing: border-box;高度:50 px;宽度:100%;｝.grey-btn{背景:#EEE;边框:1px实心#DDD;Box-shadow: rgba(0,0,0,0.5) 1px 1px 3px;颜色:# 555;｝

超文本标记语言

<按钮类= "按钮grey-btn" >

OOCSS方法的一个目标是在各种样式规则中减少相同属性的重复。

换句话说，OOCSS可以帮助我们维护DRY样式表。该方法试图通过使用大量小型的、模块化的、专业的CSS类来实现这一目标。极少的样式属性是通过类型选择器应用的(例如。

h1，div而且身体）.

相反的例子

不鼓励使用后代选择器。例如:CSS

/*在OOCSS中不鼓励使用后代选择器*/.wrapper .blog-post .button{…
｝

这样，HTML元素的表示就不会依赖于它们在特定上下文或DOM结构中使用。OOCSS方法的伟大之处在于它促使作者充分利用CSS的级联行为，而不是试图用高特异性的选择器将其锁定。相关:CSS的特殊性是如何工作的我们鼓励作者尽可能重用现有的样式规则，而不是创建新的样式规则。

我们还鼓励通过使用新类指定额外的CSS属性来扩展样式规则，而不是修改或覆盖现有的CSS属性。

相反的例子

假设我们想给无序列表元素的第一个列表项赋予不同的颜色。这是一种方法:超文本标记语言

<！——反例——>
 
合并我的CSS文件
 
运行CSS Lint
 
缩小我的样式表
 

CSS

/*反例*/.to{颜色:#FFF;background - color: # 000;} .to li:first-child {color: #FF0000;｝

允许的例子

为了使我们的CSS更加模块化和灵活，并避免后代选择器，上面的反例可以这样重写:超文本标记语言

<！——oocss——> 
 类= " first-to-do-item ">合并我的CSS文件 
运行CSS Lint
 
缩小我的样式表
 

CSS

/* oocss */.to{颜色:#FFF;background - color: # 000;｝.first-to-do-item{color: #FF0000;｝

OOCSS的主要缺点是您最终可能会有大量的类。

这可能很难维护和管理。而且，在我看来，面向对象编程的概念——OOCSS的灵感来源——并不适合CSS。但这并不是说OOCSS的原则是无效的。

相反，OOCSS是一种常识性的CSS方法论，它为大规模CSS开发带回了完整性。

块、元素、修饰符(BEM)

Block, Element, Modifier -通常被称为BEM -是由Yandex(俄罗斯的谷歌)的开发团队设计的CSS类命名系统。BEM背后的思想是区分履行不同角色的CSS类。

这是通过指定CSS类的角色来实现的。BEM补充了OOCSS，因为OOCSS没有强加任何特定的类命名约定。在边界元术语中，a块是一个独立的、模块化的UI组件。

一个块可以由多个HTML元素组成，甚至可以由多个块组成。块的一个例子可能是您的导航菜单或搜索表单。一个元素是块的组件。

一个元素只有一个用途。例如，如果您有一个导航菜单块，那么它的元素可能是导航菜单的链接，而这些链接可能是列表项的形式(李元素)及连结(一个元素)。一个修饰符是一个CSS类，它更改块或元素的默认表示形式。

这是BEM类命名语法:

• .block
• .block——修饰符
• .block__element
• .block__element——修饰符

相反的例子

考虑下面的例子，登录表单的标记:超文本标记语言

 Username  Password  Sign in 

本示例

下面是上面应用BEM类的标记:超文本标记语言

<形式类= " loginform loginform——错误”> <标签类= " loginform__username loginform__username——错误”> Username   类= " loginform__password "> Password   <按钮类= " loginform__btn loginform__btn——活动”>签到 

的.loginform类是块。的.loginformBlock由三个元素组成:

这三个修饰语是:

BEM命名约定帮助CSS作者遵循OOCSS原则，即使用由相同特定的类选择器组成的扁平选择器层次结构。它还可以帮助OOCSS作者避免深度后代选择器。

相反的例子

所以不是下面的样式规则，它使用三个CSS类选择器…CSS

.loginform .username .error{…｝

本示例

你可以只使用一个类选择器:CSS

.loginform__username—错误{…
｝

BEM是一种非常健壮的类命名约定。它成功地区分了使用类的不同关注点。在标记中很容易看出哪些类是相互关联的。

对边界元理论的一些主观批评有:

• 类名最终可能又长又丑
• 对于没有经验的开发人员来说，命名约定并不直观

就我个人而言，我不认为这是特别强烈的批评。但是，最好有一个像BEM一样健壮的类命名约定，同时也更整洁、更直观。

可扩展和模块化的CSS体系结构(SMACSS)

乔纳森·斯努克出版了一本关于CSS的可伸缩和模块化架构在2011年。缩写为SMACSS。读作“smacks”。这个CSS方法的一个关键思想是我们如何对CSS样式规则进行分类。斯努克提出了五个类别:

H1 {font-size: 32px;} div {margin: 0 auto;} a{颜色:蓝色;｝

.layout-sidebar{宽度:320px;} .l-comments{宽度:640px;｝

.call-to-action button{文本转换:大写;颜色:# FFF200;} .search-form{显示:inline-block;background - color: E1E1E1;｝

.is-hidden{显示:无;} .is-highlighted {color: #FF0000;background - color: # F4F0BB;边框:1px实体#CBBD15;｝

SMACSS提供了比BEM更简单的命名约定。

基本样式没有名称，因为只有类型选择器(h1，p，一个等)用于那些。模块有自己唯一的类名。子组件和变体以其父模块的名称作为前缀。

SMACSS例子

假设我们的布局叫做.l-footer．我们在里面有一个搜索表单模块。用户已经至少提交了一次搜索表单。

这可能是我们的标记:超文本标记语言

SMACSS不鼓励使用后代选择器。Jonathan Snook通过引入一个他称之为适用性深度的概念来解释这一点。这个概念就是通过使用类来精确地定位想要设置样式的元素，从而限制CSS对HTML标记的影响。

西装的CSS

Nicolas Gallagher在2014年推出的SUIT CSS很有趣，因为它结合了一个类似bem的类命名系统和一个CSS预处理器。所以SUIT CSS为我们提供了扩展的CSS语法一个拉Sass, Less或Stylus。SUIT CSS类有五种格式:

• u-utilityName
• ComponentName
• ComponentName——modifierName
• ComponentName-elementName
• ComponentName.is-stateOfName

这个类命名约定强调了以下方面的区别:

• 一般实用程序类
• 独立/模块化UI组件
• 单个元素
• 修饰符

SUIT CSS示例

下面是如何将这种CSS方法应用到登录表单:超文本标记语言

<形式类= " LoginForm LoginForm——错误”> <标签类= " LoginForm-username是必需的”> Username   类= " LoginForm-password "> Password   <按钮类= " LoginForm-button不活动”>签到 

系统的CSS

系统化CSS是我最近开发并发布的一种新的CSS方法。

系统化CSS基于一个CSS创作系统，我在为各种科技初创公司工作的几年时间里对这个系统进行了微调。系统的CSS是我个人编写网页设计的方式。系统化CSS分享了你可以在OOCSS、BEM、SMACSS、SUIT CSS和其他CSS方法中找到的许多原则和思想。

比起现有的CSS方法，系统化CSS是一种更简单的选择:需要记住的命名约定更少，类命名约定更直观。在系统化CSS方法中，开发一个新的网页设计的过程分为四个阶段:

1. 布局
2. 元素
3. 小部件
4. 修饰符

系统CSS实例

超文本标记语言首先，从一系列分段元素中创建一个空的类似线框的布局，例如部分而且div：

其次，我们为HTML元素建立默认表示，这些元素将封装内容并呈现交互式控件。例如标题(h1，h2，h3)、段落(p)，列出(ul而且ol)、表格、表单等等。

第三，我们在设计中识别重复出现的内容模式。我们将这些重复出现的模式捆绑到独立的标记和样式模块中(如果需要，还可以编写脚本)。这些重复出现的内容模式束被称为小部件系统的CSS方法。

系统CSS实例

下面是渲染导航栏和搜索表单的两个小部件的标记:超文本标记语言

<！——导航栏——> .
 
 
对< / > < /李> <李> < a href = "学习/ " >学习< / > < /李> <李> < a href = "扩展/ " >扩展< / > < /李> <李> < a href = "分享/ " >分享< / > < /李> < / ul > < / div ><！——搜索表单——>
 
 Search  Search 
 

 
 
学习< / > < /李> <李> < a href = "扩展/ " >扩展< / > < /李> <李> < a href = "分享/ " >分享< / > < /李> < / ul > < / div >

• 原子设计-使用化学术语和类比(原子、分子和生物体)的设计系统
• DoCSSa- Matthieu Larcher和Fabien Zibi设计的基于sass的CSS方法
• csstyle- Dave Geddes的基于Sass/ postcss的方法论

相关内容

• 5 CSS的标准化编写方法
• 你是否正确使用CSS3 ?
• 一个CSS风格的灵感指南列表

基兰Potts是一个全栈开发人员，专门为互联网初创公司构建定制网站、web应用程序和RESTful web api。访问他的网站:kieranpotts.com。