高效、可维护、组件化的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. 为什么要做组件化? 无论前端也好,后端也好,都是整个软件体系的一部分.软件产品也是产品,它的研发过程也必然是有其目的.绝大多数软件产品是追 ...
随机推荐
- Galera将死——MySQL Group Replication正式发布
2016-12-14 来源:InsideMySQL 作者:姜承尧 MySQL Group Replication GA 很多同学表示昨天的从你的全世界路过画风不对,好在今天MySQL界终于有大事情发生 ...
- ExtJS2.0实用简明教程 - Form布局
Form布局由类Ext.layout.FormLayout定义,名称为form,是一种专门用于管理表单中输入字段的布局,这种布局主要用于在程序中创建表单字段或表单元素等使用. 看下 ...
- 开启Apache服务出现的错误
httpd: Could not reliably determine the server's fully qualified domain name, using 127.0.0.1 for Se ...
- Centos 6.5升级gcc : 源码安装 + rpm安装
1. 前言 采用Centos 6.5默认的gcc版本为4.4.7,不支持c++ 11,需要升级: 首先想到用yum命令:执行yum update gcc-c++或yum update g++ 显示没有 ...
- DeepWalk论文精读:(4)总结及不足
模块4 1 研究背景 随着互联网的发展,社交网络逐渐复杂化.多元化.在一个社交网络中,充斥着不同类型的用户,用户间产生各式各样的互动联系,形成大小不一的社群.为了对社交网络进行研究分析,需要将网络中的 ...
- docker批量删除本地镜像和容器
长时间运行docker,每次只用docker kill去停止容器,但是从没删除过本地镜像,导致有上百个镜像在占用内存. 1.批量停止容器 docker container stop $(docker ...
- shell之路 shell核心语法【第四篇】流程控制
if语句 if ... fi 语句: if ... else ... fi 语句: if ... elif ... else ... fi 语句. 注意: expression 和方括号([ ])之间 ...
- 用js写出一个漂亮的单选框选中效果
一般的input框比较简单,我们可以用JavaScript配合css背景图片定位让我们模拟写出一个点击选中效果 首先需要有个图片素材,当页面加载的时候是背景图片定位到左图,当我们点击图片的时候,背景图 ...
- mac安装vue-devtools
mac安装vue devtools 1.到github下载vue tool 的压缩包 正常的方法:git clone https://github.com/vuejs/vue-devtools 但事实 ...
- 201771010113 李婷华 《面向对象程序设计(Java)》第六周总结
一.理论知识部分 第四章 类与对象 1.方法的定义:方法声明和方法体. 2.重载:一个类中可以有多个方法具有相同的名字,不同的类型,不同的参数. 3.构造器:也叫构造方法,是类中的一种特殊的方法,其作 ...