两种CSSMethodologies《详析》

说到CSS命名约定，大家应该都不陌生，或者应该听说过BEM。BEM是Yandex团队提出的一种CSSClass命名方式，旨在帮助开发者创建更好、更一致的CSS模块。BEM将页面的类名分为块（Block）、元素（Element）、修饰符（Modifier）。块：块是一个视觉或语义的整体，它是一个特定的、唯一的元素，例如页面上的弹出窗口，或搜索框；元素：一般认为是块的A组件，元素比较以其父块的块名为前缀，例如弹窗的标题、关闭按钮、确认按钮；修饰符（Modifier）：修饰符表示特定元素的特定状态，例如，关闭按钮显示鼠标未放置和放置时两种状态。现在用Bootstrap的弹窗组件来举个更具体的例子：鼠标被放置的状态和没有被放置的状态是有区别的。从上面的例子可以看出，块和元素由两个下划线（__）连接，而元素和修饰符由两个连字符（--）连接。当然，今天的文章不会关注什么是BEM。如果你之前没有接触过BEM，可以试着去了解它，在项目中多尝试几次，感受一下它的魅力。另外，网上已经有很多介绍BEM的文章。如果你耐心搜索，你一定会找到优秀的教程。今天的文章将分享两种介绍较少的CSS方法论：SUITCSS和SMACSS。SUITCSSSUITCSS是一种基于组件的CSS方法论，将类名分为工具类和组件类两类。工具CSS中有很多固定的工具，比如：左右浮动、文本截断、垂直居中……。工具类的作用是帮助程序减少一些重复的代码，提供一致的实现。命名规则：u-[sm-|md-|lg-]<工具类名>。工具类以u-开头，后面是类名（类名以驼峰命名），中间可以加上sm、md、lg等响应式规则。组件类组件类用于描述每一个具体的组件，组件是具体应用的基石，因此组件的设计显得尤为重要。命名规则：[-][-descendantname][--modifier]，这种命名方式在编写HTML和CSS时有几个优点：有助于区分组件的根元素、后代元素和用于修改的类；减少类名重复的概率；可以使类名更具语义；下面我们来看看命名规则各部分的具体作用：namespace(optional)namespace是可选的，如果你想避免自己定义的组件类名和引入的第三方样式类名冲突，可以添加一个命名空间到您自己的类名。但是，如果你的业务中没有第三方样式，你可以不用命名空间。...使用这种方式也可以尽可能的避免同名样式的冲突。.Modal{}复制代码...