如何书写一篇能看懂的html和CSS代码

　　在书写html和CSS过程中，如果只是想要实现网页的外观和基本功能，那么简单的书写代码就可以满足需求，甚至不需要使用类名或者注释等。但实际上，这么写肯定是不行的，首先对于类同结构的重复书写就是一件很浪费时间，并且很大程度上增加错误几率的方法，代码量增加了很多，错误的可能也增加了许多；其次，对于一个页面而言，代码并不是一次性的东西，所以对于页面代码的二次阅读是难以避免的，这时候，就会发现面对自己书写的代码一片茫然，就算是配合检查器检查观看，也不一定能保证在大量的选择器中正确修改代码，而且还可能由于选择器权重的问题导致代码无法顺利修改，当一个选择器就已经写满一大行，并且在使用并集选择器的情况下可能长的超乎想象，面对这样的结构，感受到的只是绝望。最后，我认为当检查一个页面，看到的是一个个标准规则的盒模型，对检查而言是一种莫大的享受，如果存在各种高度不齐，对照html结构不能看到对应的一块一块“盒子“或盒子对应功能不明时，对于我的体验也是比较糟糕的。

　　对于正常一个页面的html结构而言，不考虑js的情况下，使用类名和注释是十分必要的。使用注释的地方，第一是每个结构性的大区块上面，这点是必不可少的，能够帮助我们在众多的代码中找到对应小区块的位置，方便对代码进行修改。另外一个我觉得应该是结构较为复杂的地方，使用具有较明确含义的类名也比较困难体现思路的地方，比如一个多重层叠，针对不同操作展现更多的地方。类名的命名也是一个大问题，针对类型相同的地方采用相同的命名，后面的代码如果有多出其余样式，再给一个单独的类名进行调整，这样就会出现一个问题，也就是第一个类名的命名是否满足的后面所有区块的功能特性，而多余的类名是否能体现这一块区中单独的特点。针对这一问题，为避免html和CSS的类名让人阅读起来不明所以，所以推荐为html的书写方式一样的流程，先阅览全局，确定基本结构，再针对大的块区进行统一样式的类名命名，后面写到CSS的时候再单列出不同功能的类名。使用类名可以使用多种方式，比如连字符针对大的功能区，往后书写小的功能名，或者使用驼峰命名法，或者bem命名法，重要的就是见文知意，并且符合英文拼写习惯。

　　针对CSS代码，注释和选择器的书写更需要精确。对于页面而言，CSS的选择器与元素一一对应才能保证页面内容的正确展示，而对于一个多层嵌套并且都具有相对对立的结构样式而言，在不使用sass和less的前提下，必不可免的要写多个选择器，并且会有一大串的祖先元素来帮助找到对应的元素，这样书写完成后，对于具有同样的类名的多个元素，想要对其中一个设置不一样的属性，对其设置一个不同的类名，如果在书写是只写不同的类名，由于特指值较低可能不会实现相应功能。另外，对于多个类名的元素，类名使用的太相似也会增大错误的几率。CSS的注释，除开打的块区，对于多层嵌套结构部分的外层注释也是很有必要的，因为这样的一个结构往往意味着较多的代码，或者是一个功能区样式实现的代码，可能会影响到代码的复用，将之独立出来会使代码更加清晰。