CSS:命名规范心得分享
2024-09-04 02:14:00
一个好的命名习惯（当然这里指的并不仅仅是CSS命名）。不仅可以提高开发效率，而且有益于后期修改和维护。
假设我们当前使用的命名方式都是约定成俗的，所有人都是这样写，那么你去到一个新团队，或者别人来接手你的工作，都可以大大缩短去阅读别人代码的时间。
一个规范化的命名，不用说，只要想想就能体会到其中的好处了。
| CSS:命名规范心得分享 | ||
| 板块(Plate) | 命名(Naming) | 说明(Description) |
| 主容器 | wrapper | 页面上最大的外部容器，如无特殊需求，不推荐使用 |
| 页面头部 | header | 主体内容以上的部分，即页面头部位置，可包含logo导航等 |
| 页面底部 | footer | 主体内容以下的部分，即页面底部位置，可包含版权备案等 |
| 面包屑 | position | 页面中的面包屑导航，如当前位置 |
| 页面主体 | main | 页面中呈现最重要内容的区域 |
| 网站标志 | logo | 标志着一个网站的图片或文字 |
| 一级导航 | nav | 一级导航 |
| 二级导航 | subnav | 二级导航 |
| 一级菜单 | menu | 一级菜单 |
| 二级菜单 | submenu | 二级菜单 |
| 页面通栏 | banner | 页面上的一些大条的图片 |
| 正文主体 | content | 页面主体中呈现主要内容的区域 |
| 正文侧栏 | sidebar | 页面主体中呈现次要内容的区域 |
| 广告 | ad | |
| 标题 | tit | 页面上的标题部分，如头条标题可写为：tit-topline，连接符后面为标题部分的相关内容概述 |
| 摘要 | summary | 文章的摘要或说明 |
| 普通新闻列表 | news-list | 新闻标题列表 |
| 新闻top排行 | top-list | 有序的新闻列表 |
| 图片列表 | pic-list | 图片列表 |
| 图文混排 | pic-txt | |
| 图文混排图片区 | pic-area | |
| 图文混排文字区 | txt-area | |
| 技巧提示 | tips | 一些技巧或者提示信息 |
| 搜索 | search | 搜索区域 |
| 外补丁 | mtop/mright/mbot/mleft | 如1像素外上补丁可以写成mtop1,2像素mtop2... |
| 内补丁 | ptop/pright/pbot/pleft | 如1像素内上补丁可以写成ptop1,2像素ptop2... |
| 12px的普通文字 | f12 | 如14px可写为f14... |
| 12px的加粗文字 | fb12 | 如14px可写为fb14... |
最新文章
- MyBatis源码分析（二）语句处理器
- android控件
- 《BI那点儿事》数据流转换——字词查找转换
- sizeof既是关键字，又是运算符(操作符)，但不是函数！
- Go语言_时间篇
- 【wikioi】2495 水叮当的舞步（IDA*）
- java之redis篇(spring-data-redis整合)
- well-posed problem and ill-posed problem
- SharePoint工作流（workflow）不能自动启动
- arcgis 获得路径和环境变量信息
- Android - Broadcast机制
- 有关android源码编译的几个问题
- 内Cool超人
- iOS开发中视图控制器ViewControllers之间的数据传递
- css——样式表分类，选择器
- Beat冲刺报告---Day0
- 如何修改新建脚本模板-ScriptTemplates（Unity3D开发之十五）
- Linux安装Java
- If 与 else的性福生活。
- 第一章 JQuery概述