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

在项目的开发过程当中, 我们往往因为日益复杂的css代码而感到力不从心. 如何合理的组织css代码成为了我们前端开发过程中必须考虑到的环节. 在读element源代码的时候, 了解到了BEM的命名风格. 使用 BEM 命名规范,理论上讲,每行 css 代码都只有一个选择器.BEM代表 "块(block),元素(element),修饰符(modifier)",我们常用这三个实体开发组件.在选择器中,由以下三种符号来表示扩展的关系: - 中划线 :仅作为连字符使用,表示某个块或者某个子元素…

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

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

良好的代码结构,HTML和css元素之间的关系,对于项目交付是很重要的! BEM解释: (1).block 是BEM的区块(B),包含内容和风格.如bootstrap框架的.container. (2).block-element 代表自子容器(E).如bootstrap框架的轮播图,.carousel表示轮播图,carousel-indicators表示轮播图的对应点,carousel-inner表示轮播图的内容. (3).block-modifier,表示区块元素的改变(M).如bootst…

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

做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规范. Div+CSS命名规范一. 窗体 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo…

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

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

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

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

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…

一.CSS 命名规范   XHTML-CSS写作建议 所有的xhtml代码小写 属性的值一定要用双引号("")括起来,且一定要有值 每个标签都要有开始和结束,且要有正确的层次 空元素要有结束的tag或于开始的tag后加上"/" 表现与结构完全分离,代码中不涉及任何的表现元素,如style.font.bgColor. border等 <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引 擎的查询. 给每一个表格和表单加…

 Html+CSS命名规范: 1.样式命名: 2.样式文件命名:…

CSS命名规范(规则)常用的CSS命名规则   CSS命名规范(规则)常用的CSS命名规则   头:header   内容:content/container   尾:footer   导航:nav   侧栏:sidebar   栏目:column   页面外围控制整体佈局宽度:wrapper   左右中:left  right  center   登录条:loginbar   标志:logo   广告:banner  …

一．文件命名规范 样式文件命名主要的 master.css布局,版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css [/quote] CSS ID 的命名页头:header登录条:loginbar标志:logo侧栏:sidebar广告:banner导航:nav子导航:subnav菜单:menu子菜单:submenu搜索:search滚动:scroll页面主体:main内容:content标签页:tab文章列表:lis…

一个好的命名习惯(当然这里指的并不仅仅是CSS命名).不仅可以提高开发效率,而且有益于后期修改和维护. 假设我们当前使用的命名方式都是约定成俗的,所有人都是这样写,那么你去到一个新团队,或者别人来接手你的工作,都可以大大缩短去阅读别人代码的时间. 一个规范化的命名,不用说,只要想想就能体会到其中的好处了. CSS:命名规范心得分享 板块(Plate) 命名(Naming) 说明(Description)   主容器 wrapper 页面上最大的外部容器,如无特殊需求,不推荐使用 页面头部 hea…

1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, border等)5.其他(animation, transition等) CSS书写规范 使用CSS缩写属性 CSS有些属性是可以缩写的,比如padding,mar…

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

一.什么是BEM? BEM代表块(Block),元素(Element),修饰符(Modifier).无论是什么网站页面,都可以拆解成这三部分. 二.带你认识网页 我们来看一下qq的官网,它可以由三个块组成:logo,导航nav和页面主题mian三个模块构成,如果再细分一下呢?logo是由图片和文字两个元素组成,导航由三个元素组成,页面主题中包含图片,文字和按钮三个元素, 如果把一个块看作是一个数组的话,那么元素就是数组中的每一项. 什么是修饰符呢?你可以看作是元素的属性,或者是他的形态.状态,比…

搜索引擎优化(seo)对命名规范有很多要求,下面是我收集的一些当下主流的命名(还是比较常用的): CSS样式命名 说明 网页公共命名 #wrapper 页面外围控制整体布局宽度 #container或#content 容器,用于最外层 #layout 布局 #head, #header 页头部分 #foot, #footer 页脚部分 #nav 主导航 #subnav 二级导航 #menu 菜单 #submenu 子菜单 #sideBar 侧栏 #sidebar_a, #sidebar_b 左边…

无论做什么,规则总是最重要的.无规矩不成方圆,有了规矩,我们才能有规可循,有则可依,人与人之间才能正常的交流交往. 人人都有自己的命名习惯,不过,代码是需要交流的,当有些命名习惯仅只自己能看懂,甚至自己在过后都看不懂时,就成为了交流中的障碍了.所以,有一个规范的命名规则是很重要的.命名规则有很多,大家各取所需,这里介绍一下在html/css中一些约定俗成的命名规范,权作记录: 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来,且一定要有值如class="di…

一.CSS文件及样式命名1.CSS文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: css.css普通样式   (全局,文字)link.css 链接样式layout.css框架布局: 2.CSS样式命名规范本人建议:用字母._号工.-号.数字组成,必须以字母开头,不能为纯数字.为了开发后样式名管理方便,大家请用有意义的单词或缩写组合来命名,让同事一看就明白这样式大概是哪一块…

网页制作中规范使用DIV+CSS命名规则,可以改善优化功效特别是团队合作时候可以提供合作制作效率, 我们开发DIV+CSS网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明: 1).所有的命名最好都小写2).属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"3).每个标签都要有开始和结束,且要有正确的层次,…

原文链接 常用DIV+CSS命名大全集合,即CSS命名规则 我们开发CSS+DIV网页(Xhtml)时候,比较困惑和纠结的事就是CSS命名,特别是新手不知道什么地方该如何命名,怎样命名才是好的方法. 一.命名规则说明 1.所有的命名最好都小写 2.属性的值一定要用双引号("")括起来,且一定要有值如 class="helloweb" , id="helloweb" 3.每个标签都要有开始和结束,且要有正确的层次,排版有规律工整 4.空元素要有结束…

CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ vertical-align white-space text-decoration text-align … /*文字*/ color font content /*边框背景 为什么要把 boder和background放在最后的原因是修改的频率会较之前的频繁,放在最后查看起来方便,哈哈.*/ …

一.命名规则说明 所有的命名最好都用小写 使用英文命名 给每一个表格和表单加上一个唯一的.结构标记id 给每个图片加上alt标签,优点在于图片发生错误时,alt可以体现给用户 二.相对网页外层重要部分css样式命名 wrap——用于最外层 header——用于头部 main——用于主题内容(中部) main-left——左侧布局 main-right——右侧布局 nav——网页菜单导航条 content——用于网页中部主体 footer——用于底部 css命名其他说明 DIV+CSS命名小结:无…

转载: http://www.php.cn/toutiao-417563.html 文本命名规范 index.css: 一般用于首页建立样式 head.css: 头部样式,当多个页面头部设计风格相同时使用. base.css: 共用样式. style.css:独立页面所使用的样式文件. global.css:页面样式基础,全局公用样式,页面中必须包含. layout.css:布局.版面样式,公用类型较多时使用,一般用在首页级页面和产品类页面中 module.css:模块,用于产品类页,也可与其它…

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