oocss的概念
众多开发者忽视了css的表现（认为它）
oocss将页面可重用的元素抽象成一个类，用class加以描述，而与其对应的HTML即可看成是此类的一个实例。

oocss的作用
1.加强代码复用以便方便维护。
2.减少cs体积
3.提升渲染效率
4.组件库思想，栅格布局可共用，减少选择器，方便扩展。
注意事项
1.不要直接定义子节点，应该把共性放在父类中

2.结构和皮肤相分离

3.容器与内容相分离

4.抽象出可重用的元素，建好组件库，在组件库内寻找可用的元素组装页面
5.往你想要扩展的对象本身增加class而不是他的父节点。
6.对象应保持独立性

7.避免使用ID选择器，权重太高，无法重用
8.避免位置相关的样式

9.保证选择器相同的权重
10.类名，简短，清晰，语义化，oocss的名字并不影响HTML语义化。
目前用得比较多的css:reset.css,normalize.css,neat.css
本文看自CSS在工程中改变之面向对象的 CSS视频

CSS在工程中改变之面向对象的 CSS的更多相关文章

  1. CSS：CSS 在工程中改变——面向对象的CSS （OO CSS）

    一.OO  CSS 的概念解读 (一)众多开发者忽视了CSS的表现,认为其太过简单,是一种机械的工作,而把更多关注在JS的性能或者其他方面. (二)OO CSS 将页面可重用元素抽象成一个类,用cla ...

  2. 谈谈CSS预处理技术中for循环的应用-CSS Sprite

    各种新技术的出现,推动着Web前端技术飞速发展,在提升用户体验的同时也方便开发者: 在前端优化时,我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,b ...

  3. 面向对象的CSS

    原文 简书原文:https://www.jianshu.com/p/cb5e9f56ddcc 大纲 1.面向对象的CSS(OOCSS)概念 2.面向对象的CSS的作用 3.面向对象的CSS的注意事项 ...

  4. vue-cli创建的webpack工程中引用ExtractTextPlugin导致css背景图设置无效的解决方法

    当我们用vue-cli创建项目后,如果在我们的template模板文件中的css样式设置中,有设置了background-image的属性,并且url值传入的是相对路径,那么当我们在打包生产代码时,w ...

  5. 前端开发css实战：使用css制作网页中的多级菜单

    前端开发css实战:使用css制作网页中的多级菜单 在日常工作中,大家都会遇到一些显示隐藏类菜单,比如页头导航.二维码显示隐藏.文本提示等等......而这些效果都是可以使用纯css实现的(而且非常简 ...

  6. 面向对象的 CSS (OOCSS)

    原文链接:来自smashing magazine 译文 你是否听说过一个词语叫“内容就是王道”?作为一个 Web 开发者,我们的工作与内容创作有着频繁的联系.这是一条经常被引用,并且正确地解释了什么因 ...

  7. 解决MVC中使用BundleConfig.RegisterBundles引用Css及js文件发布后丢失的问题

    ASP.NET MVC4,ASP.NET MVC5中对JS和CSS的引用又做了一次变化,在MVC3中我们这样引用资源文件: <link href="@Url.Content(" ...

  8. web工程中URL地址的推荐写法

    三.web工程中URL地址的推荐写法 使用c标签<c:url value="" /> 会自动添加项目名 -> value中的值 前面要加 “/” 在JavaWeb ...

  9. 关于eclipse中MAVEN WEB工程中编译问题

    这几天是被java的环境搞疯了,我先是搭了一个spring+springmvc+mybatis的工程,在家里跑了一下,没有问题,把工程带到公司里用,却一直不能使用. 按常理来说,只要工程发生一点变化, ...

随机推荐

  1. 剑指offer——46数字序列中某一位的数字

    题目: 数字以0123456789101112131415…的格式序列化到一个字符序列中.在这个序列中,第5位(从0开始计数)是5,第13位是1,第19位是4,等等.请写一个函数,求任意第n位对应的数 ...

  2. JAVA单元测试的用法和要点(入门篇)

    一.单元测试的目的?      单元测试是编写测试代码,用以检测特定的.明确的.细颗粒的功能!  严格来说,单元测试只针对功能点进行测试,不包括对业务流程正确性的测试.现在一般公司都会进行业务流程的测 ...

  3. CSS3 Media Queries模板:max-width和min-width

    CSS3 Media Queries模板 CSS3 Media Queries一般都是使用“max-width”和“min-width”两个属性来检查各种设备的分辨大小与样式表所设条件是否满足,如果满 ...

  4. Codeforces Round #535 F-MST Unification

    题目大意: 给定n m 为图中的点数n和边数m 给定m条边的信息 u v w 为u点到v点有一条长度为w的边 图中无环无重边 这个图的MST的花费为k 但可能存在多种花费为k的MST的方案 此时对图中 ...

  5. 运行Storm实例

  6. ARM TK1 安装kinect驱动

    首先安装usb库 $ git clone https://github.com/libusb/libusb.git 编译libusb需要的工具 $ sudo apt-get install autoc ...

  7. ros语音交互（五）移植科大讯飞语音识别到ros

    将以前下载的的语音包的 samples/iat_record/的iat_record.c speech_recognizer.c speech_recognizer.c 拷贝到工程src中, linu ...

  8. Centos下yum安装 apache+php环境 以及redis扩赞

    一 : 安装apache 1.首先保证yum源没问题 在此不再阐述 2.安装apache yum -y install httpd 3.设置开机启动apache chkconfig --levels ...

  9. $.extend() $.fn.extend()

    (非原创)jQuery为开发插件提拱了两个方法,分别是:jQuery.fn.extend();jQuery.extend();虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便 ...

  10. webpack4.0高级

    环境变量 webpack --env.NODE_ENV=local --env.production --progress Tree Shaking 移除JS上下文字未被引用的代码 只支持ES6的im ...