什么是设计模式

　曾有人调侃，设计模式是工程师用于跟别人显摆的，显得高大上；也曾有人这么说，不是设计模式没用，是你尚未到能懂它，会用它的时候。

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

 

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

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

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

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

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

　　固然，这三者都是我经历过的，相信你也是~

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

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

　

　从需求出发

　　分

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

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

　　拆

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

　　排

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

　　3、Meta CSS

　　原子类，也能够称之为“无语义”类，像这样：

 

　　它的特色是什么？样式和结构、内容无关，预先定义好这么一组规则，在须要的地方加上便可，我相信每一个人第一次看到这种写法的时候，都会想：还能这样写啊？！是的，总有一些人，一些新的思想和方法会涌现出来，它就是其中之一，固然，并非在称赞其自己有多么好，而是说这种现象和过程是好的，它自己常常被人吐槽，好比：“这样写和直接内联有区别吗？”、“若是要调整样式，就要去改HTML，维护更加麻烦，也有违样式和结构分离的初衷”等等，其实我我的也是不同意上面这种写法的，若是你要把这些抽离出来，那么还有什么抽不出来的呢？并且这些属性，在项目之间，页面之间，模块之间，并无太大的通用性，把这些抽出来，只不过是稍微懒省劲儿些，但为了照顾到更多状况，你必须写入冗余代码，是得不偿失的。

　　虽然它有缺点，我我的同意另外的一些东西分出来，好比：浮动（float）、文本布局（text-align）、Flexbox布局等，这些是没有那么多可能性的值，并且使用频繁，复用方便，改动较少，除此以外，你还能够提取另一些公共的小颗粒类，好比按钮的种类，文字颜色的种类等，这些和CSS自己无关，和项目相关，这就是借鉴其思想，而不是直接拿来用。

　　4、BEM

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

　　它的核心以下：

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

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

 

　　它的出现，曾给很多人带来启发，可是也有另外一部分人仍然抱着挑剔的态度，譬如：

　　一、风格不统一，显得代码不够整洁美观

　　二、可能会致使类名过长

　　仍是前面说的，你能够不去直接用它，但要清楚它的优势：可以使得咱们仅经过类名就知道哪些代码是属于一个模块内，以及在模块中所起的做用。而后借鉴之。

　　固然，BEM集聚了不少人的心血，也获得了不少的赞誉，其中就包括OOCSS的做者。因此，它确定不是这么简单。它还会告诉你，怎样配合着js来写，你的文件怎样组织更好，项目该怎么构建等。详细能够到官网去查阅。

　从实际出发，决定结果的人是你

　　到底怎样使用设计模式？

　　虽然已经有成熟的设计模式，但在实际当中，你可能以为哪一个跟本身的项目都不能彻底吻合，或者你要去为了使用它们而调整，成本很高。其实，咱们不须要去迎合模式，要让模式为我所用，你须要去了解它们背后的原理，要知道它们用什么方式解决了什么问题，而后借鉴之，用它的方式解决咱们的问题，就好，这样就不须要做难要不要用，也不须要纠结选哪一个，不是简单的说哪一个好，哪一个很差，总有咱们可以用得上它的地方。海纳百川，集百家众长。

　　我我的一直以来所坚持的另外一个观点就是，前端开发的三驾马车——html、css、js，不要，也不能孤立的去谈那样好或者这样好，咱们极少会有只用一次的代码或者模块，也不会只写一种语言，三驾马车都是在一块儿协做的，都是会有复用、扩展和团队合做多方面的因素在里面。故而，不能抱着这样的想法：我如今就在作这个，它就是惟一的，就是固定的，没问题。其实不少问题都是潜在的，要带着发展眼光去看待。项目的文件之间，项目之间，团队成员之间，不论你的分工是哪块，都要考虑到先后的影响和可能给合做带来的不便。

　　怎样才是最佳实践？有“实践”，才有“最佳”，脱离实际状况谈最佳，就是空中楼阁。那么，最好的模式，不是哪一个经典的模式，而是在项目进行中，不断的磨合调整而出的。故而，不须要再害怕看起来不明觉厉的设计模式，也不须要由于本身还不懂设计模式而郁闷，它就是人们总结出来的实战方法，你也能够有本身的模式~