在前端开发中，CSS 是必不可少的一部分。而随着项目复杂度的增加，CSS 样式文件的长度也越来越难以管理。为了解决这个问题，我们可以依赖一些 CSS 框架来规范化样式文件。其中一个被广泛使用的 CSS 框架就是 elementcss。
什么是 elementcss？
elementcss 是一个基于 CSS 命名空间（即添加后缀的方式）来规范样式文件的框架。其目的是提高项目的可维护性和代码复用性。elementcss 框架由 element 团队提供支持。
elementcss 安装和使用
通过 npm 安装 elementcss：
--- ------- ---------- ------
在项目入口文件中引用 elementcss：
------ -------------
接下来我们就可以使用 elementcss 提供的样式类了。
elementcss 样式类使用
elementcss 提供了一些常用的样式类，如：容器、栅格、文字、按钮等等。它们的命名方式是：组件名-样式名。比如容器的命名为 container，按钮的命名为 button。
容器
---- ------------------ ------ ------
容器样式类提供了常见的容器排版样式，使用时只需添加 container 样式即可。
栅格
---- ------------
---- --------------- -----------
---
------
---- --------------- -----------
---
------
------栅格样式类提供了常见的栅格排版样式，使用时只需添加 row 和 col 样式即可。其中，col 样式可选用以下前缀：
- xs：超小屏幕，小于 768px。
- sm：小屏幕，大于等于 768px。
- md：中等屏幕，大于等于 992px。
- lg：大屏幕，大于等于 1200px。
文字
-- --------------------- ------ ------- ----- ----
文字样式类提供了颜色、大小等常见样式，使用时只需添加对应的样式名即可。常见的文字样式类有：
- text-primary：主色文字。
- text-success：成功色文字。
- text-warning：警告色文字。
- text-danger：危险色文字。
- text-muted：灰色文字。
- text-lead：加粗大号文字。
按钮
------- ------------------------------ ----------- ------- ------------------------ ----------- ------- ------------------------------ ----------- ------- ---------------------------- -----------
按钮样式类提供了常见的按钮样式，使用时只需添加 button 和对应的样式名即可。常见的按钮样式类有：
- button-default：默认按钮。
- button-primary：主色按钮。
- button-info：信息色按钮。
- button-warning：警告色按钮。
- button-danger：危险色按钮。
- button-success：成功色按钮。
总结
通过使用 elementcss，我们可以快速搭建项目中常见的界面布局和样式，大大降低了 CSS 样式文件的维护难度。同时，elementcss 是一个优秀的示例，我们可以借鉴其命名空间的思想，规范化我们自己的 CSS 样式文件。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005679e81e8991b448e3f1f