css写法优化：1、层级嵌套不能太深，一般不超过4层；2、避免使用元素选择器，不利于后期修改；3、避免使用群组选择器，可以提取一个公用类，定义同一样式，更加方便；4、减少文件引入的数量，内容显示要有优先顺序。
本教程操作环境：windows7系统、CSS3&&HTML5版、Dell G3电脑。
写css关于id,class等的命名，文件的结构，共同模块的提取，代码的复用性，可读性，扩展性，维护性都要考虑，不然后期可以会需要花大力气去进行维护修改。考虑写出足够科学的css，需要考虑下面几个方面。
首先分析需求，根据需要分出头部、导航、侧边栏、banner区，主要内容区，底部等。由于需要东西的复用度很高，不好归于任何一个固定模块，比如分页，弹窗等，他们需要单独分出一段专属的css和js，即组件化。有了清晰的结构后，便于维护。
然后在细化，发现一些复用度高的小的部分，比如边框，背景，图标，字体，边距，布局方式等。这些用的次数很多，造成代码冗余和维护困难。因此需要对这部分进行统一维护修改。
立即学习“前端免费学习笔记（深入）”；
同时，代码的排序也很重要，便于维护和继承或者层叠覆盖。除了这些意外，通过注释在代码段前面添加目录或者名称也有利于维护。
然后从结论来看，应该注意：
1、层级嵌套不能太深，这样会增加渲染时间。一般不超过4层最好。
2、避免使用元素选择器。
原因：
装修公司源码，采用DIV+CSS布局，首页顶部采用了超大宽屏banner焦点图切换，带伸缩功能的导航条。首页信息展示量大，有利于SEO优化，首页版块包括，导航，焦点图切换，案例，行业动态，装修经验，装修知识。源码支持伪静态，后台开启即可，服务器必须支持rewrite功能，否则无法实现伪静态功能。信息支持二级分类。后台支持信息批量修改，删除，可以支持，视频，图片，附件上传。
同一个元素可能使用很多次，在浏览器遍历的时候会遍历所有该元素，这是没必要的。
需求和代码结构是随时可能发生变化，有可能会复用到其他页面，或者在该页面增加内容，因此使用元素选择器定死某个东西，不利于后期修改。
3、避免使用群组选择器。
如：
.header ul li,.content ul li,.footer ul li{border-left:1px solid red};这种情况应该提取一个公用类，然后定义同一样式，更加方便。
4、文件引入的数量和顺序
文件请求的次数应该尽量少，内容显示有优先顺序，文件加载有先后顺序，让用户先看到更重要的。
从矛盾上考虑，对一个样式进行命名，在设计稿上样式相似的两个不同功能的模块，我们在命名的时候就不能考虑通过内容来命名，比如“news”“about”等，而是从所属类别，功能，页面上来考虑。让人比较容易的在名称和结构间建立联系。在能把css写的比较熟练后，可以使用css预处理器来提高效率。
（学习视频分享：css视频教程）
