CSS方法论有哪些

这篇文章主要介绍“CSS方法论有哪些”，在日常操作中，相信很多人在CSS方法论有哪些问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”CSS方法论有哪些”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！

成都创新互联-专业网站定制、快速模板网站建设、高性价比东西湖网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式东西湖网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖东西湖地区。费用合理售后完善，10多年实体公司更值得信赖。

前言

说起 CSS 命名规范，大家应该都很熟悉，或者应该听说过 BEM 。BEM 是由 Yandex 团队提出的一种 CSS Class 命名方法，旨在帮助开发人员创建更好的且结构一致的 CSS 模块。

BEM 将页面的类名分为块(Block)、元素(Element)、修饰符(Modifier)。

块(Block)：一个块是视觉上或者语义上的一个整体，它是一个具体且唯一的一个元素，例如，页面上的一个弹窗，或者是一个搜索框;
元素(Element)：一般认为是块的组成部分，元素比较用它父级的块名称做为前缀，例如，弹窗的标题、关闭按钮、确认按钮;
修饰符(Modifier)：修饰符表示一个具体元素的特定状态，例如，关闭按钮在鼠标没放上去和放上去的时候，呈现的两种状态。

现在用 Bootstrap 的弹窗组件，举一个更加具体的例子：

CSS方法论有哪些

鼠标放上去和没放上去的状态是有区别的。

CSS方法论有哪些

通过上面的示例可以看出，块与元素是通过两个下划线(__)连接的，而元素和修饰符之间是通过两个短横线(--)连接的。

当然，今天的文章不会着重介绍什么是 BEM，如果你之前没接触过 BEM 可以尝试去了解一下，并且多在在项目中试用几次，感受他的魅力。另外，现在网上已经有非常多的文章在介绍 BEM 了，耐心找，肯定能找到优秀的教程的。今天的文章会分享比较少人介绍的两种 CSS 方法论：SUIT CSS 和 SMACSS。

SUIT CSS

“官方文档：SUIT CSS命名约定(https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md)

SUIT CSS是一种基于组件开发的 CSS 的方法论，它将类名分为两种类型：工具类和组件类。

工具类

CSS 中有很多固定工具类，比如：左右浮动、文本截断、垂直居中……。工具类的作用是帮助程序减少一些重复代码，并提供一致的实现。

命名规则：u-[sm-|md-|lg-]<工具类名>。工具类使用 u- 打头，后面接类名(类名使用驼峰的方式命名)，中间可以加上 sm、md、lg 这种响应式的规则。

举个栗子：

           ?看看我的博客              爱折腾的前端工程师，欢迎关注我的公众号「更了不起的前端」

组件类

组件类用来描述一个个具体的组件，组件是构成一个具体应用程序的基石，所以组件的设计特别重要。

命名规则：[<命名空间>-]<组件名>[-后代名][--修饰符]，这样的命名方式，在编写 HTML 和 CSS 的时候有几个好处：

有助于区分组件的根元素，后代元素，以及用来修饰的类;
降级类名重复的几率;
能够让类名更具有语义化;

下面来看看命名规则的各个部分的具体作用：

命名空间(可选)

命名空间是可选的，如果你希望避免自己定义的组件类名与引入的第三方样式类名发生冲突，则可以为自己的类名加上命名空间。但是，如果你们业务中不存在第三方的样式，则可以不带命名空间。

.sfq-Modal{} /* 我的弹窗组件 */ .sfq-Button {} /* 我的按钮组件 */

组件名

组件名使用大驼峰规则(首字母大写的驼峰规则，Pascal Case)来命名，使用这种方式也可以尽可能的避免出现同名样式的冲突。

.Modal {}

…

组件的后代指附加在组件上的一部分，例如，弹窗组件的标题、按钮等等。后代名称使用小驼峰规则(首字母大写的驼峰规则，Camel Case)命名。

大橙子网站建设，新征程启航

CSS方法论有哪些

其他资讯