1、css架构-BEM命名规则
- 由Block-Element-Modifier(修饰符)三部分组成
- Element通过"__"与Block进行连接,在命名中反映父子关系,而不是进行实际的嵌套
- Modifier用"--"与Block或者Element连接,用来描述作用者的状态或者行为。例如Button 组件,它有很多的状态和外观,例如selected,default,disabled
优点
- 减少类的嵌套,从命名上也能看出层级关系
- 使用scss编写时非常方便
.header {
&__title { }
}
.btn {
&--selected {}
}
/* 会编译为 :*/
.header__title {}
.btn--selected {}
- 在迁移代码块时,不受代码层级影响
2、css架构-SMA命名规则
Scalable and Modular Architecture for CSS,编写可扩展的、模块化、结构化的 CSS
如果给 BEM 找个核心词,那就是分层,如果给 SMACSS 也找个核心词,那肯定就是分类
- Base-基础:放不涉及业务的基础样式,一般是一些标签选择器。比如a标签在本网站中全部展示为某种样式
- Layout-布局 :贴近 HTML 标签,作为网站的骨架,负责布局,例如header,footer,aside
- Module-模块: Module 更多负责业务展示和交互。布局将页面拆成多块,每块里面有N个Module
- State-状态 : 动态变化的部分,例如按钮是否可用,面板是否展开,选项是否激活等
- Theme-主题 : 提供最终外观,Base提供默认外观。要做到在切换主题时尽量简单
/* 一般Layout布局类名都是 .l- 开头 */
.l-main {}
.l-left-footer {}
/* State 的类名,一般使用 .is- 来开头 */
.is-active {}
.is-expand {}
/* 在js中,可以通过window.CSS.supports('display', 'flex')检测是否支持某种写法 */
/* 在css中,可以使用@supports来检测,也支持 @supports not(display: flex){}来反向检测 */
@supports (display: flex) {
.flex {
display: flex;
}
}
总结
- 感觉这里的Layout和Module的关系是相当于BEM中的Block和Element的,State也相当于BEM中的Modifier
- 应尽量直接使用标签来做Layout的事
3、SUIT CSS命名规则
将类名分为两种类型:工具类和组件类
- 一些固定工具类,比如:左右浮动、文本截断、垂直居中等,命名方式: u-sm|md|lg<工具类名>
- 组件类命名方式为:[<命名空间>-]<组件名>[-后代名][--修饰符],组件名命名成大驼峰类型,组件和后代以“-”相连(BEM中父子以“__”相连),和修饰符以“--”相连(这点和BEM一样)。例如:.mrp-Form-input--focus
4、class命名工具-oocss
Object Oriented css(面向对象css)
- 这个规则适用于在有重复样式时,提取公共类进行复用。例如box1和box2有大量相同样式,只需要提取出一个公共box类:
<div class="box box1"></div>
<div class="box box2"></div>
5、切换主题的2个思路(都基于css的变量)
- 不同主题下设置不同的变量值
:root[theme="blue"] {
--btnColor: blue;
--btnBg: #ddd;
}
:root[theme="dark"] {
--btnColor: #000;
--btnBg: #fff;
}
.btn-color {
/* 这里第二个参数设置异常值,比如html没有theme属性,这些变量不存在时,取第二个参数值 */
color: var(--btnColor, red);
background-color: var(--btnBg);
}
在切换主题时,修改html的theme属性值,那么由于style里面设置的属性选择器,变量值会根据html的theme进行设置。理解成每种主题都是一个模块,利用theme设置了命名空间一样。
document.documentElement.setAttribute('theme', 'dark');
- 直接设置html节点style的变量属性值
.btn-color {
color: var(--btnColor, red);
background-color: var(--btnBg, blue);
}
const theme = {
dark: {
'--btnColor': '#fff',
'--btnBg': '#000'
},
gary: {
'--btnColor': '#000',
'--btnBg': '#ddd'
}
};
let select = theme.dark; // 当前选择dark主题
for (let p in select) {
// 设置变量值
document.documentElement.style.setProperty(p, select[p]);
}
网友评论