通过CSS设计模式搭建自己系统的CSS架构
传统的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设计模式开发的项目,样式代码简介,复用性高,整体结构清晰
异乡小龟
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 在鹅厂做java开发是什么体验
· 百万级群聊的设计实践
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
· 永远不要相信用户的输入:从 SQL 注入攻防看输入验证的重要性
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
2019-06-04 在vue中监听storage的变化