CSS方法论（一）

时间：2023-03-30 23:27:52 CSS

写CSS会遇到什么问题？其实CSS很容易写，只要知道CSS的语法就可以写，而且通过各种学习，也可以做出非常漂亮的页面。对于精通编写网页的人来说，将设计图变成网页是非常容易的。但是在中/大型项目中，你经常遇到的问题不是网页怎么写，而是：在前端框架中引入UI框架是否能保证你的风格与框架不冲突，如何解决它？多人协作带来的问题如何提高你的风格的可维护性你的风格能否复用，如何提高幸福感甚至个人，如何让自己的代码更优雅，让自己成长更多，而不仅仅是写代码.CSSMethodology早在几年前，社区就根据编写CSS遇到的各种问题提出了一些方法论：模块化CSS的方法。起源。由NicoleSullivan于2009年根据她在雅虎的工作提出。面向对象对于后端开发者来说可能比较熟悉，那么什么是CSS中的面向对象呢？面向对象：把数据和对数据的操作方法放在一起作为一个相互依赖的整体——对象。将相似对象的共性抽象出来形成一个类。类中的大部分数据只能通过该类的方法进行处理。类通过简单的外部接口与外界发生联系，对象之间通过消息进行通信。程序流程由用户在使用中决定。CSS中的对象是可重用的样式规则。基本上，CSS“对象”是一种重复的视觉模式，可以抽象成一个独立的HTML、CSS片段，可能还有JavaScript。然后可以在整个站点中重复使用该对象。--OOCSSwiki举个简单的例子，在一个网站中，很多页面都需要用到按钮，那么根据oocss的定义我们应该怎么做呢？在样式中添加一个btn类，然后网站中的所有按钮都会使用这个样式。这个btn是一个对象。Button在示例中我们定义了一个btncss类。那么这个css类就是一个对象。熟悉面向对象的朋友一定知道，哦，我们封装了按钮对象。所以以后在网站中使用按钮时，直接使用btn类即可。接下来，我们来了解一下OOCSS包括两个原则：容器与内容分离，结构与皮肤分离，以及OOCSS的其他特点：使用类名扩展基本对象，坚持语义命名方式，将容器与结构分离。通常我们在写CSS的时候，通常会根据Html元素的位置来指定样式，比如：

List1
List2
List3

.navulli{...}在OOCSS中，我们的样式不应该根据元素的位置来判断对象的样式。相反，您应该为元素定义自己的样式，例如：

List1列表2列表3

