对于网站建设者而言，如果没有经验积累，那么编写准确、高效的HTML和CSS语句是一件耗时的事情。虽然花时间编写高质量的网站制作代码是高级程序员的专利，但同时也要不断提高网站制作的效率。那么，如何才能有效的提高网站代码编写的效率呢？ 下面是提高网站建设代码编写效率的4大方法：

一、使用标准、一致的命名规则

程序员需要在网站编码过程中注意参数的命名规则，尽量使用富有意义和符合逻辑的参数命名，来保证网站作品代码的易读性和可编辑性。

以下是一些非常常用的类、ID和文件命名:

架构性 IDs: #header, #footer, #sidebar, #content, #wrapper, #container
主要的stylesheet: style.css, styles.css, global.css
主要的JavaScript库: javascript.js, scripts.js
JavaScript目录: js, javascript or scripts
图片目录: images, img
CSS目录: css, stylesheets, styles

好的命名规则能够帮助程序员通过更快的定位和编辑代码来提高效率，同时，对于需要协同合作的大型项目，严格而标准的统一命名能够让大家都默契合作。

二、使用代码模板和框架

与网站设计需要原创的网页设计和与众不同的作品呈现不同，后台代码对于用户是不可见的，因此若能有效的利用代码模板和框架的重用性，将大大减少网站建设的重复性工作。比如960 grid system 和Blueprint，这两款软件能够在短时间内帮助程序员将页面布局实现。不过，由于框架代码使用需要一定的学习时间，而且因为不必要的style和markup增加网页大小。

三、理解并利用好CSS继承

通过CSS，特别是对于fonts，padding和margins的继承规则，而不是采用给每一个元素赋值的方法，能够有效的减少网站制作代码的工作量。

四、利用CSS简写属性

通过CSS简写，不仅能够有效减少代码编写的时间，同时也能够让文件大小‘瘦身’。另外，更精简的代码能够让程序员更清晰的阅读和维护。
以下分别是代码是否使用CSS简写规则的例子：
Margin 和 Padding值

margin-top: 0; margin-right: 20px; margin-bottom: 10px; margin-left: 15px; padding-top: 0px; padding-right: 20px; padding-bottom: 0px; padding-left: 20px;

快速引导:
margin: 0 20px 10px 15px; padding: 15px 20px 0;

字体属性

font-style: normal; line-height: 11px; font-size: 18px; font-family: Arial, Helvetica, sans-serif;

快速引导:

font: [font-style | font-size/line-height | font-family];

背景属性

background-color: #ffffff; background-image: url('../images/background.jpg'); background-repeat: repeat-x; background-position: top center;


快速引导:

background: [background-color | background-image:url() | background-repeat |background-position];


重庆网络公司
立即购买