前言说起CSS的命名规范，大家应该都不陌生，或者应该听说过BEM。BEM是Yandex团队提出的一种CSSClass命名方式，旨在帮助开发者创建更好、更一致的CSS模块。BEM将页面的类名分为块（Block）、元素（Element）、修饰符（Modifier）。块：块是一个视觉或语义的整体，它是一个特定的、唯一的元素，例如页面上的弹出窗口，或搜索框；元素：一般认为是块的A组件，元素比较以其父块的块名称为前缀，例如弹出窗口的标题、关闭按钮、确认按钮；修饰符（Modifier）：修饰符表示特定元素的特定状态，例如，关闭按钮显示鼠标未放置和放置时两种状态。现在用Bootstrap的弹窗组件来举个更具体的例子：鼠标被放置的状态和没有被放置的状态是有区别的。从上面的例子可以看出，块和元素是用两个下划线（__）连接的，而元素和修饰符是用两个破折号（--）连接的。当然，今天的文章不会关注什么是BEM。如果你之前没有接触过BEM，可以试着去了解它，在项目中多尝试几次，感受一下它的魅力。另外，网上已经有很多介绍BEM的文章。如果你耐心搜索，你一定会找到优秀的教程。今天的文章将分享两种介绍较少的CSS方法论：SUITCSS和SMACSS。SUITCSS》官方文档：SUITCSSNamingConventions(https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)SUITCSS是一种基于组件的CSS方法论，将有两种类型类名的种类：工具类和组件类，工具类CSS中有很多固定的工具类，比如：左右浮动，文本截断，垂直居中……工具类的作用是帮助程序减少一些重复的代码,andProvideaconsistentimplementation.命名规则：u-[sm-|md-|lg-]<工具类名>.工具类以u-开头，后接类名（类名以驼峰命名),并且可以在中间添加使用sm,md,lg的响应规则。举个栗子：
