整理及优化CSS代码的七个原则[译]
作者：暴风彬彬 来源：彬Go 发布时间：2009-04-23 12:35:00
英文原文：http://www.smashingmagazine.com/2008/08/18/
译文原文：http://blog.bingo929.com/7-principles-optimized-css.html
作为网页设计师(前端工程师)，你可能还记得曾经的那个网页大小建议:一个网页（包括HTML、CSS、Javacript、Flash和图片）尽量不要超过30KB的大小，随着互联网的日益庞大，网络带宽也在飞速发展，很多设计师已经不再考虑这条30KB的理想准则。随着越来越受欢迎的CSS布局和Javascript对网站用户体验的强化，使得这种现象越来越普遍，尤其是对于大型网站来说，仅仅一个CSS文件就已经超过了30KB的上限。
但是即便如此，现在也有很多准则来帮助你在完成CSS布局后进行CSS代码的压缩和优化。CSS代码优化的目的并不仅仅是减少CSS文件的大小，它还能让你的CSS代码更有条理、更高效。在彬Go，你将会学到更多关于CSS代码优化的知识，这能帮你更熟悉CSS代码的规范性。熟悉这些概念还能让你成为更全面的网页设计师，从而写出更优化的CSS代码。
您还可以参阅暴风彬彬曾经讲解过的《10个CSS简写技巧让你永远受用》。
1.使用简写
如果你现在还对简写一点都不了解，那你就又写落伍了，不过幸好，学起来并不是很难。使用简写是一种让代码减少的最简单方法。没有比现在更适合实践代码简写的时候了，还等什么，一起来看看吧。
Margin、border、padding、background、font、list-style和outline 都是可以进行简写的属性。CSS简写就是不再使用不同的相类似属性的声明…
p { margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; }
你可以把它们简写成这样:
p { margin: 10px 20px 30px 40px; }
浏览器可以通过不同数量的属性值来解释你定义的CSS代码，请看图解:
上面的简写图解说明的是依据不同的属性值可以进行不同的缩写，这种方法同样适用于padding和Border-width属性。
Font的简写对于缩小代码量很有帮助，而且能让你少打很多字母; )
Font简写的例子。注:如果没有定义某个属性值的话，将继承副级元素的定义或使用默认值。
如果你对以上简写方法已经了如指掌，你还可以看看以下两个简写教程(英文)，也许会对你有所帮助:
CSS Shorthand Guide(CSS简写指导)
Efficient CSS with shorthand properties(高效CSS属性的简写)
0
投稿猜你喜欢
- 前言：在Python中，如果我们想要在遍历一组数据的过程中，对这组数据进行修改，通常会出现许多问题，例如对列表进行上述操作时， 会忽略部分数
- 有时候我们需要判断某一个IP地址是否属于一个网段,以决定该用户能否访问系统.比如用户登录的IP是218.6.7.7,而我们的程序必须判断他是
背景介绍PyTorch 训练的模型，需要在Jetson nano 上部署，jetson 原生提供了TensorRT 的支持，所以一个比较好的- 如下所示：hist = model.fit(x,y, epochs=epoch_num, batch_size=32,callbacks=e
- 如果你对在Python生成随机数与random模块中最常用的几个函数的关系与不懂之处，下面的文章就是对Python生成随机数与random模
- 希望在自己的机器模拟一下公司中微服务的构建，使用docker部署了mysql实例，使用spring boot进行了CRUD（增删改查）操作进
- GeoPandas是一个基于pandas，针对地理数据做了特别支持的第三方模块。它继承pandas.Series和pandas.Datafr
- 前言： 在各类技术岗位面试中，似乎 MySQL 相关问题经常被问到。无论你面试开发岗位或运维岗位，总会问几道数据库问题。经常有小伙
- 最近经常遇到xmlHttp组件的问题, 今天终于有空将解决过程中的经验整理下来了! ^o^一、在运用xmlhttp组件编
- 前几天学习了Yolov5，当我想实际将Yolov5实际运用的时候却不知道怎么办了然后我决定对Yolov5的detect.py修改为可以直接调
- 给明文密码加密的流程：import base64pwd_after_encrypt = base64.b64encode(b'thi
- 题目一个整数，它加上100后是一个完全平方数，再加上168又是一个完全平方数，请问该数是多少？程序分析因为168对于指数 * 来说实在太小了，
- 本文主要来学习一下JavaScript插件--轮播。废话不多说，直接进入学习。完整教程可查看：Bootstrap3.0教程轮播下面先来展示的
- 在查询中执行下列语句 EXEC sp_attach_single_file_db @dbname = 'tggov_Data'
- 一、RPM版安装查看是否有其他版本的数据库,若有,删除干净非root用户必须要有sudo权限1.下载mysql相关安装包https://mi
- 平时在PL/SQL中的编程中遇到一些问题，这里以问答的形式来进行把它们总结下来，以供大家分享。1、当需要向表中装载大量的数据流或者需要处理大
- 今天去辛集买箱包，下午挺晚才回来，又是恶心又是头痛。恶心是因为早上吃坏东西+晕车+回来时看到车祸现场，头痛大概是烈日和空调混合刺激而成。没有
- #!/bin/sh#code by scpman#功能:检查并修复mysql数据库表#将此脚本加到定时中，脚本执行时，等会读库,列出要修复的
- 简介正则表达式本身是一种小型的、高度专业化的编程语言，而在python中，通过内嵌集成re模块，程序媛们可以直接调用来实现正则匹配。正则表达
- 前言众所周知Python不像JS或者PHP这种弱类型语言里在字符串连接时会自动转换类型，如果直接将字符串和数字拼接会直接报错。如以下的代码：
