CSS代码重构与优化

命名

1)页面结构

容器: container

页头：header

内容：content/container

页面主体：main

页尾：footer

导航：nav

侧栏：sidebar

栏目：column

页面外围控制整体佈局宽度：wrapper

左右中：left right center

(2)导航

导航：nav

主导航：mainnav

子导航：subnav

顶导航：topnav

边导航：sidebar

左导航：leftsidebar

右导航：rightsidebar

菜单：menu

子菜单：submenu

标题: title

摘要: summary

(3)功能

标志：logo

广告：banner

登陆：login

登录条：loginbar

注册：register

搜索：search

功能区：shop

标题：title

加入：joinus

状态：status

按钮：btn

滚动：scroll

标籤页：tab

文章列表：list

提示信息：msg

当前的: current

小技巧：tips

图标: icon

注释：note

指南：guild

服务：service

热点：hot

新闻：news

下载：download

投票：vote

合作伙伴：partner

友情链接：link

版权：copyright

四、注意事项::

1.一律小写;

2.尽量用英文;

3.不加中槓和下划线;

4.尽量不缩写，除非一看就明白的单词。

书写的顺序

.header{

位置属性{position top z-index display float}

盒子模型{width height padding margin}

文字{font line-height}

背景{background border}

其他{animation transition}

css代码重构

1、将CSS样式单独写在单独的CSS文件中，在head标签中进行调用 

a、内容样式分离，利于维护 

b、减少html页面体积，加快加载速度 

c、css文件可以被缓存、重用，维护成本降低

2、不使用@import，这种形式会影响css文件的加载速度

3、避免使用复杂的选择器，层级越少越好 

选择器最好不要嵌套三层以上，尽量不用标签选择器在最末尾   例如：div h1 a{ }/*no*/，  .header .logo .link{}/*yes*/

4、利用css的继承性 

例如文字有关的css属性都是可继承的属性，字体的大小、样式等。