命名规范

命名规范

BEM命名规范

BEM 的意思就是块（block）、元素（element）、修饰符（modifier）

.site-search {} /* 块 */
.site-search__field {} /* 元素 */
.site-search--full {} /* 修饰符 */

eg：

<nav class="nav">
  <a href="#" class="nav__item nav__item--active">当前状态</a>
  <a href="#" class="nav__item nav__item--hover">鼠标移上时的状态</a>
  <a href="#" class="nav__item nav__item--normal">正常状态</a>
</nav>
<style>
	.nav {
	  &__item {
	    &--active {
	    }
	    &--hover {
	    }
	    &--normal {
	    }
	  }
	}
</style>

文本命名

1. index.css: 一般用于首页建立样式
2. head.css: 头部样式，当多个页面头部设计风格相同时使用。
3. base.css: 共用样式。
4. style.css: 独立页面所使用的样式文件。
5. global.css: 页面样式基础，全局公用样式，页面中必须包含。
6. layout.css: 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中
7. module.css: 模块，用于产品类页，也可与其它样式配合使用。
8. master.css: 主要的样式表
9. columns.css: 专栏样式
10. themes.css: 主体样式
11. forms.css: 表单样式
12. mend.css: 补丁，基于以上样式进行的私有化修补。

页面结构

1. page: 代表整个页面，用于最外层。
2. wrap: 外套，将所有元素包在一起的一个外围包，用于最外层
3. wrapper: 页面外围控制整体布局宽度，用于最外层
4. container: 一个整体容器，用于最外层
5. head, header: 页头区域，用于头部
6. nav: 导航条
7. content: 内容，网站中最重要的内容区域，用于网页中部主体
8. main: 网站中的主要区域（表示最重要的一块位置），用于中部主体内容
9. column: 栏目
10. sidebar: 侧栏
11. foot, footer: 页尾、页脚。网站一些附加信息放置区域，（或命名为 copyright）用于底部

导航命名

1. nav, navbar, navigation, nav-wrapper: 导航条或导航包，代表横向导航
2. topnav: 顶部导航
3. mainbav: 主导航
4. subnav: 子导航
5. sidebar: 边导航
6. leftsidebar 或 sidebar_a: 左导航
7. rightsidebar 或 sidebar_b: 右导航
8. title: 标题
9. summary: 摘要/li>
10. menu: 菜单，区域包含一般的链接和菜单
11. submenu: 子菜单
12. drop: 下拉
13. dorpmenu: 下拉菜单
14. links: 链接菜单

功能命名

1. logo: 标记网站logo标志
2. banner: 标语、广告条、顶部广告条
3. login: 登陆，（例如登录表单：form-login）
4. loginbar: 登录条
5. register: 注册
6. tool, toolbar: 工具条
7. search: 搜索
8. searchbar: 搜索条
9. searchlnput: 搜索输入框
10. shop: 功能区，表示现在的
11. icon: 小图标
12. label: 商标
13. homepage: 首页
14. subpage: 二级页面子页面
15. hot: 热门热点
16. list: 文章列表，（例如：新闻列表：list-news）
17. scroll: 滚动
18. tab: 标签
19. sitemap: 网站地图
20. msg 或 message: 提示信息
21. current: 当前的
22. joinus: 加入
23. status: 状态
24. btn: 按钮，（例如：搜索按钮可写成：btn-search）
25. tips: 小技巧
26. note: 注释
27. guild: 指南
28. arr, arrow: 标记箭头
29. service: 服务
30. breadcrumb: (即页面所处位置导航提示）
31. download: 下载
32. vote: 投票
33. siteinfo: 网站信息
34. partner: 合作伙伴
35. link, friendlink: 友情链接
36. copyright: 版权信息
37. siteinfoCredits: 信誉
38. siteinfoLegal: 法律信息

个人项目仓库地址

github地址
码云地址

交流群 626319356

我作为一个小白，因为个人兴趣自学前端 后端。在学习的道路上独自一人前行，没啥钱也没报啥班，所以想要有共同理想的道友让我们互帮互助，共同成长。
建群目的：
各种学习资料共享
各种学习导图共享
如何学习前端 后端 指点 少走弯路
遇到问题 互相解决 吸取经验
声明
因为自己是个菜鸡 大三非计算机专业 对应专业知识比较薄弱
所以这个群的主要目的是互相成长
如果有大佬愿意帮助我们
我在此表示感谢
欢迎各位道友加入