认识达内从这里开始

css是我们在学习web前端编程开发技术的时候会被要求熟练掌握的一个编程知识，下面我们就一起来了解一下，css的设计模式与实现方法都有哪些。

一、设计模式

设计模式，这个词汇我们常见，几乎所有的编程语言都会有几套，但深入研究的人不多，原因如下：

1、似乎没有太大必要性去强调它，有问题了改一下或者按团队规范来就行;

2、不去使用一些既有的模式也无伤大雅;

3、不少人所接触的业务量级还没有达到需要规划和组织的程度，光写布局，写特效，照顾兼容，就够喝一壶的了，没有意识去思考一些方法论的问题。

二、css设计模式方法

1、分

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

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

2、拆

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

3、排

经过了“分”、“拆”，我们的代码结构已经十分清晰，各个内容模块，功能模块，UI模块都乖巧的等待召唤，那么还差什么?是的，还差有序的组织，分类清晰之后，还需要排列有序，从不同纬度去考量，我们总能精益求精。

三、SMACSS的核心

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

它的核心是：

1、Base(基础)

基础的样式，就是一些需要先定义好，针对于某一类元素的通用固定样式。

2、Layout(布局)

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

3、Module(模块)

模块样式，就是我们在对页面进行拆的过程中，所抽取分类的模块，这类的样式分别写到一起。

4、State(状态)

页面中的某些元素会需要响应不同的状态，比如，可用、不可用、已用、过期、警告等等。将这类样式可以组织到一起。

5、Theme(主题)

主题是指版面整个的颜色、风格之类，一般网站不会有频繁的较大的改动，给我们印象比较深的是QQ空间，其他应用的不是很多，所以，这个一般不会用到，但有这样一个意识是好的，需要用到的时候，就知道该怎样规划。

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

【免责声明】：本内容转载于网络，转载目的在于传递信息。文章内容为作者个人意见，本平台对文中陈述、观点保持中立，不对所包含内容的准确性、可靠性与完整性提供形式地保证。请读者仅作参考。