CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
一、OO CSS 的概念解读
(一)众多开发者忽视了CSS的表现,认为其太过简单,是一种机械的工作,而把更多关注在JS的性能或者其他方面。
(二)OO CSS 将页面可重用元素抽象成一个类,用class 加以描述,而与其对应的html 即可看成是此类的一个实例。
二、OO CSS 的作用
(一)加强代码复用以便方面维护。
(二)减少 CSS 体积(用父类的即可)。
(三)提升渲染效率。
(四)组件库思想、栅格布局可共同、减少选择器、方面扩展。
三、OO CSS 的注意事项(使用高效CSS时需要注意的问题)
(一)不要直接定义子节点,应把共性声明放到父类。
.mod .inner {...} // .mod 下面的 inner
.inner {...} // 不是很建议的声明
(二)结构与皮肤相分离。
<div class="container simpleExt"></div> //html 结构
.container {...} //控制结构的class
.simpleExt {...} //控制皮肤的class
(三)容器与内容相分离。
<div class="container"><ul><li>排行</li></ul></div> //html 结构
.container ul{...} //ul依赖了容器
<div class="container"><ul class="rankList"><li>排行</li></ul></div> //html 结构
.rankList ul{...} //解除与容器的依赖,可以从一个容器转移到其他容器
(四)抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面。
(五)往你想要扩展的对象本身增加 class 而不是其父节点。
(六)对象应该保持独立性
<div class="container"><div class="mod"></div></div> //html 结构
.container {...}
.container .mod {...} //控制结构的class
//应该写成如下:
<div class="container mod"> </div> //html 结构
(七)避免使用ID选择器,权重太高,无法重用。
(八)避免位置相关的样式
#header .container {...}
#footer .container {...}
//可直接写成 .container {...} #header h1 {...}
#footer h1 {...}
h1,.h1 { }
h2,.h2 { }
<h1 class="h6"></h1>
(九)保证选择器相同的权重
(八)类名应该剪短、清晰、语义化,OO CSS 的名字并不影响html 语义化
CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)的更多相关文章
- CSS在工程中改变之面向对象的 CSS
oocss的概念 众多开发者忽视了css的表现(认为它) oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例. oocss的作用 1.加强代码 ...
- vs2015web工程中的html引用压缩后css后无法智能提示的问题解决
环境:win10x64 vs2015企业版 项目:空白web项目(.net framework4) 问题:html页面加入压缩后的css(eg:bootstrap.min.css),编码的时候无法智能 ...
- css鼠标手型cursor中hand与pointer
css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...
- 前端开发:面向对象与javascript中的面向对象实现(一)
前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...
- 前端开发:javascript中的面向对象
前端开发:面向对象与javascript中的面向对象实现(一) 面向对象理解: 面向对象是一种对现实世界理解和抽象的方法,是一种先进的程序设计理念,是一种比较抽象的,多形态的设计模式.我们可以这么理解 ...
- Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
- iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ
iOS之在webView中引入本地html,image,js,css文件的方法 2014-12-08 20:00:16CSDN-sky_2016-点击数:10292 项目需求 最近开发的项 ...
- Web开发中20个很有用的CSS库
来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...
- Web 开发中 20 个很有用的 CSS 库
转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...
随机推荐
- mac的cpu处理器个数、核数、超线程
处理器:1个 每个核的L2缓存大小:256KB L3缓存大小:3MB 核数:2个 2个核却有4个CPU:使用了超线程技术--双核四线程 macOS,查看CPU信息:sysctl machdep.cpu ...
- flask_wtf/wtforms几个坑点,先简单记此
1.@pluginquery.route('/app_include_plugins', methods=['GET','POST']) methods必须填写 2.plu_incl_app = St ...
- C++获得本机所有网卡的IP和MAC地址信息
一台机器上可能不只有一个网卡,但每一个网卡只有一个MAC地址,而每一个网卡可能配置有多个IP地址:如平常的笔记本电脑中,就会有无线网卡和有线网卡(网线接口)两种:因此,如果要获得本机所有网卡的IP和M ...
- OTL翻译(4) -- otl_stream类
otl_stream Otl_stream是具体实现otl_stream_concept的类.任何的SQL语句.SQL语句块和存储过程都能通过otl_stream进行处理. 传统的数据库API处理SQ ...
- PHP array与Json学习
在 PHP 中,有三种数组类型: 索引数组 - 带有数字索引的数组,(可以理解C/C++/Java中的数组,按照索引位置直接访问) 关联数组 - 带有指定键的数组,(可以理解为map,按照键值对存储, ...
- python 数据处理中的 LabelEncoder 和 OneHotEncoder
One-Hot 编码即独热编码,又称一位有效编码,其方法是使用N位状态寄存器来对N个状态进行编码,每个状态都由他独立的寄存器位,并且在任意时候,其中只有一位有效.这样做的好处主要有:1. 解决了分类器 ...
- Longest Substring Without Repeating Characters leetcode java
题目: Given a string, find the length of the longest substring without repeating characters. For examp ...
- 网络结构设计——负载均衡之LVS学习笔记(四)
LVS按个人理解的说就是将一台Linux服务器当作路由器等功能的技术.LVS---Linux虚拟服务器. LVS实现了三种IP负载均衡技术VS/NAT.VS/TUN.VS/DR. 今天简单分享一下我在 ...
- 【SpringCloud】Netflix源码解析之Ribbon:负载均衡策略的定义和实现
Ribbon负载均衡策略定义 IRule其实就只做了一件事情Server choose(Object key),可以看到这个功能是在LB中定义(要求)的,LB把这个功能委托给IRule来实现.不同的I ...
- 如何利用SQL语句求日期的时间差值,并汇总网上的一些信息
MySQL本身提供了 DATEDIFF 函数,用来计算时间差. 手册:http://dev.mysql.com/doc/refman/5.1/en/date-and-time-functions.ht ...