CSS代码格式化

1. 背景

为什么单独拿出一章来讲代码格式化的问题，是因为我发现初学者，不理解为什么要进行代码格式化，以及如何进行代码格式化。

本篇就来说一下这方面的问题。

2. 为什么要进行代码格式化

先来看一段代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><style></style></head><body><div>hello</div></body></html>

这样的代码，虽然也没错，但是看起来非常费劲，让人难以理解。

我们对比下格式化后的代码：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><style></style></head><body><div>hello</div></body></html>

是不是一目了然，干净清爽。这就是代码格式化的意义，让代码更加易读易懂易修改。代码格式化，就好比收拾屋子，只有把屋子收拾干净整齐了，你住起来才舒服。代码只有格式化了，你用起来才方便。

另外，在编程界，代码格式化是最基本的素养，如果你出去面试，代码格式化这块搞不好，面试官上来就会觉得你很不专业。

所以作为初学者，务必从一开始，就要注意代码格式化的问题。

3. 如何进行代码格式化

代码格式化是靠缩进来实现的，一般来说，子标签相对于父标签，要多缩进一个tab键的距离。

例如：

<body><div>hello</div></body>

div是body的子标签，所以div比body多缩进了4个空格（此处也是一个tab键）的距离。

hello是div的内容（相当于孩子），所以hello比div多缩进了4个空格。

所以对一个HTML页面来说，最规范的缩进，应该是这样子的：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><style></style></head><body><div>hello</div></body></html>

但是由于head、body大家太熟悉了，也是非常底层的元素（离html很近，是html的亲生孩子），所以我们也可以把head、body放到跟html同级的位置：

<!DOCTYPEhtml><html><head><metacharset="utf-8"><style></style></head><body><div>hello</div></body></html>

这两种写法，都OK。

4. 如何快捷的进行格式化

在VSCode中，可以按Alt+Shift+F键，代码就会自动格式化。

其他的开发工具或者代码编辑器，也都有类似的快捷键，大家百度一下即可。

5. 小结

代码格式化，很重要，要养成习惯。