css 命名：BEM, scoped css, css modules 與 css-in-js詳解
我要評(píng)論css 作用域是全局的，項(xiàng)目越來越大，人越來越多，命名慢慢成為問題，以下是幾種解決命名問題的方案
一. BEM
以 .block__element--modifier 形式命名，命名有含義，block 可視為模塊，有一定作用域含義
實(shí)例
.dropdown-menu__item--active
二. scoped css
參考：vue-loader.vuejs.org/zh/guide/sc…
目標(biāo)：當(dāng)前組件樣式不會(huì)影響其它組件
給組件的 dom 節(jié)點(diǎn)添加惟一屬性，并轉(zhuǎn)換 style 標(biāo)簽中的 css 匹配該屬性，使得 css 作用域有限
實(shí)例
<style scoped>
.example {
color: red;
}
</style>
<template>
<div class="example">hi</div>
</template>
轉(zhuǎn)換結(jié)果：
<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 的選擇器轉(zhuǎn)換成惟一的字符串，運(yùn)用到 dom。是在用算法命名，記錄了人的命名到算法命名的 map 表
實(shí)例
<style module>
.red {
color: red;
}
</style>
<template>
<p :class="$style.red">
This should be red
</p>
</template>
轉(zhuǎn)換結(jié)果：
<style module>
._1yZGjg0pYkMbaHPr4wT6P__1 {
color: red;
}
</style>
<template>
<p class="_1yZGjg0pYkMbaHPr4wT6P__1">
This should be red
</p>
</template>
四. css-in-js
將 css 內(nèi)容用惟一的選擇器表示。同 css modules，用算法命名。將 css 視為 js 的字符串，賦予 css 更多能力
實(shí)例
<template>
<css-in-js></css-in-js>
</template>
<script>
import styled from 'vue-styled-components';
export default {
components: {
cssInJs: styled.div `
color: red;
`
}
}
</script>
轉(zhuǎn)換結(jié)果：
<template>
<div class="gXTzCp"></div>
</template>
<style>
.gXTzCp {
color: red;
}
</style>
五. 總結(jié)
- BEM 讓命名有規(guī)律、有含義，block 可視為模塊，有一定作用域含義
- scoped css 限定 css 作用域，無關(guān)命名。無法適配多套主題
- css modules 使用算法命名，沒有了命名沖突，也限定了 css 作用域。無法適配多套主題
- css-in-js 使用算法命名，擁有 css modules 的優(yōu)勢。同時(shí)將 css 視為 js 的字符串，賦予 css 更多能力
到此這篇關(guān)于css 命名：BEM, scoped css, css modules 與 css-in-js的文章就介紹到這了,更多相關(guān)css 命名內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
- 這篇文章主要介紹了CSS使用BEM命名規(guī)范實(shí)踐,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-28
CSS樣式書寫順序和命名規(guī)范及注意事項(xiàng)
這篇文章主要介紹了CSS樣式書寫順序和命名規(guī)范,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-04值得收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則
本文是小編精心給大家收藏的CSS命名規(guī)范(規(guī)則)常用的CSS命名規(guī)則 ，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2018-10-19
好的 CSS 命名規(guī)范可以節(jié)約 Debug 時(shí)間
Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。下面通過本文給大家?guī)砹薈SS 命名規(guī)范可以節(jié)約 Debug 時(shí)間的相關(guān)知識(shí)，感興趣的朋友一起2018-01-23
CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解
這篇文章主要介紹了CSS規(guī)范BEM CSS和OOCSS的示例代碼詳解,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-28- BEM的意思就是塊（block）、元素（element）、修飾符（modifier）,是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。本文主要介紹了詳解css BEM書寫規(guī)范,非常具有實(shí)用價(jià)值，需要的2018-12-17
從QQtabBar看css命名規(guī)范BEM的詳細(xì)介紹
這篇文章主要介紹了從QQtabBar看css命名規(guī)范BEM的問題解析，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2021-08-04
