聊一聊BEM设计模式在Vue组件开发中的应用

LinkedME2016 发布于2019-08-20 16:05 / 3475人阅读

摘要：聊一聊设计模式在组件开发中的应用回想一下在你的前端生涯中是否遇到过以下问题在写的时候经常会在命名时绞尽脑汁在团队多人开发中出现命名冲突在进行组件化开发时如何规范书写什么是是团队提出的一种的命名方式，通过这种命名方式可以很好地解决上面遇到的问

聊一聊BEM设计模式在Vue组件开发中的应用

回想一下在你的前端生涯中是否遇到过以下问题
1.在写css的时候经常会在命名class时绞尽脑汁
2.在团队多人开发中出现css命名冲突
3.在进行组件化开发时如何规范书写css

什么是BEM

BEM是Yandex团队提出的一种css的命名方式，通过这种命名方式可以很好地解决上面遇到的问题，提高css的开发效率和可读性

进入BEM的世界

B: 表示块，可以抽象成一个组件

E: 表示元素，组件下的一个元素，多个元素形成一个组件

M:表示修饰符，可以用来表示元素的状态，比如激活状态，颜色，大小

BEM这货究竟张啥样呢，颜值高不高，请看下面的代码

    .block {}
    .block__element {}
    .block__element--modifier {}

看完后你的内心会不会在想,卧槽，这货居然这么丑，名字还这么长，丑拒...

__和--连接符这是什么鬼

__主要用来表示块(B)和元素(E)间的连接

--用来表示块或者元素与状态的连接

比如我们要做写一个button的组件，可以这么来

    
    /* 有一个叫button的组件 */
    .button {
         dispaly: inline-block;
         pading: 10px;
     } 

    /* btn组件下面有一个显示图标的元素 */
    .button__icont {
          font-size: 12px;
     }
    
    /* btn组件有好多颜色可以选择  */
    .button--primary {
        background: blue;
    }

    .button--success {
        background: green;
     }

    .button--warning {
        background: red;
     }

在Vue中结合Stylus预编译器使用BEM规范

云服务器 GPU云服务器聊一聊来聊一聊聊一聊去抖聊一聊java内存

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82700.html

聊一聊BEM设计模式在Vue组件开发中的应用

摘要：聊一聊设计模式在组件开发中的应用回想一下在你的前端生涯中是否遇到过以下问题在写的时候经常会在命名时绞尽脑汁在团队多人开发中出现命名冲突在进行组件化开发时如何规范书写什么是是团队提出的一种的命名方式，通过这种命名方式可以很好地解决上面遇到的问聊一聊BEM设计模式在Vue组件开发中的应用回想一下在你的前端生涯中是否遇到过以下问题1.在写css的时候经常会在命名class时绞尽脑汁2.在...

阿罗 2019-08-29 12:30 评论0 收藏0
[译]聊一聊CSS方法论

摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...

CoffeX 2019-08-28 18:20 评论0 收藏0
[译]聊一聊CSS方法论

摘要：这个方法论在内容和容器之间有着明显的区分。这是通过把命名为表示其角色的类名。通过使用这种扁平的命名方式避免了多后代的选择器。原文链接：A Look at Some CSS methodologies CSS在大型，复杂，快速迭代的系统中难以管理的程度是出了名的。其中一个原因是CSS缺少内置的作用域管理机制。在CSS中，所有的一切都是全局的，这意味着任何你所做的改变都有可能层叠或者改...

cfanr 2019-08-01 14:53 评论0 收藏0
聊一聊Vue组件模版，你知道它有几种定义方式吗？

摘要：活动结束单文件组件使用构建工具创建项目，综合来看单文件组件应该是最好的定义组件的方式，而且不会带来额外的模版语法的学习成本。前端组件化开发已经是一个老生常谈的话题了，组件化让我们的开发效率以及维护成本带来了质的提升。当然因为现在的系统越来越复杂庞大，所以开发与维护成本就变得必须要考虑的问题，因此滋生出了目前的三大前端框架 Vue、Angular、React。那今天我们就来看看 V...

instein 2019-08-26 10:35 评论0 收藏0
7月份前端资源分享

摘要：更多资源请文章转自月份前端资源分享的作用数组元素随机化排序算法实现学习笔记数组随机排序个变态题解析上个变态题解析下中的数字前端开发笔记本过目不忘正则表达式聊一聊前端存储那些事儿一键分享到各种写给刚入门的前端工程师的前后端交互指南物联网世界的更多资源请Star：https://github.com/maidishike... 文章转自：https://github.com/jsfr...

pingan8787 2019-08-20 17:53 评论0 收藏0