前言
在项目开发中，由于每个人的代码习惯不同，编写出来的css代码不够结构化，整洁度和语义化欠缺。BEM CSS和OOCSS的思想大家在日常编码中一定有所用到，只是没有系统的 了解 和完全规范的使用。
BEM(Block, Element, Modifier) CSS 介绍
BEM是一种 前端命名规范 ，顾名思议就是将页面拆分成每一个富有语义的块，块和块可以嵌套，用 连接符 代表各模块之间的关系以及元素状态，生成一种模块化、可复用、高可维护性和结构化的CSS代码。
| block |
element |
modifier（修饰语） |
|
独立且有意义的实体, e.g.&nbs p; header , cont ai ner , ;m enu , checkbox , etc. |
Block的一部分且没有独立的意义, header t IT le , menu item , list item , etc. |
Blocks或Elements的一种标志，可以用它 改变 其表现形式、行为、状态 disabled , checked , fixed |
命名规则
通过双下划线__连接后代block 或者 element ,用双连字符--连接修饰语。
我们完全可以通过css还原出ht ML 代码结构
结论
程序员最大的 困难 是什么 == >起名，日常开发中我们也遇到自己的样式被其他人覆盖了，大部分 原因 出在命名冲突，BEM恰恰解决了这一痛点,我们只需要外层样式名是一个有意义且独立唯一，他的后代就可以放心的用content,title等连接。（ 妈妈 再也 不用 担心我不会起名了）
优点：结构清晰，语义化。
缺点：如果html结构嵌套比较深会导致类名比较长。
OOCSS（Object Oriented CSS） 介绍
OOCSS并不是一种约定的命名规范，是一种面向对象的思想，面向对象我们并不陌生，将模块抽象成对象，其核心就是用最 简单 的方式编写最整洁，最于净的CSS代码，从而使代码更具重用性，可维护性和可扩展性。
核心思想：
减少对 HTML 结构的依赖 增加 CSS class 重用原则
减少对 HTML 结构的依赖
一般的导航栏写法，如果要对那些 <a> 标签定义样式，CSS 的写法可能写成 .nav__main ul li a {} ，这种写法先不管效能上的问题，可以看出来过度地依赖元素标签的结构，有可能之后 HTML 结构改变，这个 CSS 就必须跟著重构，造成维护上多余的 成本 ,OOCSS提倡给a标签加上class .nav__main__item 。
增加 CSS class 重复性的使用
在使 用O OCSS之前我们写一个样式可能是这样的,这样写的弊端是随处可见的重复代码，维护起来特别麻烦。
我们可以通过分析抽象出他们共有的样式,因此提出了一个可重用的字体样式。
结论
OOCSS最 重要 的是从项目的页面中分析抽象出[对象]组件，并给这些对象创建CSS规则进行完善，然后无论是在项目中新建页面还是在模块中 添加元素 ，只须重写少量的甚至不写任何样式。
BEM和OOCSS的结合
我们开发一个显示物品重量组件,我们平常写的代码可能是这样的。
看起来没什么毛病，但是无论是可维护性，简洁度都非常的差。如果我们使用BEM和OCCSS我们可以将我们的代码变成这样。
相对于前种 方案 ，命名比较冗长，但是保证CSS类名不会重复的，样式不依赖html结构，复用class，正是BEM和OOCSS的核心思想。
总结
BEM是一种命名规范，OOCSS是CSS的设计思想，其实BEM也用到了OOCSS的思想。
CSS 代码的数量愈发庞大，开发 团队 的规模也相应扩大。在 CSS 开发团队中需要一个 统一 和固定的 CSS 代码组织和管理规范，若有不足之处欢迎大家补充。
到此这篇关于CSS规范BEM CSS和OOCSS的示例代码详解的 文章 就介绍到这了,更多相关CSS规范BEM CSS和OOCSS内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 CSS规范BEM CSS和OOCSS的示例代码详解 全部内容，希望文章能够帮你解决 CSS规范BEM CSS和OOCSS的示例代码详解 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于CSS规范BEM CSS和OOCSS的示例代码详解的详细内容...