创建一套管理良好的CSS代码可能是一个挑战。我们在下面列出了要遵循的CSS编写方法以及要避免的一些错误习惯。
使用CSS重置
浏览器不一致是当前前端开发中最大的问题之一。在不同的浏览器上，像边距、页面、行高、标题、字体大小等风格可能会有所不同。重置样式表的目的是通过提供可以编辑和扩展的通用样式来减少浏览器不一致之处。下面就来看看CSS重置样式，可以根据项目需求自行编写：
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { padding: 0; margin: 0; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset,img { border: 0; }
address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal; }
ol,ul { list-style: none; }
caption,th { text-align: left; }
h1,h2,h3,h4,h5,h6 { font-weight: normal; font-size: 100%; }
q:before,q:after { content:''; }
abbr,acronym { border: 0; }提供样式表信息
在样式表上添加标题、作者、标记、描述、URL信息等。这将使用户/开发人员在需要有关您的创建的支持时，可以与他们联系。
/*
Theme Name: 得设创意
Description: 探索网页设计
Author: Deise
Author URI: https://deise.cn/
Tags: 酷站欣赏, 网页模板
*/从上到下组织样式表上的元素
通常对于初学者来说，他们会根据他们想先放的东西在样式表上放置元素。但是对于CSS代码结构来说，这不是一个好的习惯，因为它会让您很难在样式表上找到CSS代码元素。举个例子，考虑下面的代码结构。
/****** General Styles *********/
body { ... }
h1, h2, h3 { .. }
p { ... }
a { ... }
/****** Header Style *********/
.header { ... }
/****** Navigation Style *********/
.nav { .. }
/****** Footer Style *********/
.footer { ... }CSS压缩
缩小CSS文件的大小确实是个不错的主意，因为它将删除空白空间、行中断和删除冗余CSS风格。通过这一点,您可以帮助浏览器加速您的CSS代码的加载。使用CSS压缩工具可以实现这一点。
属于同一元素的组ID和class
如果您有一个包含不同的ID和class的元素，那么您可能希望对它们进行分组，使它们看起来有条理，易于找到，因此查找错误不会花费时间。
.container {width: 960px; margin: 0; padding: 0;}.
.container #logo {font-family: Arial, sans-serif; font-size: 30px; color: red;}.
.container #tagline {font-family: Verdana; font-size: 10px;}使用注释来分组CSS
CSS编码的另一个最佳做法是对每组CSS进行注释说明。这将使您很容易找到特定的CSS组。
/****** General Styles *********/
body { margin: 0; padding: 0; width: 100%;}
h1, h2, h3 { font-family: Arial, sans-serif; font-weight:normal; font-size: 55px; text-align: center; color: #fff; margin: 0; padding: 0; }结构命名惯例
在ID和class上使用适当的命名约定将对您的工作有很大意义。如果您需要添加元素或重新设计网站，这将有助于您的工作更加容易和快速。
始终正确地根据元素的使用来命名元素，而不是根据它们的属性来命名，比如元素的颜色或字体大小。
使用十六进制代码代替名称颜色
比如编写字体、背景等颜色时，建议使用十六进制代码，而不是名称颜色。
使用CSS浏览器前缀
如果您意识到CSS3的新特性，那么您还必须知道每个浏览器在涉及特定风格时都有自己的规范。这就是为什么使用浏览器前缀来确保浏览器支持你想要使用的特定特性风格。
许多设计人员和开发人员在这个简单的问题上出现了错误，因为他们忘记了向目标特定浏览器添加浏览器前缀。CSS浏览器的前缀是:
- Chrome : -webkit-
- Firefox : -moz-
- iOS : -webkit-
- Opera : -o-
- Safari : -webkit-
例如,您希望向CSS代码添加一个css3转换，只需要使用转换属性和浏览器前缀。看看下面的代码。
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;要避免的坏习惯
1、创建冗余CSS
对特定元素反复使用相同样式不是一个好的习惯。清理代码和删除冗余样式非常重要。例如如果您有一个具有相同字体大小和颜色的段落标记和跨段标记，您可以使用逗号对它们进行分组。看看下面的代码。
错误习惯
span { font-size: 12px; color: red; }
p { font-size: 12px; color: red; }好习惯
span, p { font-size: 12px; color: red; }2、将标记名称与标识或类名称混合
标记元素或类名组合在一起不是一个很好的习惯，因为它将不必要地减缓匹配过程。看看下面的代码。
错误习惯
p#container { color: red; font-size: 8px; }好习惯
#container { color: red; font-size: 8px; }3、融合减少分散
使用单独的CSS代码来确定目标边距或在顶部、左侧、右侧或底部不是一个好主意。压缩代码并将其合并成一行将使代码更易于阅读，并使浏览器的加载速度更快。
错误习惯
#container {
margin-top: 10px;
margin-right: 2px;
margin-left: 5px;
margin-bottom: 14px;
}好习惯
#container { margin: 10px 2px 5px 14px;}4、在类名称上使用下划线
使用下划线可能会给旧浏览器带来不必要的结果。强烈推荐使用连字符。看看下面的例子。
错误习惯
.left_col { margin: 0; padding: 0; }好习惯
.left-col { margin: 0; padding: 0; }在这篇文章中，为您提供了一些基本技巧来如何编写更好的CSS代码，以及要避免哪些错误。在编码过程中保留这些规则将有助于您实现干净的代码，防止今后出现错误。确保您使用W3cCSS验证器验证您的CSS代码的质量和错误的CSS代码。