一、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)的更多相关文章

  1. CSS在工程中改变之面向对象的 CSS

    oocss的概念 众多开发者忽视了css的表现(认为它) oocss将页面可重用的元素抽象成一个类,用class加以描述,而与其对应的HTML即可看成是此类的一个实例. oocss的作用 1.加强代码 ...

  2. vs2015web工程中的html引用压缩后css后无法智能提示的问题解决

    环境:win10x64 vs2015企业版 项目:空白web项目(.net framework4) 问题:html页面加入压缩后的css(eg:bootstrap.min.css),编码的时候无法智能 ...

  3. css鼠标手型cursor中hand与pointer

    css鼠标手型cursor中hand与pointer Example:CSS鼠标手型效果 <a href="#" style="cursor:hand"& ...

  4. 前端开发:面向对象与javascript中的面向对象实现(一)

    前端开发:面向对象与javascript中的面向对象实现(一) 前言: 人生在世,这找不到对象是万万不行的.咱们生活中,找不到对象要挨骂,代码里也一样.朋友问我说:“嘿,在干嘛呢......”,我:“ ...

  5. 前端开发:javascript中的面向对象

    前端开发:面向对象与javascript中的面向对象实现(一) 面向对象理解: 面向对象是一种对现实世界理解和抽象的方法,是一种先进的程序设计理念,是一种比较抽象的,多形态的设计模式.我们可以这么理解 ...

  6. Atitit.css 规范 bem  项目中 CSS 的组织和管理

    Atitit.css 规范 bem  项目中 CSS 的组织和管理 1. 什么是BEM?1 1.1. 块(Block)2 1.2. 元素(Element)2 1.3. BEM树(和DOM树类似).3 ...

  7. iOS之在webView中引入本地html,image,js,css文件的方法 - sky//////////////////////////////////////ZZZZZZZZZZZZZZZ

    iOS之在webView中引入本地html,image,js,css文件的方法   2014-12-08 20:00:16CSDN-sky_2016-点击数:10292     项目需求 最近开发的项 ...

  8. Web开发中20个很有用的CSS库

    来源: 微信公众号文章 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS库,框架,应用这 ...

  9. Web 开发中 20 个很有用的 CSS 库

    转自:http://www.oschina.net/translate/css-libraries-for-developers 在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供 ...

随机推荐

  1. 快速近似最近邻搜索库 FLANN - Fast Library for Approximate Nearest Neighbors

    What is FLANN? FLANN is a library for performing fast approximate nearest neighbor searches in high ...

  2. Informatica 常用组件Source Qualifier之八 会话前和会话后 SQL

      可以在源限定符转换的"属性"选项卡中添加会话前和会话后 SQL 命令.您可能要使用会话前 SQL 以在会话开始时将时间标识行写入源表. PowerCenter 在读取源之前对源 ...

  3. EMC ViPR all in one page

    EMC ViPR 2.0 Product Documentation Index https://community.emc.com/docs/DOC-35557

  4. Spring Boot应用连接数据库MySQL、及一个简单的demo

    一.修改pom.xml文件 在项目的pom.xml文件上增加如下代码,添加依赖文件. <dependency> <groupId>mysql</groupId> & ...

  5. IOS中Key-Value Coding (KVC)的使用详解

    kvc,键值编码,是一个非正式的协议,它提供一种机制来间接访问对象的属性.直接访问对象是通过调用访问器的方法实现,而kvc不需要调用访问器的设置和获取方法,可以直接访问对象的属性. 下面介绍一下kvc ...

  6. 软件project(一)——宏观总结

    曾经看视频,看过去就忘.不想再这样子下去了,所以总结了好久.想让自己忘不了.这个过程花费时间有点长,可是假设让自己忘不了.一切都值了. 以下先来一张导图来总结一下<软件project>这门 ...

  7. php各版本下载

    Index of /php5/ File name File size Date Parent directory/ - - pecl-5.0.0-Win32.zip 954306 13-Jul-20 ...

  8. [Backbone] First Application!!!!

    Important things to remember: 1. Usually, we create Collection, CollectionViews, Model, View. Collec ...

  9. linux可视化桌面安装

    [root@VM_193_201_centos ~]# yum grouplist Loaded plugins: fastestmirror, langpacks There is no insta ...

  10. 栈溢出笔记1.3 准备Shellcode

    经过1.1和1.2节的讲述,我们已经知道了怎样更改EIP的值. 程序运行函数之后将跳转到我们设定的位置開始运行,因此,我们须要准备一个自己的程序,接手后面的工作.这是一个什么样的程序?是一个C语言编写 ...