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）相关推荐

html给按钮加颜色代码,css按钮属性 html中按钮的字体颜色怎么设置?
css 属性设置input 中type为button 的属性 css中什么属性可以控制按钮的形状 1.dispaly 适用于css1和css2,用于设置目标对象是否及如何显示.该属性的常用值为none ...
Atitit.css 规范 bem 项目中 CSS 的组织和管理
Atitit.css 规范 bem 项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...
OO CSS（面向对象 CSS）
面向对象的CSS OO CSS的概念解读 OO CSS的作用和注意事项 OO CSS代码实战众多开发者忽视了CSS的表现(认为他太过简单,是一种机械的工作),而且更多关注在JavaScript的性能 ...
CSS类名称/选择器中哪些字符有效？
CSS类选择器中允许使用哪些字符/符号? 我知道以下字符无效 ,但是哪些字符有效 ? ~ ! @ $ % ^ & * ( ) + = , . / ' ; : " ? > < ...
style 放入css文件失效_React中使用CSS的7种方式
来源 | http://www.fly63.com/article/detial/1961 1.在组件中直接使用style 不需要组件从外部约会css文件,直接在组件中书写. import react ...
Web 开发中 20 个很有用的 CSS 库
在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做 ...
media在HTML中作用,web前端：关于css中@media的一些基本使用
层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现html(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.css不仅可以静态地修 ...
怎样将css导入html文件中,css样式怎么导入？
css导入样式的方法:1.使用@import导入CSS样式表.2.行内样式就是把css样式直接写在HTML标签中.3.内嵌样式主要是将样式写在标签中.4.链接样式主要是通过link标签将css文件链到 ...
如何在html添加css样式表,网页中添加CSS样式表的四种方式
本文向大家描述一下网页中添加CSS样式表的四种方式,首先让我们来看一下CSS样式表文件的优势,主要体现在两个方面,请看下文详细介绍. CSS样式表文件的优势表现在两个方面: ***,简化了网页的格式代 ...

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

CSS：CSS 在工程中改变——面向对象的CSS （OO CSS）相关推荐

最新文章

热门文章