全国服务热线:4008-888-888

技术知识

css 取名:BEM, s☏coped css, css modules 与 css

css 功效域是全局性的,新项目越来越越大,人越来越越大,取名渐渐地变成难题,下列是几类处理取名难题的计划方案

一. BEM

以 .block__element--modifier 方式取名,取名有含意,block 可视性为控制模块,有一定功效域含意

案例

.dropdown-menu__item--active

二. scoped css

参照:vue-loader.vuejs.org/zh/guide/sc…

总体目标:当今部件款式不容易危害其他部件

给部件的 dom 连接点加上唯一特性,并变换 style 标识中的 css 配对该特性,促使 css 功效域比较有限

案例

<style scoped>
.example {
  color: red;
}
</style>
 
<template>
  <div class="example">hi</div>
</template>

变换結果:

<style>
.example[data-v-f3f3eg9] {
  color: red;
}
</style>
 
<template>
  <div class="example" data-v-f3f3eg9>hi</div>
</template>

三. css modules

参照:vue-loader.vuejs.org/zh/guide/cs…

将 css 的挑选器变换成唯一的标识符串,应用到 dom。是再用优化算法取名,纪录了人的取名到优化算法取名的 map 表

案例

<style module>
.red {
  color: red;
}
</style>
<template>
  <p :class="$style.red">
    This should be red
  </p>
</template>

变换結果:

<style module>
._1yZGjg0pYkMbaHPr4wT6P__1 {
  color: red;
}
</style>
<template>
  <p class="_1yZGjg0pYkMbaHPr4wT6P__1">
    This should be red
  </p>
</template>

四. css-in-js

参照:github.com/styled-comp…

将 css 內容用唯一的挑选器表明。同 css modules,用优化算法取名。将 css 视作 js 的标识符串,授予 css 大量工作能力

案例

<template>
  <css-in-js></css-in-js>
</template>
 
<script>
  import styled from 'vue-styled-components';
  export default {
    components: {
      cssInJs: styled.div `
                color: red;
            `
    }
  }
</script>

变换結果:

<template>
    <div class="gXTzCp"></div>
</template>
<style>
.gXTzCp {
    color: red;
}
</style>

五. 小结

  1. BEM 让取名有规律性、有含意,block 可视性为控制模块,有一定功效域含意
  2. scoped css 限制 css 功效域,不相干取名。没法兼容好几套主题风格
  3. css modules 应用优化算法取名,沒有了取名矛盾,也限制了 css 功效域。没法兼容好几套主题风格
  4. css-in-js 应用优化算法取名,有着 css modules 的优点。同时将 css 视作 js 的标识符串,授予 css 大量工作能力

到此这篇有关css 取名:BEM, scoped css, css modules 与 css-in-js的文章内容就详细介绍到这了,大量有关css 取名內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!



在线客服

关闭

客户服务热线
4008-888-888


点击这里给我发消息 在线客服

点击这里给我发消息 在线客服