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. springMVC整理05--数据校验、格式化 & 其他注解 & 数据绑定流程

    1.  数据校验.数据格式化 参考博客 http://www.importnew.com/19477.html 1.1  数据校验 使用 spring 数据校验,先要导入校验器的 jar: <! ...

  2. hdu 2159 FATE （二维完全背包）

    链接:http://acm.hdu.edu.cn/showproblem.php?pid=2159 思路: dp[j][k] 代表消耗耐久度j,干掉k个敌人获得的经验值. 状态转移方程为: dp[j] ...

  3. MT【249】离心率两题

    椭圆$\dfrac{x^2}{a^2}+\dfrac{y^2}{b^2}=1,(a>b>0)$的一个焦点为$F$,过$F$的直线交椭圆于$A,B$两点,$M$是点$A$关于原点的对称点.若 ...

  4. BZOJ2961 共点圆[CDQ分治]

    题面 bzoj 其实就是推一下圆的式子 长成这个样子 假设要查询的点是(x, y) 某个圆心是(p, q) \((x - p)^2 + (y - q)^2 \leq p^2 + q^2\) 变成 \( ...

  5. urllib的实现---timeout,获取http响应码，重定向，proxy的设置

    1.Timeout设置超时 只能修改Socket设置全局Timeout #! /usr/bin/env python3 import socket import urllib.request # ti ...

  6. Hadoop集群的构建和安装

    1.安装Java $ yum install -y java-1.8.0-openjdk java-1.8.0-openjdk-devel 上述命令默认安装位置/usr/lib/jvm/java-1. ...

  7. PHP函数memory_get_usage获取PHP内存清耗量

    (PHP 4 >= 4.3.2, PHP 5, PHP 7) memory_get_usage — 返回分配给 PHP 的内存量 说明 int memory_get_usage ([ bool ...

  8. Gym - 100989F

    You must have heard about Agent Mahone! Dr. Ibrahim hired him to catch the cheaters in the Algorithm ...

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

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

  10. InnoDB，5项最佳实践，知其所以然？

    InnoDB,5项最佳实践,知其所以然? 原创: 58沈剑 架构师之路 昨天 缓存讲了一个月<缓存架构,一篇足够>.今天,开始写数据库. 第一篇,说说MySQL两个最常用的存储引擎,MyI ...