CSS设计模式

关于web设计的网站

https://www.smashingmagazine.com/

什么是设计模式？

先来看一下比较官方的解释：”设计模式（Design pattern）是一套被反复使用、多数人知晓的、通过分类的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的；设计模式使代码编制真正工程化；设计模式是软件工程的基石脉络，如同大厦的结构同样。”

今天咱们来聊聊CSS的设计模式。

设计模式，这个词汇咱们常见，几乎全部的编程语言都会有几套，但深刻研究的人很少，缘由以下：

1. 彷佛没有太大必要性去强调它，有问题了改一下或者按团队规范来就行；
2. 不去使用一些既有的模式也无伤大雅；
3. 很多人所接触的业务量级尚未达到须要规划和组织的程度，光写布局，写特效，照顾兼容，就够喝一壶的了，没有意识去思考一些方法论的问题。

咱们都会长大，都会慢慢的作更多、更大、更复杂的项目，这个时候，就须要自上而下，全流程的去思考一些问题，后台不说，只讲前端，好比：风格的制定、色调、模块、布局方式、交互方式、逻辑等等，若是再加上团队合做，若再没有一个规划的话，要不了多久，那些看起来没问题的代码，就会暴露出各类问题，模块命名、类的命名、文件的组织、共用模块的提取、代码的复用、可读性、扩展性、维护性。它们看起来只是一些简单的小动做，却须要你看得更远，避免未来出问题须要付出更大的代价，甚至被迫整个项目重构，可谓，功在当代，利在千秋~

既然要对CSS进行设计，那么确定是它自己存在一些问题或者缺陷，其中，一个最明显的就是，它的任何一个规则，都是全局性的声明，会对引入它的页面当中全部相关元素起做用，无论那是否是你想要的。而独立及可组合的模块是一个可维护系统的关键所在。下面，咱们就从多个层面来探讨一下，到底该怎样写CSS，才是更科学的。

从需求出发

分
咱们刚开始学习写字的时候，是不会去考虑，写出来的某句话好很差，文章结构合适不合适，由于咱们是意识不到的。写代码也同样，刚开始，咱们只是去定义规则，能用对了属性，语法正确，把页面实现出来了，就好。慢慢地，就会发现，页面也是有结构的，咱们按照页面的结构去组织代码，会不会更好？好比，分红头部、导航、侧边栏、banner区、主内容区、底部等。

然而这样貌似仍是不够，由于还有一些东西，复用度是很高的，又很差把它归为任何一个固有模块，好比：面包屑、分页、弹窗等，它们不适合被放到某一个固有模块的代码中，就能够单独的分出一段专属的css和js，或许，这就是组件化的由来~

拆
在分了以后，咱们的代码看起来已经比以前好不少了，组织清晰，维护性大幅提升，可是，好像仍是不够，咱们会发现另一些东西，很细小，但复用度也很高，它们一样不适合被放到模块中去，好比，边框、背景、图标、字体、边距、布局方式等等。若是咱们在每一个须要它们的地方，都定义一次，它们会被重复不少次，显然，这背离好的实践，会形成代码冗余和维护困难。因此，咱们须要“拆”。拆过以后会怎样？咱们想在哪里用能够直接加，须要改的时候统一改。

排
通过了“分”、“拆”，咱们的代码结构已经十分清晰，各个内容模块，功能模块，UI模块都乖巧的等待召唤，那么还差什么？是的，还差有序的组织，分类清晰以后，还须要排列有序，从不一样纬度去考量，咱们总能精益求精。举个栗子，咱们可能会看到像这样：

@import “mod_reset.css”;
@import “ico_sprite.css”;
@import “mod_btns.css”;
@import “header.css”;
@import “mod_tab.css”;
@import “footer.css”;

咱们将不一样的部分按照必定的顺序去摆放，能让咱们的代码看起来更加有序，易于维护，同时，有利于进行继承或层叠覆盖。不要小看这一步，看似无关紧要，实际要求比较高的统筹规划能力，能够减小冗余代码和快速定位问题位置等。

从结论出发

除了需求当中一些通用部分，另一些也是须要注意，但不会被正式定义的东西，它们来源于咱们的实践经验，好比：

层级嵌套不要太深

