关于css有两类问题值得我们重视：样式和工程。样式问题指的是详细的效果实现，能否实现某个效果，同一个效果有多种实现办法，如何决议；工程问题是如何在大型项目中写出可掩护性、可读的css。
在各种论坛中常常看到关于css是否是一门编程措辞的辩论。在我看来，最好用对待编程措辞的态度来看待css，不要忽略css，否则，在项目后期，你会创造，你的css越来越混乱，important会越来越多，不同位置的类名相互冲突覆盖，改一个类的样式，要检讨全体项目的页面是否受到影响，项目内部的css共享完备依赖拷贝……从这个角度来说，你敢说css不是编程措辞？它完备有了像编程措辞一样能把你搞得焦头烂额的能力。而这统统都来源于你在一开始对她的忽略与不屑。出来混，总要还的啊！
盲目的定义根本样式
在项目开始之初，拿到UI设计稿，信心满满地开始定义css的全局根本样式，谢天谢地，css对这一点支持得很彻底，一处定义，所有页面都可以引用。
先来一个color-red。
.color-red {color: red}
这样，在全体项目中，都可以给任意元素添加一个color-red类，美滋滋，我真是个小机灵鬼！
几个迭代过去，你已经把color-red这面红旗插满了全体项目。UED说，咱们改个版，所有赤色的文本改为蓝色，赤色的link不变！
哔！
——（你发出的声音）
你又得屁颠屁颠地把一个一个的红旗拔出来，再插上蓝色的旌旗（由于你不敢不干呀）。
命名冲突
在一个页面，你定义了一个.header，写了个完美的殊效，发布到dev一看，便是不管用，横看竖看，本地是好的啊，神奇（生气）！
过了多少韶光的排查，另一个同事在另一个地方也写了一个.header，完美的覆盖了你的。把你头打歪！
编辑器可不会提醒你哦！
逐步你会创造，这种命名冲突可太频繁了呀！
头大，要不要用上css modular啊？
子类覆盖
有的小伙伴聪明地将类名嵌套定义，这就不会冲突了吧？嘿嘿，你想多了！
/ in article.css /.article .title { border-bottom: 1px solid; font-size: 1.5em;}/ in widget.css /.widget .title { color: gray; text-transform: uppercase;}
如果在dom树里面，article和widget在一棵树的路径上，你说title是冲突呢还是不冲突呢？
以上的这些问题，在项目中相信大家都遇见过，并且项目越大，涌现的概率就越高，末了就会演化成一座[屎]山。
“大家都别动，牵一发而动全身哦！
”
“这便是蝴蝶效应吧？？？”
认识BEM难道css这些问题就没法办理了吗？当然不是，我们来看看大神们是如何办理这些问题的。
BEM是Block、Element、Modifier的缩写，是一个类命名的规范。
首先我们来看一个例子：
/ Block /.btn {}/ Element that depends upon the block / .btn__price {}/ Modifier that changes the style of the block /.btn--orange {} .btn--big {}
相信小伙伴们已经有了一个初步的认知：
Block是一个独立的组件（元素），定义的了“组件是什么，按钮？还是菜单？”。
Element是属于Block，是依赖于Block的元素，描述的是“Block里面的什么？比如，文本？图标？”
Modifier用于描述Block或者Element的外在表现，比如大小、颜色、状态等。
看一个例子：
<form class="search-form search-form_theme_islands"> <input class="search-form__input"> <button class="search-form__button search-form__button_size_m">Search</button></form>
search-form是Block；
search-form_theme_islands是Modifier，描述了theme为islands的search-form；
search-form__input是Element，描述的是search-form内部的input元素；
search-form__button是Element，描述的是search-form内部的button元素；
search-form__button_size_m是Modifier，描述的是size为m的search-form__button；
这样写css是不是非常的清晰？瞬间就提高了可读性和可掩护性？
观点如此大略，还不赶紧多理解一下？
其余，可能有些小伙伴也把稳到了，Block和Element利用双下划线分隔，和Modifier是用中划线分隔，这也不是一成不变的，可以按照自己的喜好来决定如何分割。
Saas、Css Module有些小伙伴可能会有疑问，BEM和Saas、Css Module有什么差异？办理的问题是一样的吗？
Sass是css的预处理器，在写css的时候定义了一套规范，经由编译处理后输出为css，和BEM是两个不同的观点。利用saas或less也能实现BEM。BEM实在是不推崇类名的嵌套定义的，如果想像sass那样嵌套的写出标准的BEM，可以利用@at-root。
Css Module办理的问题是多个模块的css的命名冲突问题，个人以为是傻瓜式办理方案，在运用层的css-in-js运用比较多，适宜css入门选手。要想写好css，还是得从根本上入手呀！
