《css基础补充--规范》

class命名规范

BEM 规范

BEM规是指范块（block）、元素（element）、修饰符（modifier）,是由Yandex团队提出的一种前端命名方法论。这种巧妙的命名方法让你的CSS类对其他开发者来说更加透明而且更有意义。BEM命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

• .block 代表了更高级别的抽象或组件。
• .block__element 代表.block的后代，用于形成一个完整的.block的整体。(ie6不兼容)
• .block--modifier代表.block的不同状态或不同版本。

常用的className/id

CSS命名规范
头：header
内容：content/containe
尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
登录条：loginbar
标志：logo
广告：banner
页面主体：main
热点：hot
新闻：news
下载：download
子导航：subnav
菜单：menu
子菜单：submenu
搜索：search
友情链接：friendlink
页脚：footer
版权：copyright
滚动：scroll
内容：content
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partnerX
HTML文件中id的命名
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright

css

css书写书顺序

1. 位置属性(position, top, right, z-index,
   display, float等)
2. 大小(width, height, padding, margin)
3. 文字系列(font, line-height, letter-spacing, color, text-align等)
4. 背景(background, border等)
5. 其他(animation, transition等)

css文件名字

1. reset.css 重置样式
2. common.css 公用的样式
3. layout.css 布局样式
4. theme.css 主题样式
5. [name].css 对应每个页面的入口

参考资料

• CSS命名规范——BEM思想（非常赞的规范）

这个系列文章是我收纳、归纳、回顾前端基础知识。供自我与有需要的人，共同进步。感谢前人的分享，如有错处，请多提点