一、使用外联样式替代行间样式或者内嵌样式
不推荐使用行间样式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page title - 52css.com</title>
</head>
<body>
<p style="color: red"> ... </p>
</body>
</html>
不推荐使用内嵌样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Page title - 52css.com</title>
<style type="text/css" media="screen">
p { color: red; }
</style>
</head>
<body>... </body>
</html>
推荐使用外联样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text
<title>Page title - 52css.com</title>
<link rel="stylesheet" href="name.css" type="text/css" media="screen" />
< /head>
<body> ... </body>
</html>
二、建议使用 link 引入外部样式表
为了兼容老版本的浏览器，建议使用 link 引入外部样式表的方来代替 @import导入样式的方式.
译者注： @import是CSS2.1提出的所以老的浏览器不支持
@import和link在使用上会有一些区别， 利用二者之间的差异，可以在实际运用中进行权衡。
不推荐@import导入方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="content-type" content="text
<title>Page title - 52css.com</title>
<style type="text/css" media="screen">
@import url("styles.css");
</style>
</head>
<body> ... </body>
</html>
推荐引入外部样式表方式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="en"> <head>
<meta http-equiv="content-type" content="text
<title>Page title - 52css.com</title>
<link rel="stylesheet" href="name.css" type="text/css" media="screen" />
</head>
<body> ... </body>
</html>
三、使用继承
低效率的
p{ font-family: arial, helvetica, sans-serif; }
#container { font-family: arial, helvetica, sans-serif; }
#navigation { font-family: arial, helvetica, sans-serif; }
#content { font-family: arial, helvetica, sans-serif; }
#sidebar { font-family: arial, helvetica, sans-serif; }
h1 { font-family: georgia, times, serif; }
高效的
body { font-family: arial, helvetica, sans-serif; }
body { font-family: arial, helvetica, sans-serif; }
h1 { font-family: georgia, times, serif; }
四、使用多重选择器
低效率的
h1 { color: #236799; }
h2 { color: #236799; }
h3 { color: #236799; }
h4 { color: #236799; }
高效的
h1, h2, h3, h4 { color: #236799; }
五、使用多重声明
低效率的
p { margin: 0 0 1em; }
p { background: #ddd; }
p { color: #666; }
译者注： 对于十六进制颜色值，个人偏向于色值不缩写且英文字母要大写的方式.
高效的
p { margin: 0 0 1em; background: #ddd; color: #666; }
六、使用简记属性
低效率的
body { font-size: 85%; font-family: arial, helvetica, sans-serif; background-image: url(image.gif); background-repeat: no-repeat; background-position: 0 100%; margin-top: 1em; margin-right: 1em; margin-bottom: 0; margin-left: 1em; padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px; border-style: solid; border-width: 1px; border-color: red; color: #222222;
高效的
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; color: #222; }
七、避免使用 !important
慎用写法
#news { background: #ddd !important; }
特定情况下可以使用以下方式提高权重级别
#container #news { background: #ddd; }
body #container #news { background: #ddd; }
摘自：http://www.52css.com/article.asp?id=1156
注：本博客文章均已注明原创和转载，如转载本博客文章，需注明原文出处或征求原作者同意。
分享到：
相关推荐
### 书写高效的CSS #### 概述 在Web开发领域，CSS（层叠样式表）是一种用于描述HTML或XML文档的外观和格式的语言。随着Web技术的发展与网站复杂度的提升，编写高效的CSS成为了前端工程师的一项必备技能。本文将...
### CSS书写高效的CSS-CSS的渲染效率 在前端开发领域，CSS（层叠样式表）是构建网页布局、样式和视觉效果的关键技术之一。优化CSS不仅能够提升网站性能，还能改善用户体验。本文将从几个方面探讨如何通过改进CSS...
本资料“CSS_命名规范参考及书写注意事项”将为你提供相关的指导原则。 1. BEM（Block Element Modifier）命名法：BEM是一种流行的CSS命名方法，由Yandex公司提出。它的核心理念是将CSS类名分为三部分：Block（块）...
高效学习CSS布局之道：通过244个范例掌握网页样式与布局技术
在CSS效率优化方面，除了规范书写和合理的引入方式外，组件化也是提高CSS效率和可维护性的关键。组件化CSS意味着将样式封装在独立的模块中，每个模块负责一组相关的样式规则。这样，我们可以在不同的页面或组件中...
《CSS高效开发实战：CSS 3、LESS、SASS、Bootstrap、Foundation》写作的目的是要确保CSS不会成为开发过程或网站性能的瓶颈，确保读者可以运用一些工具、框架、预处理来提升开发效率和节约人力成本，确保所讲解的内容...
### 如何书写高效、可维护、组件化的CSS的演示文档 #### 一、书写高效CSS的关键点 在现代Web开发中，CSS（层叠样式表）作为网站视觉表现的重要组成部分，其编写质量直接影响到页面加载速度及用户体验。本文将重点...
在IT行业中，构建高效、可维护且组件化的CSS是网页和应用程序前端开发的重要目标。这样的CSS结构能够确保代码的组织性、复用性和扩展性，从而提高开发效率，降低维护成本。下面，我们将深入探讨这一主题，理解其背后...
《CSS高效开发实战——CSS 3、LESS、SASS、Bootstrap、Foundation》分为3部分：第1部分是HTML/CSS基础和CSS 3新特性演示，涵盖盒子模型、浮动布局、属性前缀、选择器、字体、边框、背景、颜色、变换、动画、弹性盒子...
"高效学习CSS布局之道244个范例源码"是一份非常实用的学习资源，旨在帮助初学者和进阶者深入理解并熟练运用CSS进行网页布局。这份资料包含了大量的实例源码，让你能够通过实践来提升自己的技能。 首先，我们来探讨...
网页前端CSS书写规范是前端开发中非常重要的一个环节，它直接关系到代码的可维护性、可读性和项目的整体风格统一性。一个良好的CSS书写规范不仅能够提升开发效率，还能优化网页加载速度，提高网站的用户体验。 首先...
### CSS书写规范与Web设计标准 #### CSS书写规范概述 CSS（层叠样式表）是网页设计中的一个重要组成部分，用于定义HTML文档中的元素布局、颜色、字体等视觉表现形式。良好的CSS书写规范不仅可以提高代码的可读性...
在CSS高效开发实战中，我们关注的是如何利用最新的技术和工具来优化CSS的编写，提高工作效率。这个主题涵盖了CSS 3的新特性，预处理器如LESS和SASS的优势，以及流行的前端框架Bootstrap和Foundation的源代码分析。...
### CSS书写代码要求规范 #### 一、引言 CSS（Cascading Style Sheets），即层叠样式表，是用于描述HTML文档外观和格式的一种样式语言。随着网站复杂度的提高，良好的CSS代码规范变得尤为重要。它不仅能提高代码的...
在CSS编码过程中，遵循一定的书写规范和顺序至关重要，这不仅有助于提高代码的可读性和维护性，还能确保团队协作时的统一性。以下是对标题和描述中提到的CSS书写规范和顺序的详细说明： **CSS书写顺序：** 1. **...
此为《高效学习CSS布局之道——通过244个范例掌握网页样式与布局技术》一书的配套光盘，读者可自由取其示例文件做学习、研究之用。 CSS控制元素的大小； CSS控制元素的定位； CSS控制元素的布局； CSS...
CSS控制元素的大小； CSS控制元素的定位； CSS控制元素的布局； CSS控制文本的显示； CSS控制列表元素的显示； CSS控制表格元素的显示； CSS控制其他元素的显示； CSS滤镜； 居中问题； CSS布局构架的建立； CSS布局...
【div+css书写规范】是前端开发中的一个重要概念，它涉及到网页布局和样式的组织方式。下面将详细讲解其中的知识点： 1. **文件命名规范**： - 全局样式：通常用`global.css`表示，包含通用的样式规则。 - 框架...