如何写出更加高效的CSS?

主要有以下四个关键点:

高效的CSS

可维护的CSS

组件化的CSS

hack-free CSS

1、书写高效的CSS代码

* 使用 外联样式 替代行间 样式或者内嵌样式.

* 为了兼容老版本的浏览器,建议使用 link 引入外部样式表的方来代替 @import 导入样式的方式.

* 使用 继承

低效的:
p{
font-family: arial, helvetica, sans-serif; }

#container {
font-family: arial, helvetica, sans-serif; }

#navigation {
font-family: arial, helvetica, sans-serif; }

h1 { font-family: georgia, times, serif; }

高效的:

body {
font-family: arial, helvetica, sans-serif; }

h1 {
font-family: georgia, times, serif; }

* 使用 多重选择器

低效的:

h1 { color: #236799; }
h2 { color: #236799; }
h3 { color: #236799; }

高效的:

h1, h2, h3{ color: #236799; }

* 使用 多重声明

低效的:

p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666; }

高效的:

p {

   margin: 0 0 1em;
   background: #ddd;
   color: #666;

}

* 使用 简记属性

高效的:

body {

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

#news { background: #ddd !important; }
特定情况下可以使用 以下多层方式提高权重级别: 
#container #news { background: #ddd; }

2、书写可维护的CSS代码

* 在样式表开头添加一个注释块,用以描述这个样式表的 创建日期、创建者、 标记 等备注信息.

/*
---------------------------------

Site:      Site name Name

Author:      Name


Updated:     Date and time


Updatedby:    Name

---------------------------------

*/

* 包括公用 颜色标记

/*

---------------------------------


COLORS


Body background:    #def455
Container background:    #fff

Main Text:     #333
Links:     #00600f
Visited links:    #098761
Hover links:    #aaf433
H1, H2, H3:    #960
H4, H5, H6:    #000
---------------------------------

*/

* 给 ID 和 Class 进行 有意义 的命名

不推荐的命名方式:

.green-box { ... }
#big-text { ... }

推荐使用的命名方式:

.pullquote {... }
#introduction {... }

* 将 关联的 样式规则进行整合

#header { ... }

#header h1 { ... }

#header h1 img { ... }

#header a#skip { ... }

#navigation { ... }

#navigation ul { ... }

#navigation ul li { ... }

#navigation ul li a { ... }

* 给样式添加清晰的 注释

/*
---------------------------------
header styles
---------------------------------
*/

#header{ ... }

/*
---------------------------------
navigation styles
---------------------------------
*/

#navigation { ... }
 

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浏览器有针对性的进行相关属性的定义。

<!--[if IE]>
<!--[if IE 5]>
<!--[if IE 6]>
<!--[if lt IE 6]>
<!--[if lte IE 6]>
<!--[if gt IE 6]>
<!--[if gte IE 6]>

高效、可维护、组件化的CSS的更多相关文章

  1. Vue.js:轻量高效的前端组件化方案

    转发一篇尤老师对vue.js的介绍,了解vue.js的来龙去脉.不过现在已经是2.0了,也有添加一些新的东西,当然有些东西也改了. Vue.js:轻量高效的前端组件化方案 Vue.js 是我在2014 ...

  2. 【转】Vue.js:轻量高效的前端组件化方案

    摘要:Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.在前端纷繁复杂的生态中,Vue.js有幸受到一定程度的关注,目前在GitHub上已经有5000+的star.本文将从各方面对Vue ...

  3. CSS组件化思考

    为什么组件化? 分层设计,代码复用,减少冗余: 维护方便,弹性好: 如何组件化? 目前代码分成三级: 第一级粒度最细,是基础,主要包含字体配置,颜色配置,UI框架(比如MUI或者pure.css): ...

  4. (day67)组件、组件化、组件传参、JS补充(命名转换、for in 、数据转换)、css取消选中和模拟小手

    目录 一.初识组件 (一)概念 (二)特点 二.组件的分类 (一)根组件 (二)局部组件 (三)全局组件 二.数据组件化 三.组件的传参 (一)父传子 (二)子传父 四.JS补充 (一)与html命名 ...

  5. 【腾讯Bugly干货分享】打造“微信小程序”组件化开发框架

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2nQzsuqq7Avgs8wsRizUhw 作者:Gc ...

  6. 【转】Web应用的组件化开发(一)

    原文转自:http://blog.jobbole.com/56161/ 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其 ...

  7. Web应用的组件化(一)

    基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追逐利润的,在产品目标确定的情况下,成本有两个途 ...

  8. 前端web应用组件化(一) 徐飞

    https://github.com/xufei/blog/issues/6 Web应用的组件化(一) 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也 ...

  9. 从徐飞的文章《Web应用的组件化开发(一)中窥视web应用开发的历史

    Web应用的组件化开发(一) 原文来自 徐飞 基本思路 1. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...

随机推荐

  1. Galera将死——MySQL Group Replication正式发布

    2016-12-14 来源:InsideMySQL 作者:姜承尧 MySQL Group Replication GA 很多同学表示昨天的从你的全世界路过画风不对,好在今天MySQL界终于有大事情发生 ...

  2. ExtJS2.0实用简明教程 - Form布局

            Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用.   看下 ...

  3. 开启Apache服务出现的错误

    httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for Se ...

  4. Centos 6.5升级gcc : 源码安装 + rpm安装

    1. 前言 采用Centos 6.5默认的gcc版本为4.4.7,不支持c++ 11,需要升级: 首先想到用yum命令:执行yum update gcc-c++或yum update g++ 显示没有 ...

  5. DeepWalk论文精读:(4)总结及不足

    模块4 1 研究背景 随着互联网的发展,社交网络逐渐复杂化.多元化.在一个社交网络中,充斥着不同类型的用户,用户间产生各式各样的互动联系,形成大小不一的社群.为了对社交网络进行研究分析,需要将网络中的 ...

  6. docker批量删除本地镜像和容器

    长时间运行docker,每次只用docker kill去停止容器,但是从没删除过本地镜像,导致有上百个镜像在占用内存. 1.批量停止容器 docker container stop $(docker ...

  7. shell之路 shell核心语法【第四篇】流程控制

    if语句 if ... fi 语句: if ... else ... fi 语句: if ... elif ... else ... fi 语句. 注意: expression 和方括号([ ])之间 ...

  8. 用js写出一个漂亮的单选框选中效果

    一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...

  9. mac安装vue-devtools

    mac安装vue devtools 1.到github下载vue tool 的压缩包 正常的方法:git clone https://github.com/vuejs/vue-devtools 但事实 ...

  10. 201771010113 李婷华 《面向对象程序设计(Java)》第六周总结

    一.理论知识部分 第四章 类与对象 1.方法的定义:方法声明和方法体. 2.重载:一个类中可以有多个方法具有相同的名字,不同的类型,不同的参数. 3.构造器:也叫构造方法,是类中的一种特殊的方法,其作 ...