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