摘要：最早遇到的大概的是命名的问题了吧，因为本身积累的词汇量就少，动不动就没单词可用了。用于解决项目命名规则问题。其哲学理念是模块化，功能单一性，关注点分离。借助而解决了中的命名空间的问题，使得单文件变得简单清晰。
标题党。这篇文章断断续续的修改过好几次，也没有满意，本来是想总结一下我这些零散的 CSS 知识结构，可能由于知识体系不全面，总是没能把知识点串联成一个通顺的内容。贴出来权当大家一起讨论下“前世今生”。文章后续可能会不定时更新。
CSS 作为 Web 的基础部分，极其容易上手。但是 CSS 并不算的上是一门编程语言，在语言能力上略显薄弱，往往导致整体的维护性变差。但是这并没有使得大家停止对 CSS 的探索，从命名规范，目录架构，预处理器(如SASS)，后处理器（PostCSS），模块化等等的方向上，努力把 CSS 变得更好。
关于自我历程其实我自己并没有系统的学习过 CSS（虽然我现在也不知道如何系统的学习），看了几个视频，扫了下中文版的 API，然后就开始了切图生涯，很多的知识点也都是后来一些零散的博客中了解到的。这过程中，的的确确踩过不少的坑，有的填了，有的继续祸害着项目里其它的同学。也导致我在很长的时段时间里都是走在一个混乱无序的 CSS 书写当中。
最早遇到的大概的是命名的问题了吧，因为本身积累的词汇量就少，动不动就没单词可用了。那个时候好像也就是网上列出一大堆像menu， siderbar之类的“命名大全”来模仿。再到后来接触到了 Bootstrap 这种比较系统的框架（里面有好多可以值得借鉴的地方），而后又看到一些按类别划分文件，再配有特有的前缀的管理方式(那个时候还并不知道 SMACSS 的名词)，还有一些原子化，把功能和样式分离等等的。在 SASS 兴起的时候其实挺兴奋的，因为终于感觉有了点编程的能力，当然了，对变量，嵌套，mixins等等的使用，很大程度上提高了编程效率。在后来同事的分享中，又了解了 BEM 的命名方式（初看很乱，了解后有一种豁然开然的感觉，细细回想起来，也就是大家约定一套共用的命名规范）。以及通过 PostCSS 去实现 CSS 中一些自动处理的任务。在 React/ES6/Webpack 出现后，使得很大一部分程度上，CSS 写在 JS 中的方式也开始在特定的场合中频频出现。
以上，通通出现过我的项目中，在项目切换维护的时候，那感觉，心如刀割。并不是说上面涉及到的知识点有对错的问题，只是在一个团队中，如果没有一些统一的架构和约定，往往到项目的后期会变得越来越不稳定。这不禁又让我想起了 CSS 的学习曲线（像PHP？又来黑了），样式大家都能写，能愉快的维护，又是另一个层次了。
个人觉得 CSS 中有两个比较重要的点，语义化和可维护性，而最终都是为了提高开发的效率。
语义化很大一部分程度上是为了阅读需要，简易明了。建议团队内还是要尽量的保持风格一致。其它的，可以看一下CSS语义思维的内容，这里不展开讲了。
可维护性真的是一个很虚的概念，但是涉及到了多方面的各个点。比如，该怎么保持项目的简单性，灵活性，而同时又有足够的扩展能力？又比如如何抽取模块，是以功能划分还是以样式结构？如何重用样式？如何防止样式被覆盖，避免冗余代码等等。
除了一次性的单页面这种外，一般项目类型的，都建议在开始的时候就搭好底层，统一一下整体风格与使用习惯，保持良好组织结构，命名规范，不然越往后面，可能会遇到更大的问题。
比如，对文件做一个层次划分
基础框架（reset，iconfont，栅格）
通用模块（原子，统一规范的模块）
页面样式（继承通用模块）
采用类似 BEM/SUIT 等等的命名方式等等。
现有的技术选择其实我们在平时应该或多或少的接触过一些 SASS, Compass, BEM, SMACSS, OOCSS 的概念与设计模式。当然并没有一种解决方案是绝对的，合适当前的项目就可以了。
BEM用于解决项目命名规则问题。BEM 通过已block(块)，element(元素)，modifier(修饰符) 的概念，使用连接符串联父级块作为前缀，来实现功能模块命名的唯一性。有兴趣的同学可以看一下 BEM的进化史。发现一句话并不太好表述清楚，想要具体了解的同学可以移步官网。
BEM 这种唯一性以及元素间的平级展开，往往在稍微复杂一点的项目里，就会把名字命名的很长很长。目前也有很多是在 BEM 的基础上衍生出来的一些方式(如 SUIT)。
OOCSS （Object Oriented CSS）面向对象 CSS。是一种已面向对象的维护方式去管理组织 CSS 代码。其哲学理念是模块化，功能单一性，关注点分离。
OOCSS 中有两个重要的原则
结构和外观分离。样式尽量独立，和 DOM 无关
容器和内容分离。CSS 只关注内容
OOCSS 与 SASS 结合是一个不错的选择，充分强大。
SMACSS(Scalable and Modular Architecture for CSS)可扩展和模块化 CSS。
把 CSS 样式划分为若干个不同类别的文件，如基础，布局，模块，主题等等。在加上一些特有前缀的组合。
原子化 CSS。遵循关注点分离原则。
CSS 模块化随着 React 的迅速引爆，其它关于 CSS 的另一种使用方式也在兴起。将样式在 JS 中定义。借助 require/import 而解决了 CSS 中的命名空间的问题，使得单文件变得简单清晰。而通过组合，也可以实现快速的重复利用。甚至有些 CSS 可以多带带与组件去绑定。
以及其它的一些方式。上述的方式，是比较让我眼前一亮的感觉。
未来走向待补充...
扩展阅读CSS模块(中文翻译版)
CSS 规范和最佳实践
BEM 进化史
如何理解 CSS 类名语义化
CSS 分层
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/115073.html
摘要：面试如何防骗一份优秀的前端开发工程师简历是怎么样的作为，有哪些一般人我都告诉他，但是他都不听的忠告如何面试前端工程师 更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfront/mo... 3月份前端资源分享 1. Javascript 使用judge.js做信息判断 javascript...
摘要：每逢提及物联网，后头必然跟着区块链提到区块链，也必须将物联网带入话题。而最严重的，则是物联网的安全问题。物联网领域的网络攻击频繁已成现实，就是去年最令人难忘的一个物联网僵尸网络。 showImg(https://segmentfault.com/img/bV8pXD?w=2480&h=1274); 不知从什么时候开始，物联网与区块链深深地扯上了关系，并且在今年有愈演愈烈之势。每逢提及物...
摘要：事实上，云计算本质上就是开源的，尤其对于阿里云所专注的公有云服务领域更是如此。从用户思维来看世界上根本没那么多云在笔者看来，不管是自主可控还是开源，抑或是其他形式标榜自身的云计算，其实都是从自身角度出发的自说自话。两个多月前，阿里云的一句：中国只有两种云，一种是拿来主义的云，一种是自主可控的飞天云。引发了业界的广泛吐槽，不过很多人嘴上虽然不服气，可心里也没脾气啊：谁让阿里云是中国公有云市场的...
摘要：确保一次性上线成功。而对于高难度的需咨询解决的问题，则应尽量避免纳入交付范围。需求，管理策略问题采购权分散，造成采购源混乱且采购成本虚高。需求，基础数据问题没有统一的物资编码规则，一物多码现象严重。编者按：本文作者王戴明是具有12年信息化咨询与管理经验的行业老兵，他通过对行业的观察以及与曾经客户的交流发现，即便近几年SaaS的概念炒得火热，但客户本身和客户的需求其实一直都没有发生太大的变化。...
摘要：常用于链接描点上用户行为选择器选择匹配的元素，且匹配元素被激活。，选择的是奇数项，而使用选择的却是偶数项否定伪类选择器选择器功能描述匹配所有除元素外的元素属性选择器语法选择器功能描述用于选取带有指定属性的元素。 CSS选择器概述 一.CSS3 选择器分类 showImg(https://segmentfault.com/img/bVbbO88?w=805&h=422); 二.选择器语法...
阅读 1404·2021-11-22 15:24
阅读 2491·2021-10-11 11:06
阅读 2304·2021-10-09 09:45
阅读 2505·2021-09-09 09:33
阅读 602·2019-08-30 15:53
阅读 1414·2019-08-30 12:48
阅读 605·2019-08-29 13:47
阅读 473·2019-08-26 18:27
