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 语义化

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/294567.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vlan和vtp重要的配置命令

1、 duplex &#xff08;full half auto&#xff09;配置以太口双工属性2、 speed工作速率3、 switch mode access改端口为访问模式4、 switch access vlan 2把端口划分到vlan25、 switch port-security打开端口安全功能6、 switch port-security maximum 1 允许MAC条目最大17、…

开车走吗?朋友......

1 冬天出门有多难&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼2 这张图你们明白了什么&#xff1f;&#xff08;素材来源网络&#xff0c;侵删&#xff09;▼3 奥特曼不用吃饭&#xff08;via.杰克波比&#xff0c;侵删&#xff09;▼4 为什么没人敢动孟婆&…

Ubuntu 下配置 NFS

1、安装 NFS 服务sudo apt-get install nfs-kernel-server 2、修改 NFS 配置文件vi /etc/exports 在文件中添加 NFS 的目录 /nfsboot *(rw,sync) 更改了/etc/exports 后要通过 sudo exportfs -r 来更新这个文件 3、在根目录下建立 NFS 的目录sudo mkdir /nfsboot 修改该目录的…

WPF中使用资源

这节讲一下如何在WPF中使用资源。01了解资源在编程中&#xff0c;一个变量&#xff0c;一段代码&#xff0c;一张图片&#xff0c;一段视频或者音频&#xff0c;这种可以拿来为我所用的东西就可以称之为资源&#xff0c;一个让人眼前一亮的程序&#xff0c;可能会使用到许许多多…

生成二维码的 jQuery 插件:jquery.qrcode.js

jquery.qrcode.js 是一个纯浏览器 生成 QRcode 的 jQuery 插件&#xff0c;它使用非常简单&#xff0c;生成的 QRcode 无需下载图片&#xff0c;并且不依赖第三方服务&#xff0c;比如最近 Google 服务在国内访问不稳就造成我好几个网站的 QRcode 不能使用&#xff0c;并且压缩…

java 中时间计算_java中关于时间的计算

1.描述&#xff1a;在原有时间上增加一个时间差&#xff1a;代码示例&#xff1a;Date psd sysDate();String workTimeP1 mapP.get("WORK_TIME_") ! null ? mapP.get("WORK_TIME_").toString() : "0";int newsInteger.parseInt(workTimeP1)*6…

Android之JNI的使用

转载&#xff1a;http://blog.csdn.net/zeng622peng/article/details/6675666 首先说明&#xff0c;Android系统不允许一个纯粹使用C/C的程序出现&#xff0c;它要求必须是通过Java代码嵌入Native C/C——即通过JNI的方式来使用本地&#xff08;Native&#xff09;代码。因此J…

OpenJudge计算概论-最长单词2

