您所在的位置：首页 > 文章 >卓象技术

「卓象程序员」当你看轻css的时候，我已经将代码优化好了并受到了表扬
时间: 2019-10-23 09:03:59 来源: 卓象IT实训基地【原创】

无论是已经工作的全栈式工程师，还是正在努力奋斗的程序小白，一般都是从HTML+CSS简单开发起步的，最近我的新班同学正在学习css，在检查大家的代码时，我突然想起了工作时重构项目的情景。当我看见一串串密密麻麻的css样式，.最重要的是没有按照正规规范写时，我感觉有一种吃到了山竹皮的苦涩和无力..

那么下面我会介绍给大家几个步骤，保证大家写出的代码既漂亮又实用！

1. 公共内容处理

在编写代码时，特别是编写线上的项目时，是不可以在每个页面上写重复代码的。这样冗余的代码影响体验和网站运行速度。那么我们完全可以把有用同样样式的header区域和footer区域用一个独立的css样式表外联。这样就不用每个页面进行相同的代码编写了，而且后期维护也特别方便

2. 注意代码格式，规范缩进

对于新手来讲，规范的代码编写格式有利于自己对代码的把控，减少错误的产生。

不规则方式代码：

规则方式代码：

大家看，这个就是按照规范书写的HTML代码，是不是看起来清爽又整齐？这样的写法是十分重要的，不仅是在编写时，可以很快的看到自己想要的部分。在公司协同工作时，其它人看到你的代码进行添加数据接口时调用样式很方便，而且有利于日后的维护。特别是还能给大家留下很不错的印象，这样离自己的工程师梦会迈出很踏实的一步。

3. 合理运用样式表

我们在css的学习中，有三种引入方式。行内样式表(内敛样式)、内部样式表(内嵌样式)、外联样式表(引入样式)。那我们要清楚每一个样式表的优缺点，和使用频率。

1) 行内样式表

优点：书写方便、权重高。

缺点：没有实现样式和结构相分离，控制范围少。

使用频率：少。

2) 内部样式表

优点：特定的页面写特定的样式。

缺点：没有实现样式和结构彻底分离。

使用频率：中。

3) 外联样式表

优点：样式和结构相分离，方便维护与改写。