美文网首页
css命名规则 / 切换主题的思路

css命名规则 / 切换主题的思路

作者: 欢西西西 | 来源:发表于2022-05-05 15:34 被阅读0次

1、css架构-BEM命名规则

  • 由Block-Element-Modifier(修饰符)三部分组成
  • Element通过"__"与Block进行连接,在命名中反映父子关系,而不是进行实际的嵌套
  • Modifier用"--"与Block或者Element连接,用来描述作用者的状态或者行为。例如Button 组件,它有很多的状态和外观,例如selected,default,disabled

优点

  1. 减少类的嵌套,从命名上也能看出层级关系
  2. 使用scss编写时非常方便
.header {
    &__title { }
}
.btn {
    &--selected {}
}
/* 会编译为 :*/
.header__title {}
.btn--selected {}
  1. 在迁移代码块时,不受代码层级影响

2、css架构-SMA命名规则

Scalable and Modular Architecture for CSS,编写可扩展的、模块化、结构化的 CSS
如果给 BEM 找个核心词,那就是分层,如果给 SMACSS 也找个核心词,那肯定就是分类

  1. Base-基础:放不涉及业务的基础样式,一般是一些标签选择器。比如a标签在本网站中全部展示为某种样式
  2. Layout-布局 :贴近 HTML 标签,作为网站的骨架,负责布局,例如header,footer,aside
  3. Module-模块: Module 更多负责业务展示和交互。布局将页面拆成多块,每块里面有N个Module
  4. State-状态 : 动态变化的部分,例如按钮是否可用,面板是否展开,选项是否激活等
  5. 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命名规则

将类名分为两种类型:工具类和组件类

  1. 一些固定工具类,比如:左右浮动、文本截断、垂直居中等,命名方式: u-sm|md|lg<工具类名>
  2. 组件类命名方式为:[<命名空间>-]<组件名>[-后代名][--修饰符],组件名命名成大驼峰类型,组件和后代以“-”相连(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的变量)

  1. 不同主题下设置不同的变量值
        :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');

  1. 直接设置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]);
            }

相关文章

  • css命名规则 / 切换主题的思路

    1、css架构-BEM命名规则 由Block-Element-Modifier(修饰符)三部分组成 Element...

  • html代码规范,chrome应用

    &html,css入门 基础学习 &代码规范 点这里 CSS命名规则 常用的CSS命名规则 头:header 内容...

  • css命名

    html页面的CSS、DIV命名规则 CSS命名规则 头:header 内容:content/containe 尾...

  • CSS命名规则

    CSS命名规则: CSS+DIV的命名规则: 登录条:loginBar 标志:logo 侧栏:sideBar 广告...

  • CSS命名规则

    CSS命名规则: (一)网页设计中常用的CSS命名规则: 头:header 内容:content/containe...

  • CSS模块化

    css命名规范 常用的css命名规则 头:header 内容:content/container 尾:footer...

  • CSS命名规范(规则)常用的CSS命名规则

    头:header内容:content/container尾:footer导航:nav侧栏:sidebar栏目:co...

  • css实现主题切换

    项目中常遇到主题且切换的需求,网上有很多实现方法,这里主要总结下分别用css和less实现的思路 CSS实现: 第...

  • css命名规则大全

    转自css命名规则,有修改。 1.常用CSS样式命名 头:header内容:content/container尾:...

  • tinymce-vue的深浅主题切换

    tinymce-vue没有提供开箱即用的主题色切换的方法,这里探索了一条道路,思路如下: 深浅主题加载的css不同...

网友评论

      本文标题:css命名规则 / 切换主题的思路

      本文链接:https://www.haomeiwen.com/subject/vpznyrtx.html