引子：

　　女孩子都喜欢买衣服，而我也不例外，奈何钱包太瘦，买不起高大上的定制，只能买撞衫率极高的休闲衣，不过对于我来说，我还是开心的，毕竟买衣服买的不仅是衣服，更是一种心情。在web前端的世界里，css里也充满了生活的艺术，都说，艺术源于生活，却高于生活，是对生活的一种升华，那么在css里，是个性化的定制好，还是模块化的量产好呢？这就要看各个项目了，这是一种权衡，一切离不开一个度，这世上没有最好的，只有最适合自己的，在web前端的世界里亦是如此。

　　假如你现在只是做自己的一个小博客，那么就需要你有自己的个性，因为博客相当于你个人的代言，那么很多都是个性化的，而且需要你独自一人慢慢打造出适合自己的风格。不过，大多数的时候是在工作中，对于工作中，就要考虑两个字--合作，面对一个需要大家合作才能尽快完成的项目，这就需要模块化的思想了，大家需要一个共同的标准，有一个共享库，不在是个性化的代码，而是便于团队成员阅读和维护的优雅代码。由于css模块化涉及方方面面，所以，我就一点点揭开它的神秘面纱吧！这一篇就先聊聊命名好了。

　　正篇：

什么是css模块化思想？(what)

为了理解css模块化思想，我们首先了解下，什么是模块化，在百度百科上的解释是，在系统的结构中，模块是可组合、分解和更换的单元。模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件，来处理复杂、大型的软件。看完模块化，是不是有种拼图的即视感，可以把大图分成各个小图，然后把小图拼成大图，分与合的艺术感。那么css模块化思想，也就是在css编写环境中，用上模块化的思想，把一个大的项目，分解成独立的组件，不同的组件负责不同的功能，最后把模块组装，就成了我们要完成的项目了。

为什么需要css模块化?(why)

当做一个大项目，几个人团队合作开发，结果看不懂彼此的代码，怎么办，当面对前人已经写好代码，需要修改，可是无处下手，怎么办.当代码耦合，修改费时费力，怎么办，当需要迭代，面对庞大的代码，牵一发动全身的悲催时刻，怎么办，这个时候，模块化思想就是救星了。css写法特别的灵活，也因为灵活，所以容易耦合在一起，这时候就需要进行模块化的分离。那么css模块化的好处多多，列举了一些如下：

　　　　提高代码重用率

　　　　提高开发效率、减少沟通成本

　　　　提高页面容错

　　　　降低耦合

　　　　降低发布风险

　　　　减少Bug定位时间和Fix成本

　　　　更好的实现快速迭代

　　　　便于代码维护

　　　　。。。。。。

怎样实现css模块化？（how）

　　　　要实现css模块化需要很多步，今天我们就说说第一步，命名。

　　　　看别人的代码，就好像进入对方的军事基地一样，要想里面的武器用的得心应手，首先得知道每个武器的名字，假如你的武器都是取的不三不四，那么就算来到了基地，估计也不敢动你的武器了，更别提战斗了，所以，要规范我们在css中的命名，尽量做到团队成员能一看就懂。

　　　　css命名上的优化可以分为css文件名的命名，以及css选择器的命名。

css样式文件名：

1）　

主要的 master.css 

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：css模块化思想（一）

关键词：CSS