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已经成为一大部分开发者和设计者的最爱,因为它提供 ...
随机推荐
- 快速近似最近邻搜索库 FLANN - Fast Library for Approximate Nearest Neighbors
What is FLANN? FLANN is a library for performing fast approximate nearest neighbor searches in high ...
- Informatica 常用组件Source Qualifier之八 会话前和会话后 SQL
可以在源限定符转换的"属性"选项卡中添加会话前和会话后 SQL 命令.您可能要使用会话前 SQL 以在会话开始时将时间标识行写入源表. PowerCenter 在读取源之前对源 ...
- EMC ViPR all in one page
EMC ViPR 2.0 Product Documentation Index https://community.emc.com/docs/DOC-35557
- Spring Boot应用连接数据库MySQL、及一个简单的demo
一.修改pom.xml文件 在项目的pom.xml文件上增加如下代码,添加依赖文件. <dependency> <groupId>mysql</groupId> & ...
- IOS中Key-Value Coding (KVC)的使用详解
kvc,键值编码,是一个非正式的协议,它提供一种机制来间接访问对象的属性.直接访问对象是通过调用访问器的方法实现,而kvc不需要调用访问器的设置和获取方法,可以直接访问对象的属性. 下面介绍一下kvc ...
- 软件project(一)——宏观总结
曾经看视频,看过去就忘.不想再这样子下去了,所以总结了好久.想让自己忘不了.这个过程花费时间有点长,可是假设让自己忘不了.一切都值了. 以下先来一张导图来总结一下<软件project>这门 ...
- php各版本下载
Index of /php5/ File name File size Date Parent directory/ - - pecl-5.0.0-Win32.zip 954306 13-Jul-20 ...
- [Backbone] First Application!!!!
Important things to remember: 1. Usually, we create Collection, CollectionViews, Model, View. Collec ...
- linux可视化桌面安装
[root@VM_193_201_centos ~]# yum grouplist Loaded plugins: fastestmirror, langpacks There is no insta ...
- 栈溢出笔记1.3 准备Shellcode
经过1.1和1.2节的讲述,我们已经知道了怎样更改EIP的值. 程序运行函数之后将跳转到我们设定的位置開始运行,因此,我们须要准备一个自己的程序,接手后面的工作.这是一个什么样的程序?是一个C语言编写 ...