命名技巧
- 语义化
- 语义化的标签优先
- 语义功能命名，语义内容命名
- 命名范例
- 所有命名都用英文小写
- 命名用引号包裹
- 命名体现功能，尽量不涉及表现样式
.wrap/.wrapper 用于外侧包裹
.container或.ct 用于容器
.header 用于头部
.footer 用于页脚
.aside/.sidebar 用于侧边栏
.navigation 用于导航栏
.pagination 用于分页
.breadcrumbs 用于面包屑、导航列表
.dropdown 用于下拉列表
.thumbnail 用于头像，小图标
.media 用于媒体资源
.panel 用于面板
.tooltip 鼠标放上去的提示
.popup 鼠标按下去后弹出的提示
.button/.btn 按钮
.ad 广告
.subnav 二级导航
.menu 菜单
.tag 标签
.message/.notice 提示消息
.summary 摘要
.logo
.search 搜索框
.login 登录
.register 注册
.username 用户名
.password 密码
.banner 广告条
.copyright 版权
.modal/.dialog 弹窗
书写规范
- tab用2个空格表示
- css的{前及属性的：后加空格
- 每条声明后都加上分号
- 不同选择器及属性分行写
- 颜色用小写、缩写
- 小数不用写前缀，如“0.5”写成“.5”，0不用加单位
- 尽量缩写，如margin：0 10px 0 10px，写成margin：0 10px
- 声明顺序：
- positioning：如position
- Box model：如display，margin，padding等
- Typographic：如字体
- Visual：如颜色样式等
