BEM —— 源自Yandex的CSS 命名方法论

【BEM —— 源自Yandex的CSS 命名方法论】的更多相关文章

BEM —— 源自Yandex的CSS 命名方法论

原文链接: https://segmentfault.com/a/1190000000391762 人们问我最多的问题之一是在CSS类名中--和__是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义.BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时…

BEM --Yandex的CSS 命名方法论

人们问我最多的问题之一是在CSS类名中--和__是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义.BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目. 重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagher修改…

BEM（一种 CSS 命名规则）

一. 什么是 BEM BEM的意思就是块(block).元素(element).修饰符(modifier),是由 Yandex 团队提出的一种前端命名方法论. 这种巧妙的命名方法让你的 CSS 类对其他开发者来说更加透明而且更有意义.(摘录自伯乐在线,不擅总结见谅) <div class="tabs category-tabs"> <a href="#" class="tabs__item tabs__item--active"…

CSS命名方式=》BEM

时间:2016-11-04 20:04:53 原文地址:https://github.com/zhongxia245/blog/issues/48 一.背景挺早就听说过BEM了,也大概的知道怎么用,但是具体 BEM 指啥,具体有啥要求,还不是很清楚,然后今天就学习了下. 二.BEM(Block,Element,Modifier) BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对…

CSS命名规范——BEM思想（非常赞的规范）

人们问我最多的问题之一是在CSS类名中“--”和“__”是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义.BEM命名约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时的大项目. 重要的是要注意,我使用的基于BEM的命名方式是经过Nicolas Gallagh…

前端css命名规范----BEM

一.什么是BEM BEM就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种前端命名方法论.这种巧妙的命名方法可以使css类对其他开发者来说更加透明且具有意义.BEM约定更加严格,而且包含更多的信息,它们用于一个团队开发一个耗时较大的项目. BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的.通过浏览HTML代码中的class属性,就能够明白模块之间是如何关联的,有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件…

CSS 命名规范 BEM 思想

Part.1 何为 BEM? BEM :Block ( 块 ) 丶Element ( 元素 ) 丶Modifier ( 修饰符 ) 出处:是由 Yandex 团队提出的一种前端命名方法论优点:命名方式条理清晰丶易懂:更加适用于团队合作项目 Part.2 例如 .block{} .block__element{} .block--modifier{} .block 最高级-块 .block__element 代表.block的后代 .block--modifier代表.block的不同状态或…

CSS 命名管理之 BEM

好吧,将 BEM 简单的解释为 “Block-Element-Modifier“, 其实是个不负责任的做法.鬼知道 Block 是什么啊?所以,看了一些似懂非懂的中文解释之后,自己还是得去找些英文来读一读,顺便总结一下. 本人对 HTML.JavaScript.CSS 其实都只是一知半解,所以,如果有理解不到位的,还望各位看官斧正.但是,本着“要学就要学最先进”的原则,即使是基础不扎实,还是要冲着更有效率的方式前进. 有不想看我罗嗦的看官,可以直接看下面这篇文档: https://css-tri…

css命名规范： BEM 的命名法

整理自:前端早读课[第1183期]这些 CSS 命名规范,将省下你大把调试时间试图解决 3 类问题: 仅从名字就能知道一个 CSS 选择器具体做什么从名字能大致清楚一个选择器可以在哪里使用从 CSS 类的名称可以看出它们之间的联系不知你是否见过这样的类名: .nav--secondary { ... } .nav__header { ... } 这就是 BEM 命名规范. 这个火柴人代表了一个组件,比如说一个设计区块. BEM 这里的 B 意为『区块』('Block'). 在实际中,这里…

css命名管理混乱？不妨试试BEM

css的缺陷我们知道,css使用中一个比较令人烦恼的问题,就是css没有作用域可言,我们写了一个组件或者模块之后,往往希望它们可以四处复用,但是由于css没有作用域,我们给样式命名的时候都会非常小心,因为害怕命名重复导致组件的样式被覆盖.于是,每个新加入项目的开发者在开发类似已有的组件时,很可能就自己重新命名一份新的样式表,以免和现有的重复,那么就会导致css文件像滚雪球一样越来越大. 现在市面上有许多旨在减少CSS代码量,且方便程序员合作和维护CSS代码的方案,例如OOCSS.SMACSS.…

