CSS:CSS 在工程中改变——面向对象的CSS (OO CSS)
2016-04-13 20:36
519 查看
一、OO CSS 的概念解读
(一)众多开发者忽视了CSS的表现,认为其太过简单,是一种机械的工作,而把更多关注在JS的性能或者其他方面。
(二)OO CSS 将页面可重用元素抽象成一个类,用class 加以描述,而与其对应的html 即可看成是此类的一个实例。
二、OO CSS 的作用
(一)加强代码复用以便方面维护。
(二)减少 CSS 体积(用父类的即可)。
(三)提升渲染效率。
(四)组件库思想、栅格布局可共同、减少选择器、方面扩展。
三、OO CSS 的注意事项(使用高效CSS时需要注意的问题)
(一)不要直接定义子节点,应把共性声明放到父类。
(二)结构与皮肤相分离。
(三)容器与内容相分离。
(四)抽象出可重用的元素,建好组件库,在组件库内寻找可用的元素组装页面。
(五)往你想要扩展的对象本身增加 class 而不是其父节点。
(六)对象应该保持独立性
(七)避免使用ID选择器,权重太高,无法重用。
(八)避免位置相关的样式
(九)保证选择器相同的权重
(八)类名应该剪短、清晰、语义化,OO CSS 的名字并不影响html 语义化
(一)众多开发者忽视了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 语义化
相关文章推荐
- css3 用border写三角形
- css学习
- JSP的CSS背景样式写法
- css的定位:
- CSS学习之CSS样式介绍和使用
- 纯css3实现图片轮播
- CSS3中transform属性和transition属性
- 浏览器css渲染差异
- CSS3:background新增特性详解
- CSS3:background新增特性详解
- CSS让PRE标签强制换行
- 图片BlendMode 样式
- CSS弹性盒子Flexbox布局详解
- css代码初始化
- css去掉iPhone、iPad默认按钮样式
- 2016.4.13--css总结
- link和@import两种导入css文件的区别。
- CSS的overflow属性及清除浮动
- html CSS常用样式
- css属性之animation与@keyframes制作天空动态云彩