美文网首页程序猿阵线联盟-汇总各类技术干货
VUE中CSS命名规范(参考BEM命名规范)

VUE中CSS命名规范(参考BEM命名规范)

作者: 超棒的程序员 | 来源:发表于2018-04-26 21:26 被阅读0次

       用了elementUI后,发现css类名中“--”和“__”,不知道是什么意思?于是上网查了一下,它们的出现是源于BEMNicolas Gallagher...

      BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目。

.block 代表了更高级别的抽象或组件。

.block__element 代表.block的后代,用于形成一个完整的.block的整体。

.block--modifier代表.block的不同状态或不同版本。

.site-search{} /* 块 */  

.site-search__field{}/* 元素 */ 

.site-search--full{}/* 修饰符 */

我的vue项目中使用sass预处理css,sass有嵌套,所以我在每个组件用一个容器,起名为:组件名-wrapper,组件名是唯一的,然后把这个组件的css都写在.组件名-wrapper里,在加个scoped,以免冲突。。。

上代码:

    由于笔记本没装sass,所以报错,大家就将就看下吧!第一次写简书,下次好好弄!

相关文章

  • VUE中CSS命名规范(参考BEM命名规范)

    用了elementUI后,发现css类名中“--”和“__”,不知道是什么意思?于是上网查了一下,它们的出现...

  • 简单好用的CSS命名规范

    CSS命名规范 BEM命名法 BEM(Block, Element, Modifier)是由Yandex团队提出的...

  • 内部前端规范v1.0

    项目目录结构规范 请查看 项目目录结构规范 HTML 命名规范 class 命名实行 BEM命名方式。关于BEM,...

  • web前端经验分享

    CSS技巧 解决css样式污染方案 命名约定 BEM命名规范 使用CSS Modules css实现新手引导效果 ...

  • CSS命名——BEM

    前言 详情见参考,下面的只是部分摘要 BEM是什么 BEM是一种CSS命名规范。BEM代表 “块(block),元...

  • CSS代码规范

    CSS规范 一.命名规范BEM(Block Element Modifier) 1.Block name 1) 实...

  • CSS BEM 命名简介

    BEM是一种CSS命名规范,旨在使用严格的命名约定,使得CSS类的命名更加透明,能直接了解上下文含义。BEM分别代...

  • CSS命名规范—BEM

    背景:最近上了一个前端项目,技术栈是angular + ionic。在听别的前端人员讨论的时候听到一个词叫BEM,...

  • css命名规范-BEM

    什么是BEM BEM其实是块(block)、元素(element)、修饰符(modifier)的缩写,利用不同的区...

  • BEM(CSS命名规范)

    在Web项目中规范css命名还是很有必要的,BEM传送门。 通过阅读Element-UI源码来分析学习BEM规范,...

网友评论

    本文标题:VUE中CSS命名规范(参考BEM命名规范)

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