css 命名规则 BEM!

随着CSS的发展,使用CSS有语义化的命名约定和CSS层的分离,将有助于它的可扩展性,性能的提高和代码的组织管理.著作权归作者所有. BEM本质应该是一个css命名方案,最流行的命名规则之一就是BEM,(block:块,Element:元素,Modifier:修饰符),通过给每个元素添加它的父级block模块作为前缀,使得目标的安全性变得更加简单了:BEM还有助于消除页面和body类对嵌套或者附加样式依赖:BEM是一个非常有用,强大和简单的命名规范,使您的前端代码更容易阅读和理解,更容易使用,更…

CSS命名实践

前面的话每次写HTML结构涉及到CSS命名时,都要挣扎一番.关于CSS命名的规范,市面上有不少,如OOCSS.SMACSS.BEM和MVCSS等.在这里面最火的应该算BEM了.本文将详细介绍CSS命名主流命名 [BEM] 说起CSS命名,当然要提到BEM.BEM的意思就是B模块(block).E元素(element).M修饰符(modifier).模块和子元素之间用两个下划线分隔,子元素和修饰符之间用两个中划线分隔关于子元素E,有两种写法.一种是按照层级嵌套来写,如block-ele1…

CSS 命名规范总结

CSS 命名规范总结 BEM 命名给 CSS 以及 html 提供清晰结构,命名空间提供更多信息,模块化提高代码的重用,以达到 CSS 命名语义化.可重用性高.后期维护容易.加载渲染快的要求. 首先,这是一篇仅对 CSS 命名的总结,更多 CSS 规范请参考规范文档.其次 CSS 命名并无对错之分,只是不同的命名方式和代码的优雅程度与后期维护有着密切关系. @iamdevloper pic.twitter.com/4SRgVDDaiC — Saeed Prez (@SaeedPrez) 2016…

浅谈我所见的CSS命名风格

在两年工作中,总结一下我所见的css命名风格. 1.单一class命名 .header { width: 500px; } .item { text-indent: 20%; } 优点:简单,渲染效率高. 缺点:零散,没有模块化. 2. 后代选择器class命名 .header .item a { font-size:14px; } .header .item a span { color:#000; } 优点:模块化,只对当前模块有效. 缺点:渲染效率低,增加冗余字符. 3.前缀叠加class…

CSS 命名规范将省下调试时间

我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不错吧? 尽管如此,CSS 写得越多,你越容易发现一个巨大的弊端. 因为维护 CSS 真是老大难. 特别是那些写得差劲的 CSS 会很快变成程序员的噩梦. 这里向大家介绍一些命名规范,遵照这些规范可以省时省力,少走弯路. 对此你一定深有体会吧? 使用连字符分隔的字符串如果你常写 JavaScript…

我认为最节省时间的CSS命名规范

CSS命名规范一 js中对变量的命名最好使用camel case驼峰式命名法,但CSS中更适用于red-box命名规范. CSS命名规范二 BEM命名规范 B=>block E=>element M=>modifier 1.组件的子组件用两条下划线命名 stick-man__head 2.对组件的修饰用两条短线命名 stick-man--red 3.与js代码有关的用js-开头命名 js-stick-man 4.使用属性用属性名命名 [rel='js-stick-man']…

这些 CSS 命名规范将省下你大把调试时间

我听说很多开发者厌恶 CSS.而在我的经验中,这往往是由于他们并没有花时间来学习 CSS. CSS 算不上是最优美的『语言』,但迄今二十多年来,它都是美化 web 举足轻重的工具.从这点来说,也还算不错吧? 尽管如此,CSS 写得越多,你越容易发现一个巨大的弊端. 因为维护 CSS 真是老大难. 特别是那些写得差劲的 CSS 会很快变成程序员的噩梦. 这里向大家介绍一些命名规范,遵照这些规范可以省时省力,少走弯路. 对此你一定深有体会吧? 使用连字符分隔的字符串如果你常写 JavaScript…

（转）面向属性的CSS命名

原文链接:戳这里自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来给它命名,因为一般命名总是考虑语义化,好让其他人看到这个css类的名字就知道它是作用于哪一个内容的,但是由于网页内容的复杂性和多样性,你很难保证每个部分都能起一个合适的名字,即使你最终迫不得已想出了一个名字,也会有这个名字是否是最合适的这种纠结存在,而且最要命的是,这个命名的过程是…

面向属性的CSS命名

自从开始做前端开发以来,我发现在开发页面的时候,总是有一个问题十分影响自己的开发效率,这个问题就是css的命名,主要是指css类选择器的命名.这个问题主要体现在:第一,有的内容你压根想不出用什么名字来给它命名,因为一般命名总是考虑语义化,好让其他人看到这个css类的名字就知道它是作用于哪一个内容的,但是由于网页内容的复杂性和多样性,你很难保证每个部分都能起一个合适的名字,即使你最终迫不得已想出了一个名字,也会有这个名字是否是最合适的这种纠结存在,而且最要命的是,这个命名的过程是一项非常辛苦的脑力…

CSS命名规范

DIV+CSS规范命名大全集合前端人员必看CSS命名规范整理: 文件名必须由小写字母.数字.中划线组成 ).所有的命名最好都小写,一律采用小写加中划线的方式,不允许使用大写字母或 _2).属性的值一定要用双引号("")括起来,且一定要有值,若class=""则最好去掉3).每个标签都要有开始和结束,且要有正确的层次,排版有规律工整4).空元素要有结束的tag或于开始的tag后加上"/"5).表现与结构完全分离,代码中不涉及任何的表现元素,如s…

