CSS样式表命名

发布网友 发布时间：2024-10-20 20:53

我来回答

共1个回答

热心网友 时间：2024-11-30 23:38

在CSS样式表中，id和class是两个常用的属性，它们在命名规则上有着明显的区别。

首先，我们来看一下id的命名规则。id主要用于单个元素的样式定义，且一个id只能被一个元素使用。常见的命名规则包括：

- 页头：header

- 登录条：loginBar

- 标志：logo

- 侧栏：sideBar

- 广告：banner

- 导航：nav

- 子导航：subNav

- 菜单：menu

- 子菜单：subMenu

- 搜索：search

- 滚动：scroll

- 页面主体：main

- 内容：content

- 标签页：tab

- 文章列表：list

- 提示信息：msg

- 小技巧：tips

- 栏目标题：title

- 加入：joinus

- 指南：guild

- 服务：service

- 热点：hot

- 新闻：news

- 下载：download

- 注册：register

- 状态：status

- 按钮：btn

- 投票：vote

- 合作伙伴：partner

- 友链：friendLink

- 页脚：footer

- 版权：copyRight

在实际应用中，id命名可能会使用大小写和下划线来区分，例如：主导航可命名为MainNav，如果有多个主要导航，可以使用MainNav_1,MainNav_2等命名。有时也可以使用“类型+变量名称”的规则，如将红色字体定义为.f_red {}（f代表font，即字体缩写）。

接着，我们来看一下class的命名规则。class用于多个元素的样式定义，且一个class可以被多个元素使用。常见的命名规则包括：

- 外套：wrap

- 主导航：mainNav

- 子导航：subnav

- 整个页面：content

- 页眉：header

- 页脚：footer

- 商标：label

- 标题：title

- 主导航：mainNav（globalNav）

- 边导航：sidebar

- 左导航：leftsideBar

- 右导航：rightsideBar

- 旗帜：logo

- 标语：banner

- 菜单内容：menu1Content

- 菜单容量：menuContainer

- 子菜单：submenu

- 边导航图标：sidebarIcon

- 注释：note

- 面包屑：breadCrumb（即页面所处位置导航提示）

- 容器：container

- 内容：content

- 搜索：search

- 登陆：login

- 功能区：shop（如购物车，收银台）

- 当前的：current

当然，div+css样式表的id和class的命名并不局限于上述规则，可以根据具体情况进行调整。使用通俗易懂、容易理解的命名方式更为重要。如果您有更优秀的div+css样式表的id和class命名规则，欢迎在评论区留言，共同探讨。

CSS是Cascading Style Sheet 的缩写。译作「层叠样式表单」。是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。