CSS规范BEMCSS和OOCSS的示例分析-创新互联

这篇文章主要介绍CSS规范BEMCSS和OOCSS的示例分析，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

创新互联-专业网站定制、快速模板网站建设、高性价比凤城网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式凤城网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖凤城地区。费用合理售后完善，10余年实体公司更值得信赖。

BEM(Block, Element, Modifier) CSS 介绍

BEM是一种前端命名规范 ，顾名思议就是将页面拆分成每一个富有语义的块，块和块可以嵌套，用 连接符 代表各模块之间的关系以及元素状态，生成一种模块化、可复用、高可维护性和结构化的CSS代码。

block	element	modifier（修饰语）
独立且有意义的实体, e.g. header , container , menu , checkbox , etc.	Block的一部分且没有独立的意义, header title , menu item , list item , etc.	Blocks或Elements的一种标志，可以用它改变其表现形式、行为、状态 disabled , checked , fixed

命名规则

通过双下划线__连接后代block或者element ,用双连字符--连接修饰语。

我们完全可以通过css还原出html代码结构

结论

程序员较大的困难是什么==>起名，日常开发中我们也遇到自己的样式被其他人覆盖了，大部分原因出在命名冲突，BEM恰恰解决了这一痛点,我们只需要外层样式名是一个有意义且独立，他的后代就可以放心的用content,title等连接。（妈妈再也不用担心我不会起名了）

优点：结构清晰，语义化。

缺点：如果html结构嵌套比较深会导致类名比较长。

OOCSS（Object Oriented CSS） 介绍

OOCSS并不是一种约定的命名规范，是一种面向对象的思想，面向对象我们并不陌生，将模块抽象成对象，其核心就是用最简单的方式编写最整洁，最于净的CSS代码，从而使代码更具重用性，可维护性和可扩展性。

核心思想：

• 减少对 HTML 结构的依赖

• 增加 CSS class 重用

原则

减少对 HTML 结构的依赖

一般的导航栏写法，如果要对那些 标签定义样式，CSS 的写法可能写成.nav__main ul li a {} ，这种写法先不管效能上的问题，可以看出来过度地依赖元素标签的结构，有可能之后 HTML 结构改变，这个 CSS 就必须跟著重构，造成维护上多余的成本,OOCSS提倡给a标签加上class.nav__main__item 。

增加 CSS class 重复性的使用

在使用OOCSS之前我们写一个样式可能是这样的,这样写的弊端是随处可见的重复代码，维护起来特别麻烦。

我们可以通过分析抽象出他们共有的样式,因此提出了一个可重用的字体样式。

结论

OOCSS最重要的是从项目的页面中分析抽象出“对象”组件，并给这些对象创建CSS规则进行完善，然后无论是在项目中新建页面还是在模块中添加元素，只须重写少量的甚至不写任何样式。

BEM和OOCSS的结合

我们开发一个显示物品重量组件,我们平常写的代码可能是这样的。

看起来没什么毛病，但是无论是可维护性，简洁度都非常的差。如果我们使用BEM和OCCSS我们可以将我们的代码变成这样。

相对于前种方案，命名比较冗长，但是保证CSS类名不会重复的，样式不依赖html结构，复用class，正是BEM和OOCSS的核心思想。

以上是“CSS规范BEMCSS和OOCSS的示例分析”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！

新闻名称：CSS规范BEMCSS和OOCSS的示例分析-创新互联
URL链接：http://shouzuofang.com/article/coeioj.html