CSS 命名规范

什么是BEM

BEM是一种前端 CSS 命名方法论
BEM 是块（block）、元素（element）、修饰符（modifier）的简写

为什么需要BEM

假如编写项目的 CSS 代码只有你一个人，或者项目的 CSS 代码量很小，你可以用你喜欢，习惯的方式去组织你的 CSS 代码。但是项目更大，更复杂，有多人编写项目的 CSS 代码，代码量大的时候，就需要一种统一形式去组织 CSS 代码，这时候 BEM 就派上用场了

BEM 命名规范

- 中划线 ：仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号

__ 双下划线：双下划线用来连接块和块的子元素

_ 单下划线：单下划线用来描述一个块或者块的子元素的一种状态

在 CSS 预处理器中使用 BEM 格式

<div class="article">
    <div class="article__body">
        <button class="article__button--primary"></button>
        <button class="article__button--success"></button>
    </div>
</div>

.article {
    max-width: 1200px;
    &__body {
        padding: 20px;
    }
    &__button {
        padding: 5px 8px;
        &--primary {background: blue;}
        &--success {background: green;}
    }
}

BEM 缺点

1. 命名方式长而难看，书写不雅
2. 什么时候使用或不使用它

常用CSS class名

包裹类：

 container, wrapper, outer, inner, box, header,
 footer,main, content, aside, page, section, block

文本类：

title, desc //描述, content, date, author, category //栏目，label，tag

状态类：

primary, secondary, success, danger, warning, info, 
error, Link, light, dark, disabled, active, checked, loading

尺寸类：

 large, middle, small, bigger, smaller

组件类：

card, list, picture, carousel, swiper, menu, navs, badge, hint, modal, dialog

位置类：

first, last, current, prev, next, forward, back

布局常用名称

1. 外套：wrap/wrapper
2. 站点：site
3. 导航：nav
4. 主题：main
5. 布局：layout
6. 侧栏：sidebar
7. 容器：container
8. 内容块：content/container
9. 栏：column

模块常用名称

1. 标志：logo
2. 登录：login
3. 注册：regsiter
4. 搜索：search
5. 列表：list
6. 购物车：shop
7. 工具条：tool/toolbar
8. 标签页：tab
9. 资源：source
10. 合作伙伴：partner
11. 页眉：header
12. 页脚：footer
13. 服务：service
14. 新闻：news
15. 下载：download
16. 版权：copyright
17. 友情链接：friendlink
18. 投票：vote
19. 标签：tab

常用类名

1. 标题：title
2. 标签：label
3. 注释：note
4. 摘要：summary
5. 提示信息：msg
6. 状态：status
7. 小技巧：tips
8. 滚动：scroll
9. 图标：icon
10. 当前：current
11. 特别：spec
12. 提交：submit
13. 文本框：textbox
14. 下拉菜单：drop
15. 按钮：btn
16. 表单：form
17. 统计：count
18. 导航：crumb
19. 导航提示：breadcrumb
20. 箭头：arr/arrow
21. 转角/圆角：cor/corner

导航栏常用名称

1. 导航：nav
2. 子导航：sub_nav
3. 主/全局导航：main_nav/global_nav
4. 顶导航：top_nav
5. 边导航：sidebar
6. 边导航图标：sidebar_icon
7. 左导航：left_sidebar
8. 右导航：right_sidebar
9. 菜单：menu
10. 子菜单：submenu
11. 下拉菜单：dropmenu
12. 菜单容器：menu_container

文件名

1. 主要文件：master.css
2. 基本公共文件：base.css / global.css
3. 布局/版面文件：layout.css
4. 主题文件：themes.css
5. 表单文件：form.css
6. 文字样式文件：font.css
7. 模块文件：module.css
8. 补丁文件：mend.css
9. 打印样式文件：print.css
10. 专栏文件：columns.css