admin 管理员组

文章数量: 887021


2024年1月10日发(作者：begins)

采用英文字母、数字以及”-“命名，以小写字母开头，不能以数字和”-“开头

1.

2.

3.

4.

.123abc{}

.-abc{}

.ABC{}

.ABCabc{}

1.

2.

3.

4.

.icon{}

.icon01{}

.iconText{}

.moz-class{}

×

采用以下几种命名格式

1.

2.

3.

4.

5.

6.

7.

8.

9.

.wrapper{}

.sidebar{}

√

/* 一个单词，采用全部小写方式 */{}

/* 多个单词，采用驼峰写法 */{}

.topBar{}

.floatBox{}

/* 使用前缀，采用”-“连接符 */{}

.goodsShowTitle{} /* 驼峰写法 */

.gs-title{} /* 使用连接符 */

命名要考虙复用,且符合语义化,要根据功能来命名,不要以表现来命名

1.

2.

.boxLeft{} /* 侧边栏 */

.navLeft{} /* 侧导航 */

1.

2.

.sidebar{} /* 侧边栏 */

.navSide{} /* 侧导航 */

×

常用功能命名如下：

CSS样式命名

网页公共命名

.wrapper

.container或.content

.layout

.head, .header

.foot, .footer

.nav

.subnav

.menu

.submenu

.sideBar

.main

说明

√

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

容器,用于最外层

布局

页头部分

页脚部分

主导航

二级导航

菜单

子菜单

侧栏

页面主体

.sidebarLeft, .sidebarRight

左边栏或右边栏

.tag

.msg .message

.tips

.vote

.friendlink

.title

.summary

.loginBar

.searchInput

.hot

.search

.searchOutput

.searchBar

.searchResults

.copyright

.branding

.logo

.siteinfo

.siteinfoLegal

.siteinfoCredits

.joinus

.partner

.service

.regsiter

.guild

.sitemap

.list

.homepage

.subpage

.tool, .toolbar

.drop

.dorpmenu

.status

.scroll

.tab

.left .right .center

.news

.download

.toolBar

标签

提示信息

小技巧

投票

友情连接

标题

摘要

登录条

搜索输入框

热门热点

搜索

搜索输出和搜索结果相似

搜索条

搜索结果

版权信息

商标

网站LOGO标志

网站信息

法律声明

信誉

加入我们

合作伙伴

服务

注册

指南

网站地图

列表

首页

二级页面子页面

工具条

下拉

下拉菜单

状态

滚动

标签页

居左、中、右

新闻

下载

工具条

一个 id 在一个页面中,只能出现一次,不能出现多个同名 id

预防命名冲突 ( 添加名称前缀可以有效的预防命名冲突，针对某个功能模块添加前缀，比如，热门搜索模块的列表表头、内容、标题等等)

1.

.header{}/* 可能所有页面都有 */

1.

2.

.content{}/* 可能所有页面都有 */

2.

3.

.title{}/* 可能所有页面都有 */

3.

×

命名尽量简短，但要保留基本语义，要能看懂

.hotSearch-header{}

.hostSearch-content{}

.hotSearch-title{}

√


本文标签： 命名 搜索 采用 页面 前缀

版权声明：本文标题：class与id命名规则 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/free/1704876966h465383.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。