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. 20140702 赋值构造函数的形参为什么一定用引用。string类的赋值运算函数的注意点

    1.复制构造函数为什么一定要用引用,而不是用值 类名::复制构造函数(类名&引用名) 传递引用,可以避免复制,如果一个数据相当大的化,进行复制会浪费很多时间的. 类名::复制构造函数(类名 变 ...

  2. 深入分析Synchronized原理

    前言 记得开始学习Java的时候,一遇到多线程情况就使用synchronized,相对于当时的我们来说synchronized是这么的神奇而又强大,那个时候我们赋予它一个名字“同步”,也成为了我们解决 ...

  3. 由dubbo开始看看所谓的软负载均衡

    待总结 我们在微服务架构中,常用一些注册中心进行订阅消费我们的服务,这时候对于同一服务请求会有不同的机器同时可以提供服务,这时是怎么选择哪一台机器去连接获取服务呢? 负载均衡设备作为纵跨网络2/7层交 ...

  4. 微信小程序开发简易计算器改进版

    微信小程序开发计算器有多种方法,但是大部分代码比较复杂.不容易理解.本案例进行了改进,主要是组件bindtap属性绑定的自定义函数clickBtn(),采用了switch语句,使得代码结构更加清晰,学 ...

  5. windows 和 linux 多线程

    学习了几天多线程技术,做个总结,便于记忆. 一般 多线程传递参数 为 void*  所以会有一个强制转换过程  (int*) (void *)等,传递多个参数选择 结构体指针.为了避免多个线程访问数据 ...

  6. Thinkphp 3.2 去掉index.php

    1.httpd.conf中去掉LoadModule rewrite_module modules/mod_rewrite.so 前面的#号 2.httpd.conf 中  AllowOverride ...

  7. Grafana + Influxdb Android性能监控部署

    目录 前言 一.前提准备 二.安装 Grafana 三.安装 Influxdb 四.Grafana 添加 Influxdb 数据源 五.Shell 脚本写入数据到 Influxdb 前言 你是否为了数 ...

  8. php面向对象深入理解（二）

    一个简单的小程序:   配置 config.ini <?php //项目的根目录 define("ROOT","F:/文件夹的名字/oop/"); //数 ...

  9. js简单图片切换

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title> ...

  10. 自定义alert 确定、取消功能

    以删除为例,首先新建html <table border="1" cellpadding="0" cellspacing="0" id ...