通过CSS设计模式搭建自己系统的CSS架构

---

theme: qklhk-chocolate

拼多多优惠券 https://www.fenfaw.net/

传统的CSS书写风格是随意命名，堆叠样式，造成了混乱不堪的结果，复杂页面的样式书写通常会出现几百行甚至上千行的代码，CSS设计模式在实际应用中的横空出世拯救了样式混乱，代码行数冗余的局面。例如：BEM设计模式通过BEM的命名规范语义化了类名，ITCSS设计模式解决了CSS设计的分层架构，ACSS原子类的设计思想实现了单一变量单一原子样式，便于调用。

最近在研究关于CSS架构的设计方案，通过学习理解CSS设计模式的设计思想并结合实际项目架构了 ITCSS + BEM + ACSS 的CSS架构项目。逐渐有了一些想法，这里进行综合整理，也算是抛砖引玉吧。

项目使用的CSS设计模式简介

1、ITCSS

• 设置 –预处理程序变量和方法（无实际CSS输出）
• 工具 – Mixins和函数（无实际CSS输出）
• 常规 – CSS重置，其中可能包括Eric Meyer的重置， Normalize.css或您自己的一批代码
• 元素 –没有类的单个HTML元素选择器
• 对象 -通常遵循OOCSS方法的页面结构类
• 组件 –用于设置任何页面元素和所有页面元素样式的美学类（通常与对象类的结构结合使用）
• Trumps –最重要的样式，用于覆盖三角形中的任何其他内容

2、BEM
BEM 是我的方法的基础。如果你以前从未听说过 BEM，它代表 block ， element 和 modifier。当你第一次接触它时，它看起来是那么的难看。

.block { /* styles */ } 
.block__element { /* styles */ } 
.block--modifier { /* styles */ }

2、ACSS

ACSS使用了紧密的类名库。 这些类名通常被缩写，并与它们影响的内容分开。 在ACSS系统中，您可以知道类名的作用； 但是类名称(至少不是样式表中使用的名称)与内容类型之间没有关系,即每一个样式对应一个类，也称原子类CSS。

项目CSS设计模式实现

github（项目地址）

通过ITCSS架构的分层设计思想，对样式目录以及功能进行了分层：

通过BEM命名的规范结合SassMagic，书写样式代码

SassMagic 地址

ACSS实现原子类样式，便于全局调用/复用

最后

• 本项目结合 ITCSS + BEM + ACSS 实现最终项目CSS架构
• SassMagic 助力BEM命名开发规范
• 通过CSS设计模式开发的项目，样式代码简介，复用性高，整体结构清晰