高效、可维护、组件化的CSS
如何写出更加高效的CSS?
主要有以下四个关键点:
高效的CSS
可维护的CSS
组件化的CSS
hack-free CSS
1、书写高效的CSS代码
* 使用 外联样式 替代行间 样式或者内嵌样式.
* 为了兼容老版本的浏览器,建议使用 link 引入外部样式表的方来代替 @import 导入样式的方式.
* 使用 继承
font-family: arial, helvetica, sans-serif; }
#container {
font-family: arial, helvetica, sans-serif; }
#navigation {
font-family: arial, helvetica, sans-serif; }
高效的:
font-family: arial, helvetica, sans-serif; }
h1 {
font-family: georgia, times, serif; }
* 使用 多重选择器
低效的:
高效的:
* 使用 多重声明
低效的:
高效的:
}
* 使用 简记属性
高效的:
font: 85% arial, helvetica, sans-serif; background: url(image.gif) no-repeat 0 100%; margin: 1em 1em 0;
padding: 10px;
border: 1px solid red;
}
* 避免使用 !important
2、书写可维护的CSS代码
* 在样式表开头添加一个注释块,用以描述这个样式表的 创建日期、创建者、 标记 等备注信息.
Site: Site name Name
Author: Name
Updated: Date and time
Updatedby: Name
---------------------------------
*/
* 包括公用 颜色标记
---------------------------------
COLORS
Body background: #def455
Main Text: #333
*/
* 给 ID 和 Class 进行 有意义 的命名
不推荐的命名方式:
推荐使用的命名方式:
* 将 关联的 样式规则进行整合
#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header a#skip { ... }
#navigation { ... }
#navigation ul { ... }
#navigation ul li { ... }
#navigation ul li a { ... }
* 给样式添加清晰的 注释
#header{ ... }
3、组件化 CSS
ep: Html文档引入了一个主样式表
1. 将主样式表 拆分 成独立的样式文件
优势:更易于查找样式规则,简化维护,方便管理,还可以针对某一页面提供特定的样式。
2. 添加一个桥接样式文件
优势:可以随时添加或移除样式而不需要修改HTML文档。
3. 引入桥接样式
为什么要定义两种媒体类型?
NN4(第四代N氧化碳浏览器)不支持 @import,故识别不到桥接样式。
4. 将(分离的)CSS文件 导入 桥接样式中
@import 如何工作?
它将所有CSS规则从一个文件导入到另外一个文件。@import 不能被老的浏览器所识别。
概述:
对于 大型站点 来说,这是一个理想的概念
4、Hack-free CSS
假如想针对IE或者避开IE,可以使用 条件注释
1. 针对IE,创建一个新的样式文件
2. 在HTML文档的开头添加 条件注释 代码
只有指定的IE浏览器版本识别这个新的样式,其它的浏览器会彻底忽略它
条件注释的优点:
* no hacks
特定的CSS规则仅出现在新的样式表里
* 文件分离
针对特定版本的IE定义的 样式脱离了主样式表,可以 在IE浏览器升级更新对属性支持时 轻松移除这些文件.
* 针对性
可对不同版本的IE浏览器有针对性的进行相关属性的定义。
高效、可维护、组件化的CSS的更多相关文章
- Vue.js:轻量高效的前端组件化方案
转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...
- 【转】Vue.js:轻量高效的前端组件化方案
摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...
- CSS组件化思考
为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...
- (day67)组件、组件化、组件传参、JS补充(命名转换、for in 、数据转换)、css取消选中和模拟小手
目录 一.初识组件 (一)概念 (二)特点 二.组件的分类 (一)根组件 (二)局部组件 (三)全局组件 二.数据组件化 三.组件的传参 (一)父传子 (二)子传父 四.JS补充 (一)与html命名 ...
- 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架
本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...
- 【转】Web应用的组件化开发(一)
原文转自:http://blog.jobbole.com/56161/ 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其 ...
- Web应用的组件化(一)
基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途 ...
- 前端web应用组件化(一) 徐飞
https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...
- 从徐飞的文章《Web应用的组件化开发(一)中窥视web应用开发的历史
Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...
随机推荐
- 使用spring boot创建fat jar APP
文章目录 介绍 build和run fat jar和 fat war 更多配置 介绍 在很久很很久以前,我们部署web程序的方式是怎么样的呢?配置好服务器,将自己写的应用程序打包成war包,扔进服务器 ...
- Linux发送邮件命令mail,mutt
邮件常常是Linux下监控报警手段之一.Linux下的mail命令可以方便,快速的完成发送邮件. 1. Linux发邮件2种常见客户端命令 1.1 mail命令(推荐) 语法: 无邮件正文 mail ...
- 【Linux常见命令】cut命令
cut - remove sections from each line of files 参数: -b 可以按字节来查看文件中的内容 -b参数用在中文上,容易出现乱码问题.因为中文字符一个字符占两个 ...
- 怎样借助Python爬虫给宝宝起个好名字
每个人一生中都会遇到一件事情,在事情出现之前不会关心,但是事情一旦来临就发现它极其重要,并且需要在很短的时间内做出重大决定,那就是给自己的新生宝宝起个名字.因为要在孩子出生后两周内起个名字(需要办理出 ...
- Bomb Enemy 炸弹人
Given a 2D grid, each cell is either a wall 'W', an enemy 'E' or empty '0' (the number zero), return ...
- Linux shell基础(五)sed命令
一.sed命令 sed是一种强大的流式编辑器 (stream editor for filtering and transforming text),它能够完美的使用正则表达式,逐行处理文本并把结果显 ...
- TCP 3-Way Handshake
TCP是面向连接的协议,其数据传输过程分为建立连接.数据传送.释放连接三个阶段. 0 建立连接 建立连接的过程也就是常说的"三次握手": 客户端向服务器端发送一个SYN报文(SYN ...
- MES系统介绍(一)
由于本人从事的行业主要为Mes行业,所以这里准备介绍一下Mes系统的基础概念和实际运用,并且以自己做过的一个实际案例(包括代码)来详细描述自己对Mes系统的认识,帮助小白扫盲,望大神勿喷. MES系统 ...
- 如何选择IO调度器
概述 由于对multi-quque的IO调度算法不太熟悉,为了避免误人子弟,本文暂时只会介绍如何选择single-queue的IO调度算法.等将来对multi-queue有充分认识后再补充. 如果不清 ...
- java基础篇 之 位运算符
按位操作符 按位操作符用来操作基本数据类型中的单个"比特"(bit),即二进制位.按位操作符会对两个参数中对应的位执行布尔代数运算,并最终生成一个结果. 我们常用的按位操作 ...