命名
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属性都是可继承的属性，字体的大小、样式等。
网友评论