css命名规则思想BEM

作者:zarte    发布时间: 2019-11-27

cssbem方法论

## css命名方法论 * OOCSS:抽象公共类,把复用度高的样式抽取出来。  .tc { text-align: center } * BEM * SMACSS: 一个分类的方案,共五种分类。 Base:基础的样式规则、 Layout:用于布局的样式规则、 Module:可复用的模块样式规则、 State:状态样式、 Theme:UI样式 * Atomic CSS。原子化的样式,最小化 CSS 代码。 本文仅介绍BEM ## 关于BEM **[BEM官网](http://getbem.com/)**,BEM的意思就是块(block)、元素(element)、修饰符(modifier),是由**Yandex团队**提出的一种前端命名方法论。 它有如下3个特性: 1. 易用性 如果想使用BEM,你只需要采用BEM命名规范即可单元性 2. 独立的块和CSS选择器,可以使得你的代码可重用和单元化灵活性 3. 使用BEM之后,方法和工具可以按照你喜欢的方式去组织和配置 BEM有不同的命名方式但是都是基于BEM原则的,本文采用 [Nicolasgallagher改进版](href="http://nicolasgallagher.com/about-html-semantics-front-end-architecture/"%3Ehttp://nicolasgallagher.com/about-html-semantics-front-end-architecture/%3C/a%3E) ## Doing ### 基本约定 BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性,你就能够明白模块之间是如何关联的:有一些仅仅是组件,有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。 * **仅以类名作为选择器**,不使用ID或标签名来约束选择器 * **选择器嵌套不超过2层**,增加效率和复用性,减少选择器之间的耦合度 * **不依赖当前页面的其它block或者element**,永远不会遇到级联问题。您还可以将完成的项目中的块转移到新项目中。 ### --与__的区别 ``` .block{} .block__element{} .block--modifier{} ``` * block 代表块 * block__element 代表block的后代 * block--modifier 代表block的不同状态和版本 ### 单个- ``` .block-search{} .block-search__filed{} .block-search--disabled{} ``` 用于块名的表示 ### 实例说明 普通 ```html <div class="media full"> <img src="logo.png" class="logo"> <div class="body"> <h3 class="title">This Is Title</h3> <p class="lede">Good Good Study, Day Day Up!</p> </div> <div class="footer"> <p class="tc">Footer Content </p> </div> </div> ``` BEM ```html <style> .tc{ text-align: center } .lede{} .media{ } .media--full{} .media__body{} .media__title{} .media__ctitle{} .media__footer{} /**bad**/ .media .media__body{} </style> <div class="media media--full"> <img src="logo.png" class="media__logo"> <div class="media__body"> <!-- 错误,不推荐出现多个子元素 --> <h3 class="media__body__title">This Is Title</h3> <!-- 如下皆可 --> <h3 class="media__title">This Is Title</h3> <h3 class="media__ctitle">This Is Title</h3> <h3 class="title">This Is Title</h3> <p class="lede">Good Good Study, Day Day Up!</p> </div> <div class="media__footer"> <!-- 不是每个元素都需按照bem规则--> <p class="tc">Footer Content </p> </div> </div> ``` *ps:个人推荐OOCSS、BEM混用* ## 参考 >[www.cnblogs.com/kidney/p/6197037.html](https://www.cnblogs.com/kidney/p/6197037.html) >[csswizardry.com](https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) >[常见问题](https://www.w3cplus.com/css/battling-bem-extended-edition-common-problems-and-how-to-avoid-them.html)

上一篇:  可商用的免费字体

下一篇:  csv文件excel打开中文乱码记事本打开正常

加载更多