美工做图素材网站,房地产互联网推广,wordpress查询次数,企点qq售卖平台『精』CSS 小技巧之BEM规范 文章目录 『精』CSS 小技巧之BEM规范一、什么是BEM#xff1f;二、BEM要怎么用#xff1f;三、不用BEM会少个胳膊吗#xff1f;#x1f48a;四、Sass与BEM的结合#x1f388;五、块与修饰符应放在一块#x1f47f;参考资料#x1f498;推荐博…
『精』CSS 小技巧之BEM规范 文章目录 『精』CSS 小技巧之BEM规范一、什么是BEM二、BEM要怎么用三、不用BEM会少个胳膊吗四、Sass与BEM的结合五、块与修饰符应放在一块参考资料推荐博文 一、什么是BEM
BEM风格规范指的是 Block、Element、Modifier 这三者的简称这个规范将 CSS 拆分成块、元素、修饰符根本作用是帮助开发者快速理解HTML与 CSS 之间的关系。那么通过使用 BEM 能获得到什么好处呢我罗列了下面几点
如果我们想制作一个组件的新样式比如改个字体/背景色可以很容易地看到有哪些样式项已经存在只需要新增一个修饰符即可甚至可能意识到一开始就不需要编写任何样式有一个预先存在的修饰符可以满足我们的需求。得益于 CSS 命名语义化的好处我们能够快速了解其 HTML 结构分布一个元素依赖哪一个元素在产品变更时快速更改其样式并完全确信您的更改不会产生副作用。模块化的样式命名规则能够最有效解决样式之间同名、继承、优先级等所带来的污染性问题避免最后因为充斥着各种臃肿而不敢触及修改遗留的各种未知样式这其实给了开发人员一定的信心。团队配合成本的降低样式可读性的提高能够让成员之间能够快速复用已有的样式规则而不需要再去编写一套样式。
在没有接触 BEM 之前也许你会对我这罗列的这一堆优点一头雾水这很正常让我们接着往下看在看完本文的剩余内容时也许回过头你就能恍然大悟。需要注意的是 BEM 并非是官方的风格规范它是由Yandex团队开发程序员之间约定俗成的一种契约规范受众范围十分广泛许多知名开源 UI 框架将其使用如 Elementui、vant、uView-ui。但随着 tailwind 这类 CSS 框架的强势入局BEM使用也有减少的趋势毕竟只有在手动编写CSS代码的时候才用的上如新起之秀号称最完整Vue UI套件的 primevue。 二、BEM要怎么用
要探究BEM怎么用最简单的方法就是直接上手让我们从编写一套有着丰富样式按钮组件开始该组件包含最常见的颜色类型/大小切换功能。可以看到属于 .btn 元素下的子项目在命名时带上以父元素为头__ 分割的命名而按钮的不同状态颜色则通过基本样式名为头 -- 分割进行命名。以这样的命名方式翻译过来就是基本样式名被称为块__分割被称为元素--分割则被称为修饰符。
article classbtn-demodiv classbtn btn--primary btn--largespan classbtn__icon$/spanspan classbtn__text按钮/span/divdiv classbtn btn--infospan classbtn__icon$/spanspan classbtn__text按钮/span/divdiv classbtn btn--minispan classbtn__icon$/spanspan classbtn__text按钮/span/divdiv classbtn btn--warnspan classbtn__icon$/spanspan classbtn__text按钮/span/divdiv classbtn btn--dangerspan classbtn__icon$/spanspan classbtn__text按钮/span/div
/articlemixin mBtnType($m, $color, $hoverColor, $activeColor, $fontColor: #FFF) {.btn--#{$m} {color: $fontColor;border-color: $color;background-color: $color;:active, :hover {color: $fontColor;}:hover {border-color: $hoverColor;background-color: $hoverColor;}:active {border-color: $activeColor;background-color: $activeColor;}}
}.btn-demo {display: grid;grid-template: 30px / repeat(4, 25%);grid-auto-rows: 30px;grid-row-gap: 20px;justify-content: space-between;justify-items: center;position: fixed;left: 50%;top: 20%;width: 450px;transform: translateX(-50%);
}.btn {$activeColor: #409EFF;box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;width: 80px;height: 32px;padding: 5px 10px;border: 1px solid #F0F0F0;border-radius: 4px;color: #333;background-color: #FFF;cursor: pointer;:active, :hover {color: $activeColor;border-color: #A0CFFF;background-color: #ECF5FF;}:active {border-color: $activeColor;}__icon {font-weight: bold;}
}.btn--mini {width: 60px;height: 28px;font-size: .8em;
}.btn--large {width: 100px;height: 40px;font-size: 1.1em;
}include mBtnType(primary, #409EFF, #79BBFF, #337ECC);
include mBtnType(warn, #E6A23C, #EEBE77, #B88230);
include mBtnType(danger, #F56C6C, #F89898, #C45656);
示例中样式使用的是 Sass如需查看 CSS 请安装 Sass 包将其转换成传统 CSS 代码。
# 安装Sass
npm i sass -g
# 将Sass编译成CSS
sass input.scss output.css简单来说BEM 最核心的写法就是用上 __与 -- 将样式命名进行区分。 三、不用BEM会少个胳膊吗
这是个很冷笑话式的问题在任何时间地点不使用BEM规范进行约束都不会让你少个胳膊少个腿这些是约束自我的规则其价值来自遵循它们当然前提是你的项目规范支持你这么做不然你的同事可能不介意帮你少个胳膊哈哈如果你不喜欢这么做那大可不用纠结于此规范。BEM模块化的规范必定会带来一些坏处最明显的一个问题就是容易将名称命名过长看起来臃肿而凌乱这也是最常被用来反对 BEM 的论点在我看来这其实即使优点也是缺点你也不希望这么一个选择器 p li .title {} 与你 HTML 结构命名一样的业务模块发生样式污染吧如果坚定了决心那么在不使用BEM规范的情况下还有什么比较好的CSS命名方法吗以下面的示例演示可以这么去做。
article classfruit-selectdiv classcell-listdiv classcell-itemspan classcell-text香蕉/spaninput typecheckbox classcell-checkbox/divdiv classcell-item activespan classcell-text榴莲/spaninput typecheckbox classcell-checkbox/divdiv classcell-itemspan classcell-text柚子/spaninput typecheckbox classcell-checkbox/div/div
/article将HTML元素辅助的作用进行语义化对CSS类名进行一个简单的命名对于不同状态样式一块考虑使用交集选择器进行编写。
.fruit-select {width: 200px;padding: 10px 0;border: 1px solid #666;
}.cell-list {display: flex;flex-direction: column;
}.cell-item {box-sizing: border-box;display: flex;justify-content: space-between;align-items: center;width: 100%;height: 40px;padding: 0 10px;
}.cell-item .cell-item {border-top: 1px solid #666;
}.cell-item.active {color: #FFF;background-color: #FFA500FF;
}当然这其实也是一个建议至少在我没有接触到BEM规范之前的一段时间我都是这么去书写我的代码。 四、Sass与BEM的结合
BEM 毕竟只是应该风格规范只要有需要手动编写样式的地方就能发挥 BEM 的威力将 Sass 与 BEM 搭配可大大提高开发效率可谓是锦上添花。在一开始的 二、BEM要怎么用 示例代码中就用到了 Sass而 Sass 应用在前端框架中可以说是最常见的操作接下来将完整的以 Vue Sass 实现一个表格页面为例。
script langts setup/** 组件名: bem* 组件用途: bem规范示例页* 创建日期: 2023/12/27* 编写者: XianZhe*/import { reactive } from vue;const $state reactive({source: [[阿联酋迪拉姆, 193.89, 192.29, 195.25, 198.79, 193.42, 2023-12-27],[澳大利亚元, 486.94, 486.44, 490.2, 491.62, 485.15, 2023-12-27],[加拿大元, 539.83, 539.28, 543.45, 545.02, 538.58, 2023-12-27],[瑞士法郎, 834.27, 833.6, 840.13, 842.47, 832.27, 2023-12-27],[丹麦克朗, 105.47, 105.28, 106.31, 106.82, 105.11, 2023-12-27],[欧元, 786.92, 780.98, 792.43, 794.48, 784.52, 2023-12-27],[英镑, 905.71, 904.78, 911.78, 914.41, 904.36, 2023-12-27],[港币, 91.34, 91.32, 91.68, 91.68, 90.9, 2023-12-27],[印尼卢比, 0.0461, 0.0447, 0.0466, 0.0482, 0.0461, 2023-12-27],[日元, 4.9913, 4.9912, 5.0247, 5.0267, 4.9951, 2023-12-27],[美元, 713.21, 713.05, 716.05, 716.05, 710.02, 2023-12-27]]});
/scripttemplatesection idbem classbemheader classbem__hdh2BEM规范表格页/h2/headermain classbem__bdtable classbem__tablethead classbem__table__hdtrth货币名称/thth现汇买入价/thth现钞买入价/thth现汇卖出价/thth现钞卖出价/thth中行折算价/thth发布日期/thth操作/th/tr/theadtbody classbem__table__bdtr v-for(item, index) in $state.source :keyindextd v-forsitem in item :keysitem{{ sitem }}/tdtddiv classbem__table__operationspan classbem__table__operation-btn bem__table__operation-btn--danger删除/spanspan classbem__table__operation-btn bem__table__operation-btn--primary详情/span/div/td/tr/tbody/table/mainmain classbem__ftbutton classbem__btn你好/button/main/section
/templatestyle langscss scoped.bem {__bd {margin-bottom: 20px;}__table {border-collapse: collapse;border: 1px solid #000;__hd {background-color: #F0F0F0;}__bd {tr {border-top: 1px solid #000;}}__operation {display: flex;justify-content: space-between;align-items: center;padding: 0 10px;-btn {cursor: pointer;}-btn--primary {color: #409EFF;}-btn--danger {color: #F56C6C;}}td {min-width: 100px;text-align: center;}}__btn {width: 100px;height: 38px;border: unset;color: #FFF;border-radius: 4px;background-color: #409EFF;cursor: pointer;:hover {background-color: #79BBFF;}:active {background-color: #337ECC;}}}
/style
再来看看 ELement-ui 关于 BEM 应用的部分源码以供更多参考此源码取自 ELement-ui 级联组件部分。Element-ui 源码对于 BEM 的应用比较高级简单来说就是利用 Sass 的 Mixin混合将 BEM 拆分成 b、e、m 三者的混合函数再使用 include 注入到每一个组件之中。
include b(cascader) {include set-component-css-var(cascader, $cascader);display: inline-block;vertical-align: middle;position: relative;font-size: getCssVar(font-size, base);line-height: map.get($input-height, default);outline: none;:not(.is-disabled):hover {.#{$namespace}-input__wrapper {cursor: pointer;box-shadow: 0 0 0 1px getCssVar(input, hover-border-color) inset;}}.#{$namespace}-input {display: flex;cursor: pointer;.#{$namespace}-input__inner {text-overflow: ellipsis;cursor: pointer;}.#{$namespace}-input__suffix-inner {.#{$namespace}-icon {height: calc(100% - 2px);svg {vertical-align: middle;}}}...}...
}与之类似的还有Less这个CSS预处理器使用起来和Sass是一样的道理。 五、块与修饰符应放在一块
看到下面这个选择器.cell__item--active你会期待什么正确的做法是将.cell__item--active 与 .cell__item 放到一块不能因为样式一样则直接使用公共样式应该改用其他选择器样式。
article classcell__listdiv classcell__itemp classcell__item--activeList item 1/pbutton按钮/button/divdiv classcell__item.../div
/article还有存在这种情况不同的块覆盖同一层级的修饰符不要这么做。
style.block__btn {color: #333;background-color: #FFF;border: unset;}.block__inner .block__btn--primary {background-color: #409EFF;}
/style
div classblockdiv classblock__innerbutton classblock__btn block__btn--primary按钮/button/div
/div切勿覆盖不相关块中的修饰符。明确作用域原则避免搞砸对 BEM 非常有帮助的特异性。 参考资料
因发布平台差异导致阅读体验不同源文贴出《CSS 小技巧之BEM规范》
网络文献 getbemcss-trickswhy use bem? 推荐博文
『速查手册』HTML 语义化标签 | 语义化标签必要性『干货』WebStorm代码模板配置大全
