CSS规范BEM CSS和OOCSS的示例代码详解_CSS教程_CSS_网页制作

来源:脚本之家  责任编辑:小易  

一般认为主要有三个版本,分别是css1、css2、css3。就目前的使用情况而言,css2使用的比较多,因为css1的属性比较少,而css3有一些老式浏览器并不支持,所以大家在开发的时候主要还是使用css2。其实,css的各个版本之间基本上是向下兼容的,比如css2和css3,css3是在css2的基础上添加了很多新特性,这些新特性更加符合移动开发的需求,加快开发速度。随着各大浏览器厂商对浏览器的版本更新,这些浏览器应该会渐渐的更加标准化的支持css3的新特性。所以我们在学习css的时候,也要循序渐进,了解了css2之后,也要多点了解css3的新特性www.zgxue.com防采集请勿采集本网。

前言

在项目开发中,由于每个人的代码习惯不同,编写出来的css代码不够结构化,整洁度和语义化欠缺。BEM CSS和OOCSS的思想大家在日常编码中一定有所用到,只是没有系统的了解和完全规范的使用。

针对firefox ie6 ie7 ie8的css样式hack 以前我们大部分都是用!important来hack,对于ie6和firefox测试可以正常显示,但是ie7以上对!important可以正确解释,会导致页面没按要求显示!搜索了一下

BEM(Block, Element, Modifier) CSS 介绍

可以啊~

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

你好,绝对路径肯定不行,上传至虚拟主机的文件应该有自己的文件路径,应该是路径的问题,看看你的css文件相对网页的路径是否有问题

block

这个是缩写,相当于: font-size:0 line-height:0 font-family:serif

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 结构的依赖

一般的导航栏写法,如果要对那些 <a> 标签定义样式,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的核心思想。

总结

BEM是一种命名规范,OOCSS是CSS的设计思想,其实BEM也用到了OOCSS的思想。

CSS 代码的数量愈发庞大,开发团队的规模也相应扩大。在 CSS 开发团队中需要一个统一和固定的 CSS 代码组织和管理规范,若有不足之处欢迎大家补充。

到此这篇关于CSS规范BEM CSS和OOCSS的示例代码详解的文章就介绍到这了,更多相关CSS规范BEM CSS和OOCSS内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

_position:absolute;绝对定位margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);expression()用来把CSS属性和Javas cript表达式关联起来,这里的CSS属性可以是_margin-top,也可以是自定义属性。就是说CSS属性后面可以是一段Javascript表达式,CSS属性的值等于Javas cript表达式计算的结果;document.documentElement.clientHeight:表示可见区域高度this.style.pixelHeight:当前样式作用高度document.documentElement.scrollTop:获取当前页面的滚动条纵坐标位置感谢oO魔血Oo;lp52761 我想提问的人把代码写过来,应该大概明白css中,基本的关于hack的应用吧:)内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 深入解读css的oocss和smacss以及bem
  • 大家帮我解答一下css里
  • CSS有几个版本?用的最多的是哪个?
  • web前端工程师都有什么样的职业规划路线
  • 在css中,,,分别是什么意思?通俗点解释一下。
  • 有没有只针对IE8的CSS样式hack?
  • 这种用CSS可以打出来么?
  • 关于链接网页CSS文件问题
  • css中,这是什么意思?
  • 征集CSS和html的学习方法。本人完全无基础。
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作csscss教程oocsscssbemcss深入解读css的oocss和smacss以及bemcss教程css3div+css教程web标准教程浏览器兼容教程css布局实例css控制ul li 的样式详解(推荐)html设置超链接字体颜色和点击后的字体颜色div水平垂直居中的完美解决方案css设置各种中文字体如雅黑、黑体、宋体、楷体等等css 文本字体颜色设置方法(css color)css 漂亮搜索框美化代码css自定义select下拉选择框的样式(不用其他标签模拟)css圆角效果 -webkit-border-radius(css3中border-radcss 中的background:transparent到底是什么意思有什么css 首行缩进两个文字使用css的clip-path属性实现不规则图形的显示使用css和java来构建管理仪表盘布局的实例代码css如何匹配到多个class的示例代码css伪类 右下角点击出现 对号角标表示选中的示例代码css实现背景渐变和自动全屏的代码浅析css :is() 和 :where() 即将出现在浏览器中基于css variable的主题切换完美解决方案(推荐)使用css text-emphasis对文字进行强调装饰的实现代码css实现skeleton screen骨架屏效果
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved