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

时间: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命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个人经验总结,假设认为实用请点赞 留言!    JS前端实用开发QQ群 :147250970  欢迎添加~! 怎样看待 CSS 中 BEM 的命名方式? BEM的意思就是块(block).元素(element).修饰符(modifier),是由Yandex团队提出的一种CSS Class 命名方法. 相似于:…

简介 简易 css 命名方式,减小命名冲突,使得 css 更有组织感和识别感.但如今写 react 项目大多可以忽略对 css 的命名约束了. 官网介绍:http://getbem.com/introduction/ 释义 Block:具有独立意义的实体,就如 header, container, menu, checkbox, input Element:块的一部分,没有独立的含义,并且在语义上与该块相关.如 menu item, list item, checkbox caption, he…

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

[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料,感兴趣的小伙伴们可以参考一下 [主体] 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作…

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

文件夹: 1.CSS凝视的书写 怎么写?优点? 2.CSS引入方式  各种的优缺点 3.选择器的写法与选择器的优先级 4.CSS命名规范 5.背景,行高 6.文本(text与font开头)等全部属性 ① CSS凝视书写规范: 1.单行凝视:        直接写在属性值的后面.如: ① .search{ border:1pxsolid#fff;/*定义搜索输入框边框*/ background:url(../images/icon.gif)no-report#333;/*定义搜索框的背景*/ }…

推荐阅读: https://juejin.im/post/5b925e616fb9a05cdd2ce70d 1 什么是 BEM 命名规范 Bem 是块(block).元素(element).修饰符(modifier)的简写,由 Yandex 团队提出的一种前端 CSS 命名方法论. - 中划线 :仅作为连字符使用,表示某个块或者某个子元素的多单词之间的连接记号. __ 双下划线:双下划线用来连接块和块的子元素 -- 双中划线:双中划线用来描述一个块或者块的子元素的一种状态 BEM 是一个简单又非…

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

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

Sass团队创建了Compass大大提升CSSer的工作效率,你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码,如下: .row { @include display-flex; } 会得到如下代码: .row { display: -webkit-flex; display: flex; } 但是, 做为一个长期用原生CSS书写方式的CSSer,不太习惯去官方查文档,再以@include方式书写. 那么问题来了,我只能放弃高效率方式么? 其实不然, Aut…

更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下去.让我们开始吧 postcss能做什么 补全css属性浏览器前缀 手写的代码可以是这样的: .div{ display: flex; } postcss可以转换之后成了这样: .div{ display: -webkit-box; display: -ms-flexbox; display: fl…

CSS语义化命名 从上图我们可以大概看出这里有两种CSS的命名方式:1.结构化命名法:2.语义化命名法. 结构化命名法:根据页面中板块的位置而命名,如上图中的content-left,这时如果我们想把侧边栏sidebar放在左边,那么这时content-left板块却在右边,板块位置与其命名完全不符,那么我们这时就要修改页面中的以及CSS样式中的选择器名字了,这样会很不方便,尤其是当页面结构复杂时,一会儿left,一会儿right,这样会很不容易维护. 语义化命名法:根据页面中模块的功能而命名,…

常用的Css命名方式: CSS命名规范: 1.文件命名规范 全局样式:global.css: 框架布局:layout.css: 字体样式:font.css: 链接样式:link.css: 打印样式:print.css: 2.常用类/ID命名规范 页 眉:header 内 容:content 容 器:container 页 脚:footer 版 权:copyright 导 航:menu 主导航:mainMenu 子导航:subMenu 标 志:logo 标 语:banner 标 题:title 侧…

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

css_scoped 与 css_module 我们知道,简单的class名称容易造成css命名重复,比如你定义一个class: <style> .main { float: left; } </style> 如果别人刚好也定义了一个className:.main,你的float:left就会影响到它. 所以Vue中发明了css_scoped,其原理就是在class名称后加上一个data属性选择器: <style scoped> .main { float: left;…

一直以来自己对命名都是比较混乱的,并没有一个比较好的格式来命名,最近自己碰巧学习到了BEM命名规范,我想谈谈自己的理解以供自己来学习,同时也可以和各位大佬一起学习. BEM是一个很有用的方法可以创建复用组件和前端代码 有三个特性. 易用性,使用BEM只需要使用BEM的命名规范就可以. 单元性,使用独立的块和CSS选择器,可以使你的代码可重用和单元化. 灵活性,使用BEM后,方法和工具可以按照自己喜欢的方式去组织和配置. BEM的简介 BEM是一个强大而简单的命名规范,使得代码更容易让人理解,容易…

最佳原则 坚持制定好的代码规范. 无论团队人数多少,代码应该同出一门. 项目命名 全部采用小写方式, 以下划线分隔. 例:my_project_name 目录命名 参照项目命名规则: 有复数结构时,要采用复数命名法. 例:scripts, styles, images, data_models JS文件命名 参照项目命名规则. 例:account_model.js HTML文件命名 参照项目命名规则. 例:error_report.html 语法 缩进使用soft tab(4个空格): 嵌套的节…

前端开发周报:CSS 布局方式与JavaScript动画库 1.常见 CSS 布局方式详见: 一些常见的 CSS 布局方式梳理,涉及 Flex 布局.Grid 布局.圣杯布局.双飞翼布局等.http://cherryblog.site/common-CSS-layout.html 2.几种 JavaScript 动画库推荐JavaScript 库对设计师和开发人员来说,都是非常有用的工具.它们可以为你的网站添加一些超级强大的功能,给用户带来更好的体验.http://www.tuicool.com…

BEM思想 1. 什么是BEM: BEM:(Block块,Element元素,Modifier修饰符)一种命名规范, 其核心思想是将页面拆分成一个个独立的富有语义的块(blocks),从而使得团队在开发复杂的项目变得高效,并且十分有利于代码复用,即便团队引入新成员,也容易维护. 基本命名模式 block{}, block__element{}, block--modifier{}, 2. BEM各元素: * Block :Block是逻辑和功能独立的单元,类似于组件.每个block包含自身的行为…

Why use it 近几年web应用的发展可以用疯狂来形容,依靠浏览器的支持以及前端技术和框架的发展,很多应用已经把大量的逻辑从服务器端迁移到了浏览器端,使用前后端分离技术,浏览器端与用户进行交互来完成复杂的逻辑.由于这个发展趋势,Web应用的前端代码的复杂度大大提高,尤其是 JavaScript 和 CSS 代码的数量大幅增加,面对空前庞大的css和js代码量,形成科学的代码组织方法和命名规范迫在眉睫. 好的命名规则应该满足以下几个优点: 安全的命名,不会干扰其它css 我需要很快知道一个…

无论是从技术角度还是开发视角,对于web前端开发规范文档都有一定规范,本文就css3和html5的发展前景总结了一系列的web开发文档,仅供大家参考. 规范目的: 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范进行前台页面开发. 本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本准则: 符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面,…

本文先回顾了以往流行的多渠道打包方式,随后引入的mcxiaoke的packer-ng-plugin项目,介绍该项目在实际应用(配合友盟统计)中如何解决更方便的Android多渠道打包问题 多渠道打包方案解析 实际应用集成 多渠道打包方案解析 android应用市场多种多样,应用宝.小米市场.豌豆荚...为了监督每个市场我们的应用下载和推广情况,对发布在每个市场上的apk打上烙印是必须的一步,这就是多渠道apk的问题,"渠道"就是给apk打上的烙印. 同时友盟统计可以帮我们统计渠道数据(…

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

在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外部引入,那么这三者有何区别?本文给大家讲解了从不同的角度分析他们的优势与劣势. 1.外部引入: 在HTML的head部分<link rel="stylesheet" type="text/css" href="css文件路径">,引入外部…

01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline    span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont…

原文链接:http://www.cnblogs.com/liufan9/archive/2013/04/02/2995626.html 对于以前做C#或者JAVA开发的朋友而言,初次接触iOS开发,Obj-C的函数命名方式可能会感觉非常不习惯. 尤其是打开AppDelegate.m,映入眼帘的代码竟然是: - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)l…

CSS选择器命名及常用命名 CSS选择器命名及常用命名 规范的命名也是Web标准中的重要一项,标准的命名可以使代码更加易读,而且利于搜索引擎搜索,比如定义了两个div,一个 id 命名为“div1”,另外一个命名为“News”,肯定第二个比较易读,而且搜索引擎抓取率要高,在团队合作中还可以大大提高工作效率.为了达到这种效果我们就要规范化命名(语义化命名)!   说个题外话,规范化命名的代码,会显着你更加专业!     关于CSS命名法,和其他的程序命名差不多,主要有三种:骆驼命名法,帕斯卡命名法…

在前天通过了最后的 Go/No-Go 会议后,Fedora 15 已定于下周正式发布,这个永远站在开源技术最前沿的发行版,即将迎来又一个新的大的变动.作为 Fedora 用户,相信你已经习惯了每个新版本的新功能所带来的种种不适,Fedora 15 也不会令你意外,它所采用的新的网卡命名方式 Consistent Network Device Naming (CNDN) 就是其中的一个. 比起 Fedora 15 的其它新功能,比如众所周知的 Gnome 3,CNDN 并不是一个多大的改动,但它所…