css命名规则

外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如：

- util-01 reset /css/core/reset.css

- util-02 通用模块容器 /css/core/mod.css

- ui-01. 喜欢按钮 /css/core/fav_btn.css

- ui-02. 视频/相册列表项 /css/core/media_item.css

- ui-03. 评星 /css/core/rating.css

- ui-04. 通用按钮 /css/core/common_button.css

- ui-05. 分页 /css/core/pagination.css

- ui-06. 推荐按钮 /css/core/rec_btn.css

- ui-07. 老版对话框 /css/core/old_dialog.css

- ui-08. 老版Tab /css/core/old_tab.css

- ui-09. 老版成员列表 /css/core/old_userlist.css

- ui-10. 老版信息区 /css/core/notify.css

- ui-11. 社区用户导航 /css/core/profile_nav.css

- ui-12. 当前大社区导航 /css/core/site_nav.css

- ui-13. 加载中 /css/lib/loading.css

文件顶部注释（推荐使用）

- /*

- * @description: 中文说明

- * @author: name

- * @update: name (2013-04-13 18:32)

- */

模块注释

- /* module: module1 by 张三 */

- …

- /* module: module2 by 张三 */

特殊注释

/* TODO: xxxx by name 2013-04-13 18:32 *//* BUGFIX: xxxx by name

2012-04-13 18:32 */用于标注修改、待办等信息

命名规范

使用有意义的或通用的ID和class命名：ID和class的命名应反映该元素的功能或使用通用名称，而不要用抽象的晦涩的命名。反映元素的使用目的是首

选；使用通用名称代表该元素不表特定意义，与其同级元素无异，通常是用于辅助命名；使用功能性或通用的名称可以更适用于文档或模版变化的情况。

- /* 不推荐: 无意义 */ #yee-1901 {}

- /* 不推荐: 与样式相关 */ .button-green {}.clear {}

- /* 推荐: 特殊性 */ #gallery {}#login {}.video {}

- /* 推荐: 通用性 */ .aux {}.alt {}

常用命名（多记多查英文单词）：page、wrap、layout、header(head)、footer(foot、ft)、

content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、

title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等

ID和class命名越简短越好，只要足够表达涵义。这样既有助于理解，也能提高代码效率。

- /* 不推荐 */ #navigation {}.atr {}

- /* 推荐 */ #nav {}.author {}

类型选择器避免同时使用标签、ID和class作为定位一个元素选择器；从性能上考虑也应尽量减少选择器的层级。

- /* 不推荐 */ul#example {}div.error {}

- /* 推荐 */#example {}.error {}

命名时需要注意的点：

- 规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _

- 命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合

- 命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS命名规则

- 不允许通过1、2、3等序号进行命名

- 避免class与id重名

- id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id

- class用于标识某一个类型的对象，命名必须言简意赅。

- 尽可能提高代码模块的复用，样式尽量用组合的方式

1、常用id的命名：

(1)页面结构

- 容器: container

- 页头：header

- 内容：content/container

- 页面主体：main

- 页尾：footer

- 导航：nav

- 侧栏：sidebar

- 栏目：column

- 页面外围控制整体布局宽度：wrapper

- 左右中：left right center

(2)导航

- 导航：nav

- 主导航：mainbav

- 子导航：subnav

- 顶导航：topnav

- 边导航：sidebar

- 左导航：leftsidebar

- 右导航：rightsidebar

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！
！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！**

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！