精简高效的css命名准则

对于css,为了避免样式冲突,我们总会赋予相当特殊的命名,或是在选择符上添加html标记,或是使用层级.我们为避免在冲突上做文章,就会把代码的命名变得复杂化. 如果css的重用性越高,相比就越高效.如果名字越普通就越没有含义,越容易被重用,所以css想要重用性高,就需要命名简单.但是,简单的命名越容易造成冲突面向属性的命名方法我们习惯在css命名的时候掺杂语义,这样可以让代码更易懂.例如淘宝中免费注册:help-guest-regist .l{float:left} .r{float:rig…

html，css命名规范（转）

HTML+CSS命名规范总结 1.HTML部分 1.1添加必须的utf-8的字符集,并且使用HTML5的简洁方式: <meta charset="utf-8"> 1.2遵循xhtml1.0规则 1)所有标签必须结束 2)所有标签必须小写 3)标签属性必须使用成对引号(单引号或双引号) 4)标签属性必须有值: 5)所有特殊符号必须转义 1.3标签属性命名规范 Id:连接符命名法"hello-world" Class:连接符命名法"hello-w…

Div+CSS命名规范

注意事项:1.命名遵循驼峰式 2.尽量用中文 3.不加中杠和下划线 4.尽量不缩写,除非一看就明白的单词头:header 标志:logo 友情链接:friendlink 内容:content/container 广告: banner 页脚: footer 尾: footer 页面主体:main 版权: copyright 导航:nav 热点:hot 滚动:scroll 侧栏:sidebar 新闻:news 栏目:column 下载:do…

CSS命名

CSS命名规范 CSS样式命名整理页面结构容器: container/wrap 整体宽度:wrapper 页头:header 内容:content 页面主体:main 页尾:footer 导航:nav 侧栏:sidebar 栏目:column 中间内容:center 导航导航:nav 导航:mainbav/globalnav 子导航:subnav 顶导航:topnav 边导航:sidebar 左导航:leftsidebar 右导航:rightsidebar 边导航图标:sidebarIco…

常用的css命名规则：

关于团队合作的css命名规范常用的css命名规则: 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接…

常用的css命名规则

头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:footer 版权:co…