如何写出优雅的css代码？

　　对于同样的项目或者是一个网页，尽管最终每个前端开发工程师都可以实现相同的效果，但是他们所写的代码一定是不同的。有的优雅，看起来井井有条，清晰易懂，这样的代码有利于团队合作和后期的维护；而有的混乱，虽然表达出了最终的效果，然而却晦涩难懂，显然团队成员在读这样的代码时就显得无从下手，更不利于后期的维护了。那么如何写出优雅的代码呢？下面我将以一个很小的项目就以下几个方面简单的表达一下自己的看法，如有不妥，望批评指正。

如何整理一个项目。
如何写出清晰易懂的HTML代码。
如何写出优雅的css代码（重点）。
如何写出规范的JavaScript代码。

第一部分：如何整理一个项目。

　　当我们接手一个表白墙的小项目时，怎么去分类整理呢？是把所有的html文件、css文件、js文件和图片等等混乱的放在一起？好吧，那就看看这样是什么效果吧？

技术分享

　　可能你会觉得这没有什么啊？文件都可以找到啊，但是你试图在sublime编辑器中打开看看是什么效果：

技术分享

　　有没有觉得很混乱呢?！此外，如果项目更大了呢？你需要的html文件、css文件、js文件、以及图片的需求量更大了呢？你还能保证可以顺利的找出每一个你想要的文件并编辑吗？显然显然是否定的。所以对于这种项目，我的建议是可以对不同文件类型进行分类，将同一类型的文件放在一个文件夹下，再将所有文件都放到一个文件夹下，如下图所示：

　　技术分享

　　这样，在sublime text编辑器里打开上述文件也会变得更加清晰明了，如下所示：

技术分享

这样，我们就可以很轻松的查找、编辑、维护我们的代码了！当然，对于不同的项目，如何架构和整理是不同的，我们应该具体问题具体分析，这里只是说明了一般的小项目可以遵循的做法。

第二部分：如何写出清晰易懂的HTML代码

　　HTML规范，我在博文《HMTL代码规范》中做了详尽的介绍，大家有兴趣可以去看看。这里我们简单回顾一下规范并以我的看法说明写HTML代码的一个整体思路。

　　1.写HTML时，最基础的整体结构是不可缺少的，包括<!DOCTYPE html> <html> <meta> <title> <head><body>等等。实际上这个结构在sublime编辑器中我们只要先打出！，再按一下tab键即可完成。

　　2.HMTL的代码结构和视觉顺序基本保持一致，即按照从上到下从左到右的视觉顺序写HMTL结构。我的建议是：可以先根据视觉稿，从大局着眼，将主要的几个部分写出来，如header部分，main部分，side部分，footer部分，即把整个结构先搭出来，然后再逐一地向内部填写内容，而不是先把header部分写完然后再写main部分，把main部分全部写完在写side部分．．．因为前者的思路会更加清晰。

　　３．结构层（structural layer）、表现层（behavior layer）、行为层（presentation layer）三者分开，避免内联，即使用script将js文件引入（注意：浏览器渲染页面是自上而下进行的，js文件有时多在</body>前引入，有时也会在head中引入，这一部分可以看我的博文《探究移动端开发》），使用link将css文件引入。

　　4.保持良好的树形结构，即每一个块级元素都另起一行，使用tab缩进（相对于父元素）。如果不是块级元素，如<a><img><span>等，把他们写在一行即可。

　　5. 可以在不同的部分（如header、main、footer）之间使用空行分开，而在一个模块内不要使用多余的空行，实际上这也遵循了设计中的亲密性原则。（推荐前端工程师可以看看《写给大家看的设计书》，非常不错）