Naming rules

block_name__element_name--modifier_name-modifier_value

  • Names are written in lowercase Latin letters.

  • Words are separated by a underscore (_).

  • The block name defines the namespace for its elements and modifiers.

  • The element name is separated from the block name by a double underscore (__).

  • The modifier name is separated from the block or element name by a double dashes (--).

  • The modifier value is separated from the modifier name by a single dash (-).

  • For boolean modifiers, the value is not included in the name (--disabled).

HTML FOR CSS

Positioning a block relative to other blocks

To set a block relative to other blocks,the best approach is usually to use a mix.

HTML implementation

<body class="page">

    <header class="header page__header">header</header>

    <footer class="footer page__footer">footer</footer>

</body>

CSS implementation

    .page {color: #000;}

    .header {color: #000;}

    .footer {color: #000;}

    .page__header {color: #000;}

    .page__footer {color: #000;}

Positioning elements inside a block

The position of nested HTML elements is usually set by creating an additional block element (for example, block__inner ).

<body class="page">

    <div class="page__inner">

      <!-- header-->

      <header class="header">...</header>

      <!-- footer -->

      <footer class="footer">...</footer>

    </div>

</body>


.page__inner {

    margin-right: auto;

    margin-left: auto;

    width: 960px;

}

CSS-With-BEM的更多相关文章

  1. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  2. 问答：怎样规划CSS 中 的命名方式 怎样看待 CSS 中 BEM 的命名方式？

    好多盆友 非常纠结 css命名规则 怎么弄,还没起步就被绊住了.那么今天蝈蝈就针对这个问题来讨论一下 没什么技术 含量.但却对效率开发至关重要的 "问题". 下文是一些知乎大神的个 ...

  3. CSS 中 BEM命名方式

    BEM的意思就是块(block).元素(element).修饰符(modifier),是一种CSS Class 命名方法. 类似于: .block{} .block__element{} .block ...

  4. 玩点不同之CSS的BEM规范

    1.BEM引入背景 因为项目的业务逻辑发生重大变化,所以原来大半年的开发周期里做的事情基本上变成无用功.但是公司的项目上线时间依旧没有改变.剩下的时间只有区区的两个月,要做的功能是有社区+电商+核心业 ...

  5. css规范 - bem

    用我的话简述来说,即 B:何种元素 E:何种模块使用它(header,footer)等 M:描述它是做何种事情的 例如就是我有个主页,名称是:index.html index_header_logo ...

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

    css的缺陷 我们知道,css使用中一个比较令人烦恼的问题,就是css没有作用域可言,我们写了一个组件或者模块之后,往往希望它们可以四处复用,但是由于css没有作用域,我们给样式命名的时候都会非常小心 ...

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

    原文链接: https://segmentfault.com/a/1190000000391762 人们问我最多的问题之一是在CSS类名中--和__是什么意思?它们的出现是源于BEM和Nicolas ...

  8. BEM --Yandex的CSS 命名方法论

    人们问我最多的问题之一是在CSS类名中--和__是什么意思?它们的出现是源于BEM和Nicolas Gallagher... BEM的意思就是块(block).元素(element).修饰符(modi ...

  9. css编写规则BEM

    简单来说,格式如下: .block { /* styles */ } .block__element { /* styles */ } .block--modifier { /* styles */ ...

  10. 开始编写CSS

    本文由大漠根据Krasimir Tsonev的<Starting to Write CSS>所译,整个译文带有我们自己的理解与思想,如果译得不好或不对之处还请同行朋友指点.如需转载此译文, ...

随机推荐

  1. Spring02-注入和注解方式操作

    一. 依赖注入 测试类:Person.java 创建配置文件:applicationContext-injection.xml 创建测试代码:InjectionTest.java 1. set方法注入 ...

  2. 【模板】可持久化文艺平衡树-可持久化treap

    题目链接 题意 对于各个以往的历史版本实现以下操作: 在第 p 个数后插入数 x . 删除第 p 个数. 翻转区间 [l,r],例如原序列是 \(\{5,4,3,2,1\}\),翻转区间 [2,4] ...

  3. LGP2801 教主的魔法

    题目链接 : P2801 教主的魔法 这是第一次A分块的题 就是模板题了 每个块内排序 每个整块仅需维护整块的修改量 询问操作: 对于边缘块 直接暴力找在[l, r]内 且比给定值大的有几个 对于整块 ...

  4. 搭建web定时任务管理平台

    需要安装mysql及gityum -y install git mysql-server 下载安装go官网:https://golang.org/dl/wget https://redirector. ...

  5. Codeforces | CF1000B 【Light It Up】

    蒟蒻第二篇题解... 比赛的时候写这道题MLE了qwq..根据CF的赛制我也没敢再交第二次.. 简单讲一下思路好了(假装是dalao)..根据题意要加一个或者不加新的点..如果加一个新的点意味着从这个 ...

  6. cf1073G Yet Another LCP Problem (SA+权值线段树)

    反正先求一遍sa 然后这个问题可以稍微转化一下 默认比较A.B数组中元素的大小都是比较它们rank的大小,毕竟两个位置的LCP就是它们rank的rmq 然后每次只要求B[j]>=A[i]的LCP ...

  7. 合法括号序列（dp+组合数学）

    键盘上有左括号(,右括号),和退格键-,共三个键. 牛牛希望按键n次,使得输入的字符串恰好一个合法的括号序列. 每按一次左括号(,字符串末尾追加一个左括号( 每按一次右括号),字符串末尾追加一个右括号 ...

  8. An Introduction to OAuth 2

    PostedJuly 21, 2014 1.1mviews SECURITY API CONCEPTUAL Mitchell Anicas Introduction OAuth 2 is an aut ...

  9. goroutine与调度器

    29 November 2013 by skoo 我们都知道Go语言是原生支持语言级并发的,这个并发的最小逻辑单元就是goroutine.goroutine就是Go语言提供的一种用户态线程,当然这种用 ...

  10. poj1637 Sightseeing tour(混合图欧拉回路)

    题目链接 题意 给出一个混合图(有无向边,也有有向边),问能否通过确定无向边的方向,使得该图形成欧拉回路. 思路 这是一道混合图欧拉回路的模板题. 一张图要满足有欧拉回路,必须满足每个点的度数为偶数. ...