nettuts带来的5个css书写技巧，简单翻译一下它的中心思想。
1. CSS Reset/重置
你也许需要先了解什么是css重置。然后怎么样写css重置呢。
- 你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该根据你的项目改成你自己的reset.
- 不要使用* { margin: 0; padding: 0; } 。我个人很爱用，原作者提到使用这句并不适用一些元素比如单选按钮。不过俺博客里面也没有单选按钮，如果有，又重新给单选按钮重设就好了嘛。
2. 按字母顺序来排列css
不按字母顺序排的
div#header h1 {
z-index: 101;
color: #000;
position: relative;
line-height: 24px;
margin-right: 48px;
border-bottom: 1px solid #dedede;
font-size: 18px;
}
按字母顺序排的
div#header h1 {
border-bottom: 1px solid #dedede;
color: #000;
font-size: 18px;
line-height: 24px;
margin-right: 48px;
position: relative;
z-index: 101;
}
理由是这样可以更好的找到某个属性。个人觉得还好，差别也不是太大。不过也许会适合你。
3. 更好的组织css结构
使用css注释来分给css分组，这样结构明了，也有利于协同设计。
/*****Reset*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
/*****layouts*****/
xxxxxxx{xxxxx}
xxxxx{xxxxx}
4. 保持一致性
不要无意义的去讨论到底一个选择器的所有属性写在一行，还是每个属性写一行比较好。你自己觉得ok就好。
iv#header { float: left; width: 100%; }
div#header div.column {
border-right: 1px solid #ccc;
float: rightright;
margin-right: 50px;
padding: 10px;
width: 300px;
}
div#header h1 { float: left; position: relative; width: 250px; }
比如我个人就喜欢写在一行，因为每排写一行会让整个文档感觉太长了，找起来不方便。如果你喜欢写一行，但是发给team的另一个，他却喜欢每排一行，那怎么办？其实很简单，把css拿去w3c验证，它会有一份结果，会自动转换成每排一行。
5. 先标记后css
这个我没有太看懂。大概理解是对html的标记弄好后再写css会比较不容易出错。比如我写一个页面，先写一个最基本的标记结构
<body>
<div id="wrapper">
<div id="header"><!--end #header-->
<div id="container">
<div id="content">
</div><!--end #content-->
<div id="sidebar">
</div><!--end #sidebarr-->
</div><!--end #container-->
<div id="footer">
</div>!<--end #footer-->
</div><!--end #wrapper-->
</body>
然后就是尽量善用子选择器，而不是一要给哪个元素进行样式化，就给它添加个选择器。
分享到：
相关推荐
标题：“CSS书写技巧来兼容不同的浏览器” 描述：“解决不同浏览器样式（CSS）兼容问题，符合W3C标准。” 本文旨在探讨如何通过运用特定的CSS书写技巧来确保网站或应用程序能在不同浏览器中保持一致的视觉效果，...
nettuts带来的5个css书写技巧，简单翻译一下它的中心思想。 1. CSS Reset/重置 你也许需要先了解什么是css重置。然后怎么样写css重置呢。 你可以copy Eric Meyer Reset, YUI Reset或其它css reset, 但你接下来应该...
此时，可以采用以下CSS技巧： ```css h1 { background: url('widget-image.gif') no-repeat; height: image_height; /* 替换为实际高度 */ text-indent: -2000px; } ``` 通过设置负的`text-indent`值，可以使...
#### 五、CSS布局技巧 - **盒模型**：了解CSS2盒模型的基本概念，包括内容、填充、边框和外边距四部分。 - **自适应布局**：通过百分比宽度和高度等属性实现自适应布局，使得网页在不同设备上都能良好展示。 - **...
### CSS书写高效的CSS-CSS的渲染效率 在前端开发领域，CSS（层叠样式表）是构建网页布局、样式和视觉效果的关键技术之一。优化CSS不仅能够提升网站性能，还能改善用户体验。本文将从几个方面探讨如何通过改进CSS...
以下是一些关键的CSS书写规范： 1. **属性顺序**： 当编写CSS时，推荐按照特定的顺序排列属性，例如： - 位置属性（position, top, right, bottom, z-index, display, float） - 大小属性（width, height, ...
"OA-1-网页前端CSS书写规范.pdf"这份文档应该会详细阐述这些原则，并可能提供更多的实用技巧和最佳实践，帮助开发者形成良好的CSS编码习惯，提升工作效率。在实际工作中，遵循这些规范将有助于创建更高效、更易于...
CSS，即层叠样式表（Cascading Style Sheets），是一种用于描述网页及应用程序用户界面外观和表现的语言。在实际开发中，由于不同浏览器对CSS的...同时，良好的CSS书写技巧可以提高代码质量，便于团队协作和后期维护。
### 网页前端CSS书写规范详解 #### CSS书写顺序 在进行网页前端开发时，遵循一定的CSS属性书写顺序能够使代码更加清晰易读。一般推荐的书写顺序如下： 1. **位置属性**：包括`position`、`top`、`right`、`z-...
本文是一篇关于学习Div+CSS布局技巧的速成教程，旨在帮助读者快速掌握基于Div和CSS的网页布局方法。在详细介绍前，需要明确一些基础概念，如HTML、DHTML、XHTML等，因为这些知识将贯穿整个教程。学习本教程之前，...
### DIV+CSS网页布局经典教程知识点汇总 #### 一、DOCTYPE的选择 - **什么是DOCTYPE**：DOCTYPE是指Document Type，即文档类型，在HTML文档头部用来指定文档遵循的标准或规范。DOCTYPE的作用在于告诉浏览器文档...
《5日精通CSS层叠样式表》是一本旨在帮助读者快速掌握CSS核心技术的教程。CSS，全称为Cascading Style Sheets，是用于控制网页元素呈现方式的重要技术，它赋予了HTML或XML文档丰富的视觉表现力。通过这五天的学习...
在本篇文章中,Jina Bolton给出了10个CSS技巧提示,这些内容是由对12位顶尖的设计者的调查提炼而来. 接下来,我将重点放在创建性感的样式表方法的讨论之上.一旦CSS被用来创建具有魅力的网站,CSS的书写事实上就已经成为...
首先，我们需要了解CSS书写规范，这是因为一个统一的书写规范有助于团队协作和代码的维护。通常，CSS书写规范会涉及选择器命名、属性顺序、代码注释等规则，以确保代码的一致性和可读性。 接下来是写出高效易懂CSS...
本文将详细介绍如何规范CSS的命名和书写，包括CSS书写顺序、书写规范、命名规范、以及一些实用的技巧。 #### CSS书写顺序 为了提高CSS代码的可读性和维护性，可以按照以下顺序组织属性： 1. **位置属性**：如`...
以下是五个关于书写CSS的小技巧，旨在使你的样式表更加规范： 1. **按字母顺序排列属性**： 排列CSS属性按照字母顺序进行，如示例所示，可以使代码看起来更整洁，方便查找特定属性。当需要快速定位或修改某属性时...
- **内容结构**：教程覆盖CSS基础知识至进阶技巧，包括实例演示与测验，帮助读者巩固学习成果。 - **1.2 CSS简介** - **基础知识要求**：读者需事先了解HTML和XHTML，以便更好地理解CSS的应用场景。 - **历史背景...
#### CSS书写顺序 在编写CSS时，按照一定的顺序组织属性可以提高代码的整洁度，便于后续的阅读与维护。通常推荐的顺序如下： 1. **位置属性**：包括`position`, `top`, `right`, `z-index`, `display`, `float`等...