.list{...}.list-item{...}也就是说，我在网页的任何地方使用时都不需要考虑列表的上下文，列表的样式在任何情况下都不应该改变。内容和风格的分离现在我们遇到了一个新的问题。之前我们定义了一个btn对象，如果我想给网页添加一个红色的按钮怎么办？在学习oocss之前，我们可能会说改个样式就可以了，或者加个红色对象；.btn{填充：4px8px;背景色：#bbb；颜色：#fff;}.red-btn{填充：4px8px;背景色：红色；color:#fff;}这个修改确实有一个红色的按钮，但是有什么问题吗？我发现我写了padding:4px8px;和颜色：#fff；两次。我现在想要绿色、蓝色、橙色甚至更大的按钮呢？OOCSS提出了它的核心原则之一：内容和风格的分离。他把对象设置为基本样式，如果这个对象有各种样式，我们通过添加皮肤的方式给它添加样式。.btn{内边距：4px8px；背景色：#bbb；color:#fff;}.red{background-color:red;}button所以我们要红色按钮出来了，你想要绿色，蓝色等等随便你...使用类名来扩展基础对象所以在这个例子中，我们可以看到我们使用了一个红色按钮，但是我们会发现一个问题，如果我们写一个标签时我们希望它的字体是红色的，如果我们不注意，样式可能会冲突。labelbutton我是红标签在OOCSS中提倡使用其基础类来扩展对象的皮肤姓名。.btn{...}.btn-red{...}.label{...}.label-red{...}这样我们就可以一眼看出我们的扩展样式对应的是哪个对象。它还减少了样式冲突。坚持语义命名方法OOCSS也提倡使用语义命名方法。这样做有什么好处？我们可以根据名称定义皮肤的使用场景，在特定的场景下使用特定的皮肤，这样我们就不用担心在网站中乱用颜色了。.btn{...}.btn-edit{background-color:blue;}.btn-delete{background-color:red;}总结如果对前端比较了解的同学可以了解一下，其实我们经常可以使用这个方法，大名鼎鼎的Bootstrap就是用的这个方法。这种方法是为了使您的CSS代码更加灵活、可重用、可维护和可扩展。BEM(Block-Element-Modifier)什么是BEM？BEM代表块（Block）、元素（Element）、修饰符（Modifier），是Yandex团队提出的一种前端命名方法论。BEM是一种允许您快速开发网站并维护多年的技术。--前期说明BEM是一种命名方式，可以帮助你在前端开发中实现组件的复用和代码共享。BEM是一种严格约定的命名约定，通过它我们可以解决我们在编写CSS时遇到的问题。BEM将网页中的元素分为块、元素、修饰符/*书写规范*/.block{...}/*块名*/.block__element{...}/*元素块名+__+元素name*/.block--modifier{...}/*modifierblockname+--+elementname*/.block块：表示更高层次的抽象或组件。block__element元素：代表.block的后代，整体.block--修饰符，用来组成一个完整的.block修饰符：代表不同状态或者不同版本的.block块（Block）我们可以把块理解为一个组件或者模块一个网络应用程序。特点：嵌套构造块可以嵌套到任何其他块中。例如，标题可以包含徽标、搜索表单表单和登录登录。自由放置块可以在页面内、页面之间或项目之间的任何位置移动。块被实现为独立的实体，这使得更改块在页面上的位置成为可能，并确保一切正常运行和看起来正确。可重用一个接口可以包含同一个块的多个实例。元素（Element）大多数组件并不是由多层HTML嵌套组成，所以元素就是这个组件内部的各级元素。这里需要注意的是，无论HTML中block是什么结构，在BEM规则中，block下的所有元素都属于block。

列表1

列表2

列表3

list-item和list-icon都属于blocklist。修改器类似于OOCSS中的皮肤，属于不同状态的组件或者不同版本的组件。其他特性块必须有一个“名称”（一个CSS类）才能被CSS规则使用为什么不使用ID选择器或元素选择器？类允许无限重用，而ID只允许在一个页面中使用一次。元素有自己的含义，不应与组件交互。永远不要链式命名。前面说过，元素应该只属于块，所以elements的名字只能是block--element，而不是block--element1--element2。尽量避免子选择器将样式与HTML结构解耦，减少了修改HTML导致的样式无法显示，同时也减少了HTML修改导致的样式重写解决了CSS特异性的问题，所有样式都由一个类定义选择器。但是很难解决BEM解决的问题CSS样式全局性导致的样式冲突问题多人协作的命名问题解决级联问题，保持CSS的优先级相对平坦CSS模块化使CSS更可重用SMACSSSMACSS是JonathanSnook于2011年在雅虎工作时提出的。SMACSS是指CSS的可扩展和模块化架构。我们可以把SMACSS看作是OOCSS和BEM的扩展。刚才讲了BEM，然后我们把我们页面的样式变成了组件，但是在大型网站的开发中，这些组件还是非常庞大的，所以在SMACSS中，就提出了CSS分类的概念。SMACSS的分类在SMACSS中，认为CSS应该按照以下五个分组类别进行分类：Base（基本规范）：在任何情况下，页面元素的默认外观。这里的样式只会设置标签元素本身，不会出现任何类或id，但可能有属性选择器或伪类。布局（layoutspecification）：布局是一个网站的基础，无论是左还是右，居中，甚至是其他任何布局，要实现页面的基本浏览功能，布局是必不可少的。使用l-/layout-作为前缀。模块（modulespecification）：基本思想类似于BEM。使用m-/module-作为前缀。状态（statespecification）：元素在特定状态下的外观。但是与OOCSS分离Skin的方式不同，SMACSS抽取了更高层次的样式类以获得更强的复用性。使用is-/has-作为前缀。Theme（主题规范）：页面主题的外观。使用t-/theme-作为前缀等特性命名方式，借鉴BEM命名规范，也提倡最小附件深度，即尽量不使用子选择器，保持CSS扁平化AtomicCSS（原子CSS）由雅虎提出并应用于雅虎官方网站。刚才我们讲了几种方法论，都提到了复用性，所以atomicCSS就是把复用性发挥到极致。原子设计（atomicthinking）的灵感来自2013年网页设计师布拉德·弗罗斯特（BradFrost）的化学：原子（Atoms）结合形成分子（Molecures），分子进一步结合形成有机体（Organisms）。Brad将这个概念应用到界面设计中，我们的界面是由一些基本元素组成的。JoshDuck的“HTML元素周期表”（下）完美地说明了我们所有的网站、应用程序、内部网、hoobadyboops等等都是如何由相同的HTML元素组成的。Atoms（原子）：网页的基本元素。分子：由原子构成的简单UI组件。有机体：由原子和分子组成的相对复杂的UI结构。模板：对以上元素进行排版，展示设计的底层内容结构页面：将实际内容（图片、文章等）封装在一个特定的模板中，一个页面就是一个模板的具体实例。AtomicCSS理解原子设计，那么为什么atomicCSS将可重用性发挥到了极致。让我们举个例子。GitHub上有一个名为Atomizer的开源ACSS工具。我们用它来看

CSS方法论（一）

Grid

InlineBlock

弹性