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. 【XSY2727】Remove Dilworth定理 堆 树状数组 DP

    题目描述 一个二维平面上有\(n\)个梯形,满足: 所有梯形的下底边在直线\(y=0\)上. 所有梯形的上底边在直线\(y=1\)上. 没有两个点的坐标相同. 你一次可以选择任意多个梯形,必须满足这些 ...

  2. composer阿里云短信服务不支持传参为数值--为2017年短信接口，2018阿里云有更新http://www.cnblogs.com/q1104460935/p/8916096.html

    composer 阿里云短信服务使用 xuying/aliyun_mns     更新到2017年初,不再更新 ){;, ); }; } ; }; }; }} 以下为发送成功返回对象 object(A ...

  3. MT【270】含参绝对值函数最大之二

    已知$f(x)=2ax\cos^2x+(a-1)\cos x-1,a>0$,记$|f(x)|$的最大值为$A$,1)求A.2)证明:$|-2a\sin 2x+(1-a)\sin x|\le 2A ...

  4. 「CodeForces 581D」Three Logos

    BUPT 2017 Summer Training (for 16) #3A 题意 给你三个矩形,需要不重叠不留空地组成一个正方形.不存在输出-1,否则输出边长和这个正方形(A,B,C表示三个不同矩形 ...

  5. LOJ #2234. 「JLOI2014」聪明的燕姿（搜索 + 数论）

    题意 给出一个数 \(S\) ,输出所有约数和等于 \(S\) 的数. \(S \le 2 \times 10^9\) ,数据组数 \(\le 100\) . 题解 首先用约数和定理: \[ \beg ...

  6. JavaWeb架构发展

    原文:JavaWeb项目为什么我们要放弃jsp?为什么要前后端解耦?为什么要前后端分离?2.0版,为分布式架构打基础 前戏 前后端分离已成为互联网项目开发的业界标准使用方式,通过Nginx + Tom ...

  7. 【BZOJ5291】[BJOI2018]链上二次求和（线段树）

    [BZOJ5291][BJOI2018]链上二次求和(线段树) 题面 BZOJ 洛谷 题解 考虑一次询问\([l,r]\)的答案.其中\(S\)表示前缀和 \(\displaystyle \sum_{ ...

  8. js处理异步的几种方式

    Javascript语言的执行环境是"单线程"(single thread,就是指一次只能完成一件任务.如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推) ...

  9. 764. Largest Plus Sign

    题目大意: 就是一个由1和0组成的正方形矩阵,求里面最大的加号的大小,这个大小就是长度. 什么鬼啊,本来想自己想的,结果看了半天没看懂具体什么意思,然后查了下题解,希望有人说一下意思,结果一上来就是思 ...

  10. Navicat Premium 12 破解（MySQL、MariaDB、MongoDB、SQL Server、SQLite）

    打开注入到安装目录中的exe中 破解提示(还没好,继续看下去) 如果你安装的是中文版,选一下中文版(英文默认即可),获取一下key(名字和组织可以自定义) 打开Navicat,选择注册(第一次打开选注 ...