前端工程师必看、HTML优化、十三个高效整洁技巧
＊红色字体为较无高效率的方式
＊蓝色字体为较管用率的作用
＊绿色字体为注解
1.使用Reset但并非全域Reset
笔者在编写前端语言时经常用到的状况，浏览器百百种，元素的预设属性也都不同，然而使用Reset重置流览器元素的一些预设属性，以让各家浏览器尽量相容。
但需要注意的是，请不要使用全域Reset！
*{ margin:0; padding:0; }
这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。以下提供较全域Reset更有效率做法。
/**
清除内外边距
**/
body, h1, h2, h3, h4, h5, h6, hr, p,
blockquote, ? ? ? ? ?? /* structural elements?结构物质?*/
dl, dt, dd, ul, ol, li,? /* list elements?清单营养元素?*/
pre, ? ? ? ? ? ? ? ? ? ? ? ? ?/* text formatting elements?文本文件模式种元素?*/
form, fieldset, legend, button, input, textarea,?/* form elements?表单原子?*/
th, td, ? ? ? ? ? ? ? ? ? ? ? /* table elements?数据表格的元素?*/
img?{? ? ? ? ? ? ? ? ? ? ? ?/* img elements?图片物质?*/
border:medium none;
margin: 0;
padding: 0;
}
/**?设置预设字体?**/
body,button, input, select, textarea {
font: 12px/1.5 ‘OO正黑体’,tahoma, Srial, helvetica,
sans-serif;
}
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;}
/*?初始化清单稀土元素?*/
ul, ol { list-style: none; }
/*?重设超连结风格?*/
a { text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/*?重制图片成分?*/
img{ border:0px;}
/*?解锁工作表格稀土元素?*/
table { border-collapse: collapse; border-spacing: 0; }
2.良好的命名习惯
可能是笔者在生活上的一些小强迫症，导致笔者不喜欢把程式码乱命名一通，有好有坏啦。
无疑乱七八糟或者无语义命名的代码，我看了会有点小抓狂。如下代码：
.aaabb{margin:2px;color:red;}
我想即使是初学者，也不至於会在实际项目中如此命名一个class，但有没有想过这样的代码同样是很有问题的：
<h1>Myname is <span class=”red blod”>Wiky</span></h1>
问题在於如果你需要把所有原本红色的字体改成蓝色，那修改後就样式就会变成：
.red{color:bule;}
这样的命名就会很牙给，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位 置，大小等）来命名一个class或id，您可以选择意义的命名 如：#navigation{…}，.sidebar{…}，.postwrap{…}
这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。
另外还有一种情况，一些固定的样式，定义後就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如：
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;text-align:right;margin-left:20px;}
.clear{clear:both;text-indent:-9999px;}
那样对於这样一个一段话
<pclass=”alignleft”>我就是个一段话！</p>
如果需要把这个段落由原先的左对齐修改为右对齐，那麽只需要修改className
如：alignright就可以了。
3.代码缩写
CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
就可以缩写为：
li{/* 顺序初学者难记！读者能用的 顺时钟放向去推想，极好用，上左下左 */
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
4.利用CSS继承
就是利用老大去控制这些小罗罗！！！
页面上父元素的多个子元素使用相同的样式，那把相同的样式定义在其父元素上，让它们继承这些CSS样式。这样一石二鸟，既可以方便维护且可减少代码量。那麽本来这样的代码：
#container
li{ font-family:Georgia, serif; }
#container
p{ font-family:Georgia, serif; }
#container
h1{font-family:Georgia, serif; }
就可以简写成：
#container{font-family:Georgia, serif; }?/* 这样他们才知谁是大姐 */
5.使用多重选择器
你可以合并多个CSS选择器为一个，如果他们有共同的样式的话。这样做不但代码简洁且可为你节省时间和空间。如：
h1{
font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{
font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{
font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
就可以合并为：
h1,h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
6.适当的代码注释
这个最重要是要让自己看得懂自己写的程式码，因为有时需要回头修改一些程式码时多多少少会忘记，因为我们是人！总之不来是在写哪种语言得到了注解全部都是让他更好速便于。
代码注释可以让别人更容易读懂你的代码，且合理的组织代码注释，可使得结构更加清晰。你可以选择做的样式表的开始添加目录:
/*————————————
- Reset
- Header
- Content
- SideBar
- Footer
———————————– */
如此你代码的结构就一目了然，你可以容易的查找和修改代码。
而对於代码的主内容，也应适当的加以划分，甚至在有必要的地方在对代码加以注释说明，这样也有利於团队开发：
/* Header */
#header{ height:72px;}
#header h1{ width:100%; margin:0 auto; float:left;height:72px;}
/* Content */
#content{ background:#fff; width:650px; float:left; min-height:600px;overflow:hidden;}
#content h1{color:#F00}/*设置字体颜色?*/
#content .posts{ overflow:hidden; }
/* Footer */
#footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
#footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif;font-size:1.1em; }
7.给你的CSS代码排序
让自己在写CSS的时候更加顺手，如果代码中的属性都能按照Telegram中文版排序，那查找修改的时候就能更加快速：
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
8.保持CSS的可读性
对於笔者而言，观察过蛮多的前端语言工程师，真正要上线的网页大部分写在同一行较多，可让整体样式保持更整洁有力，相对而言就是看起来比较拥挤，以下有更详细介绍。
书写可读的CSS将会使得更容易查找和修改样式。对於以下两种情况，哪种可读性更高，我想不言而明。
/*每个样式属性写一众?*/
div{
background-color:#3399cc;
color:#666;
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
/*全部的样式属性写在同一个行?*/
div{background-color:#3399cc; color:#666; font: 1.2em/1.4em Arial, Helvetica,
sans-serif;? height:300px; margin:10px 5px; padding:5px 0 10px 5px;
width:30%; z-index:10; }
当对於一些样式属性较少的选择器，写一行即可：
/*?选择器属性少的写在一模一样行?*/
div{ background-color:#3399cc; color:#666;}
对於这个规则并非硬性规定，但无论您采用哪种写法，建议保持代码一致。属性多分行写，属性少可以写一行。
9.选择更优的样式属性值
CSS中有些属性采用不同的属性值，虽然达到的效果差不多，当性能上却存在着差异，如区别在於?border : 0?把border设为0px，虽然在页面上看不见，但按?border?预设值理解，流览器依然对?border – width / border – color?进行了渲染，即已经占用了记忆体值。
而?border : none?把?border?设为“ none ”即没有，流览器解析“ none ”时将不作出渲染动作，即不会消耗记忆体值。
所以建议使用border : none ;同样的，display : none?隐藏物件流览器不作渲染，不占用记忆体。
而?visibility : hidden?则会占用记忆体。
10.使用<link>代替@import
首先，@import不属於?XHTML?标签，也不是Web标准的一部分，它对於较早期的流览器相容也不高，并且对於网站的性能有某些负面的影响。具体可以参考《高性能网站设计：不要使用@import》。所以，请避免使用@import，笔者TG电报中文-telegram电脑版中文社交推荐多的使用<Link>也是目前主流的写法。
11.使用外部样式表
笔者依直觉的安全的使用这措施是一种绝，有时候像是常看见较多身边也在写前端开发语言的安全的需求者，把样式表写在HTML页里面，看一把HTML页里面写成那些拢长看一就烦躁，笔者的一点点小强迫症就马上发作了！这个原则始终是一个很好的设计实践。不仅易於维护修改，更重要的是使用外部档可以提高页面速度，因为CSS档都能在流览器中产生缓存。内置在?HTML文档中的CSS则会在每次请求中随HTML文档重新telegram中文版下载，这样会拖垮那几一两秒甚至0.0几秒的速度。在实际应用中，真的没有必要把CSS代码撰写在HTML文档中：
<style?type=”text/css” >#container{ .. }#sidebar{ .. }</style>
或
<li?style=”font-family:Arial, helvetica, sans-serif; color:#666; ” >
而是使用<link>导入外部样式表：
<link rel=”stylesheet” type=”text/css” href=”css/styles.css”/>
12.避免使用CSS运算式（Expression）
这个来说比者较少用到这块，提拱我们参考。CSS运算式是动态设置CSS属性的强大（但危险）方法。
Internet Explorer从第5个版本开始支持CSS运算式。
下面的例子中，使用CSS运算式可以实现隔一个小时切换一次背景颜色：
background-color: expression( (new Date()).getHours()%2 ? “#B8D4FF” :”#F08A00″ );
如上所示，expression中使用了JavaScript运算式。
CSS属性根据JavaScript运算式的计算结果来设置。
运算式的问题就在於它的计算频率要比我们想像的多。
不仅仅是在页面显示和缩放时，就是在页面滚动、乃至移动滑鼠时都会要重新计算一次。
给CSS运算式增加一个计数器可以跟踪运算式的计算频率。
在页面中随便移动滑鼠都可以轻松达到10000次以上的计算量。
如果必须使用CSS运算式，一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。
所以，在非不容许已，请规避利用CSS运算式。
13.代码压缩
当你决定把网站专案部署到网路上，那你就要考虑对CSS进行压缩，出去注释和空格，以使得网页载入得更快。压缩您的代码，可以采用一些Telegram中文版，如YUI?Compressor利用它可精简CSS代码，减少档大小，以获得更快的载入效率。
小结语：
笔者觉得这也是篇算得上蛮淬硬层在於写前端部位语言的一系列小知识，不来是用在一切语言上面都可以采用科学规范整洁的策略成能到达那片蓝海，很受用，经过笔者冷静分析翻整後来这边分享图片此篇本文。
稿件：
图片：参考来源
如侵犯任何着作权,告知後将马上移除