稍微了解一些浏览器渲染原理的都知道，它在解析CSS规则的时候，是从右向左，一层层的去遍历寻找，若是层级太多，必然增长了渲染时间，影响渲染速度。另外，若是选择器层级过多，也就间接反应了，你的HTML结构可能写得不够简洁。

那么具体多少层合适？通常建议是不超过4层，但话又说回来，超过4层会怎样吗？不会有多明显的影响，除非你写到很恐怖的数量，或者项目极其庞杂，可能能看出来影响，其实从咱们平常需求来看，4层之内足能够解决绝大多数问题，故而，是合理的。

避免使用元素选择器

出于两点考虑：

第一点，和上一段提到的相关，在HTML中，有不少经常使用的高频元素，好比，div、p、span、a、ul等，若是，你在多层选择器的最内层使用了元素选择器，那么，在开始寻找时，浏览器就会遍历HTML中的全部该元素，显然，这是没有必要的。

第二点，咱们的需求和代码结构都是存在着潜在变化的，今天写好了一个页面，明天可能就要再加进去一个按钮，再加进去一句话，再加进去一个图标。咱们写好的一个结构，也随时可能被复用到别的结构中去，因此，若是，你使用了元素选择器去定死某个东西，不管是新加进来的东西，仍是被复用的东西加到别的结构里去，都极有可能产生样式的冲突，这个时候，你又不得不写多余的样式进行覆盖修正，或者从新定义类。

因此，出于以上考虑，在具体的代码模块中，尽可能不要使用元素选择器，使用元素选择器的前提是，你彻底的肯定，不会致使出现问题。注意，我用的限定范围是“具体的代码模块”，那么用于定义通用规则的样式，是能够的，也是推荐使用的，好比，reset。也能够是别的地方，这就须要咱们自行考量。

避免使用群组选择器

从现有模式出发

OOCSS——Object Oriented CSS
接触过计算机的应该都知道，OOP——Object Oriented Programming，若是你是第一次接触OOCSS，你会很困惑，难道是“面向对象的CSS”吗？它不是一本真正的编程语言啊，如何面向对象？

OOCSS，最先被说起，是在2009年，它的两大原则是：

separating structure from skin and container from content.

直译过来就是，结构和皮肤分离，容器和内容分离。

即不要把结构和皮肤以及内容进行强耦合，而是相互独立，所要达到的目标是更易复用和组合，能够选择使用，选择引用等。

详细了解连接：https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

SMACSS——Scalable and Modular Architecture for CSS

从实践上说，OOCSS给出了一种值得借鉴的思想，但在代码的组织方面，它并未给出具体的实施方法，从这一点上来讲，SMACSS更进一步。

它的核心是：

一、Base（基础）
基础的样式，就是一些须要最早定义好，针对于某一类元素的通用固定样式。

二、Layout（布局）
布局样式，是跟页面总体结构相关，譬如，列表，主内容，侧边栏的位置、宽高、布局方式等。

三、Module（模块）
模块样式，就是咱们在对页面进行拆的过程当中，所抽取分类的模块，这类的样式分别写到一块儿。

四、State（状态）
页面中的某些元素会须要响应不一样的状态，好比，可用、不可用、已用、过时、警告等等。将这类样式能够组织到一块儿。

五、Theme（主题）
主题是指版面整个的颜色、风格之类，通常网站不会有频繁的较大的改动，给咱们印象比较深的是QQ空间，其余应用的不是不少，因此，这个通常不会用到，但有这样一个意识是好的，须要用到的时候，就知道该怎样规划。

有了以上5点分类策略，咱们的代码组织起来，思路就会很清晰，会安排的颇有序，另外的好处是，能够解决命名难和混乱，之因此有这个问题，主因即是咱们不知道以怎样的标准去定义元素的所属和特色，有了分类以后，咱们不会很随意和混乱的去命名，有了依据，就能更轻松，也不易冲突。

详细了解连接：https://smacss.com/

BEM

严格说来，BEM不是一套有骨有肉的模式，也不只仅局限你在CSS的层面去规划，它是一种怎样去组织、编写代码的思想，并且，看似简单的它，对前端界的影响倒是巨大的。

它的核心以下：

Block（块）、Element（元素）、Modifier（修饰符）

它帮助咱们定义页面中每一部分的级别属性，从某种意义上说，也是一种“拆”。

详细能够到官网去查阅。地址：https://en.bem.info/