/* 最长单词2 总时间限制: 1000ms 内存限制: 65536kB 描述 一个以.结尾的简单英文句子&#xff0c;单词之间用空格分隔&#xff0c;没有缩写形式和其它特殊形式输入 一个以.结尾的简单英文句子&#xff08;长度不超过500&#xff09;&#xff0c;单词之间用空格分隔&#xff0c…

清华放大招!竟然连初三学生都招,一条龙培养到博士,还不准转专业......

全世界只有3.14 % 的人关注了爆炸吧知识提前5年博士毕业近日&#xff0c;清华大学本科招生网发布了一则重要公告——《清华大学2021年丘成桐数学科学领军人才培养计划招生办法》。在这则公告中&#xff0c;初三生&#xff0c;你没看错&#xff0c;是没有参加过中考、高考的初三…

一键生成Vue.js + Web API前后端集成项目

前言默认情况下&#xff0c;Visual Studio提供了“基于Vue.js Web 应用程序”项目模板&#xff0c;可以生成Vue.js前端项目。你需要另外创建Web API项目&#xff0c;调试时需要同时启动2个项目&#xff0c;然后还要解决前后端集成带来的问题&#xff0c;比如跨域访问。如果&…

java多线程数据采集_java多线程采集+线程同步

前些日子讲解了java数据抓取&#xff0c; 今天就讲解最核心的。 java多线程数据抓取。java多线程采集数据同步线程同步【多线程数据采集之四】主要讲解多线程抓取&#xff0c;多线程同步&#xff0c;多线程启动&#xff0c;控制等操作。先讲解第一步&#xff0c;线程类。 核心…

【LINUX学习】链接文件

linux下的连接文件和windows下的快捷方式有点像。不过linux 下有硬链接和软链接两种。硬链接&#xff1a;是在某个目录下新增一个源链接文件的关联数据。比如 为/etc/passwd 创建一个硬链接/tmp/passwd-hd 其实就是这两个文件是同一个文件&#xff0c;通过etc 目录中的passwd …

链表之反转部分单向链表

package com.chenyu.zuo.linkedList;import com.chenyu.zuo.linkedList.RemoveByRatio.Node;/*** 题目:给定一个单向链表的头结点head,以及两个整数from和to* ,在单项链表上把第from个节点和第to个节点这一部分进行反转* 列如:* 1->2->3->4->5->null,from=2,t…

【DB2学习文档之七】SQL for DB2

作者&#xff1a;gnuhpc 出处&#xff1a;http://www.cnblogs.com/gnuhpc/ 1.SQL的数据操作语言data manipulation language (DML) 参见Beginning SQL Queries: From Novice to Professional, by Clare Churcher (Apress, 2008) 2.Select语句 这个语句是DB2中最简单也最复杂的语…

这些让人看瞎了的设计!实力证明,谁才是世界的最终boss!

全世界只有3.14 % 的人关注了爆炸吧知识我瞎了也懵了昨天知识君刷微博&#xff0c;看到了一组动图&#xff0c;一时间我都不知道是我的眼睛出了错&#xff0c;还是我的大脑反应不过来。奇了怪了&#xff01;怎么箭头反转了180后&#xff0c;还是原样&#xff01;问题到底出在哪…

如何实现 asp.net core 安全优雅退出 ?

咨询区 AppDeveloper我想问一个老生常谈的问题&#xff0c;如何可以保证程序优雅的退出&#xff0c;这里用 优雅 的目的是因为我想在退出之前做一些小动作。用户场景&#xff1a;希望在程序退出之前可以从 Consul 上解注册, 下面是我的模板代码。public static IWebHostBuilder…

持续集成之配置TeamCity

离开上个东家差不多有一年半的时间了&#xff0c;这一年半更多的还是在学习&#xff0c;或者说更多的是在收拾前辈们写的代码&#xff0c;其中的酸甜苦辣只有经历过的人才知道&#xff0c;想想还是上个东家好&#xff0c;软件研发的流程很规范&#xff0c;各种配套的工具都是现…

java 上传文件编码_(java)有什么办法把MultipartFile上传的文件转为utf-8的编码吗

[Java] 纯文本查看 复制代码import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.IOException;import org.apache.tika.Tika;import org.apache.tika.detect.AutoDetectReader;import org.apache.tika.exception.TikaExc…

Android之的性能优化方法

1、布局优化: 原理:尽量减少布局的文件的层级,层级越少,Android绘制时的工作量少了,程序性能提高 1、删除无用的控件和层级,选择使用性能较低的ViewGroup,比如RelativeLayout 2、如果布局在有LinearLayout和RelativeLayout,建议使用LinearLayout,RelativeLayout功能…

Set函数、Get函数、点语法和类方法

1.Set函数 setter函数&#xff0c;对成员变量赋值。Set函数的一般写法以对age操作为例&#xff0c;写法为&#xff1a; -(void)setAge:(int)newage。 2. Get函数 getter函数&#xff0c;对成员变量取值。Get函数的一般写法也以对age的操作为例&#xff0c;写法为&#xff1a; -…