CSS 样式命名规则和规范

您所在的位置：网站首页 › 文件的命名规范怎么写的 › CSS 样式命名规则和规范

CSS 样式命名规则和规范

2024-07-16 07:53| 来源: 网络整理| 查看: 265

# CSS 样式命名规则和规范

CSS 命名规范

class、id 都需小写命名使用英文，禁止使用特殊字符样式名不能包含ad、guanggao、ads、gg是广告含义的关键词，避免元素被网页拓展、插件屏蔽名称间隔使用-符号涉及数据、交互等需要联调的部分，禁止通过 id 选择器定义样式，以免开发过程中 id 名变化，引起页局错乱 # 1、类名命名需要语义化

参考下面的示例：

/* 外层容器 */ .wrap { } /* 模块容器 */ .mod-box { } /* 开始 */ .btn-start { } /* ios下载 */ .btn-download-ios { } /* 安卓下载 */ .btn-download-andriod { } /* 头部导航链接1 */ .btn-head-nav1 { } /* 更多新闻 */ .btn-news-more { } /* 播放视频 */ .btn-play { } /* 按钮ico */ .btn-ico { } /* 开始抽奖 */ .btn-lottery { } /* 侧栏导航 */ .side-nav { } /* 侧栏导航-链接1 */ .side-nav-btn1 { } /* 更多 */ .btn-more { } # 2、页面主结构命名命名意义命名意义 header 页头，头 container 容器 nav 导航栏 wrapper 面外围控制整体布局宽度，用于最外层 main 页面主体 wrap 外套，将所有元素包在一起的一个外围包 content/container 内容 column 栏目 main-content 主要内容 sidebar 侧栏 footer 页脚 # 3、导航命名命名意义命名意义 nav、navbar、navigation、nav-wrapper 导航条或导航包，代表横向导航 title 标题 topnav 顶部导航 summary 摘要 mainnav 主导航 menu 菜单（区域包含一般的链接和菜单） subnav 子导航 submenu 子菜单 sidebar 边导航 drop 下拉 leftsidebar 或 sidebar-left 左导航 dorpmenu 下拉菜单 rightsidebar 或 sidebar-right 右导航 links 链接菜单 # 4、功能点命名命名意义命名意义 logo 标记网站 logo 标志 searchbar 搜索条 banner 标语、广告条、顶部广告条 searchlnput 搜索输入框 login 登陆，（例如登录表单：form-login） icon 小图标 loginbar 登录条 label 商标 regsiter 注册 homepage 首页 ool、toolbar 工具条 subpage 二级页面子页面 search 搜索 hot 热门热点 list 文章列表，（例如新闻列表：list-news） scroll 滚动 tab 标签 sitemap 网站地图 msg 或 message 提示信息 current 当前的 joinus 加入 status 状态 btn 按钮，（例如搜索按钮可写成：btn-search） tips 小技巧 note 注释 guild 指南 arr、arrow 标记箭头 service 服务 breadcrumb 页面所处位置导航提示 download 下载 vote 投票 siteinfo 网站信息 partner 合作伙伴 link、friendlink 友情链接 copyright 版权信息 siteinfoCredits 信誉 siteinfoLegal 法律信息 # 5、CSS 样式文件表命名文件命名意义 index.css 单独为首页建立样式 head.css 头部样式，多个页面头部设计风格相同时使用 base.css 基本的共用样式 style.css 独立页面所使用的样式文件 global.css 面样式基础，全局公用样式，页面中必须包含 layout.css 布局、版面样式，公用类型较多时使用，一般用在首页级页面和产品类页面中 module.css 模块，用于产品类页，也可与其它样式配合使用 master.css 主要的样式表 columns.css 专栏样式 themes.css 主体样式 forms.css 表单样式 mend.css 补丁，基于以上样式进行的私有化修补 print.css 打印 # 6、图片命名

TIP

图片名称必须小写，禁止使用特殊字符、中文使用英文或拼音缩写，禁止特殊字符名称间隔使用-符号命名需要能体现图片的大概用途禁止文件名和实际图片内容不符

常见示例：

bg.jpg // 背景图片 mod-bg.jpg // 模块背景 sprites.png // 精灵图 btn-start.png // 开始按钮 ico-play.png // 修饰性图片 # 7、图片优化

TIP

图片体积不能超过 300K JPG 图片必须压缩，一般 80%品质即可，保证文字清晰 JPG 图片必须使用渐进式图片：使用 Photoshop 的“存储为 web 所用格式”时候，勾选“连续” 透明 PNG 图片必须使用压缩工具压缩后提供。推荐压缩图片工具网址：https://tinypng.com/ (opens new window)

# 8、图片标签规范

TIP

PC 端 img 图片必须填写width、height、alt属性移动端必须填写alt属性 alt 不能为无意义字符，需要能表现出图片的含义，如图片为道具图，则应该为道具的名称 # 9、合理切图

TIP

需要变动的文字禁止切到图片中，如果不确定是否需要变动，请咨询接口人 需要程序后台动态生成的图片，如头像、奖品，必须单独切割出来 装饰性图片合并成精灵图，减少页面请求上次更新时间: 6/8/2023, 9:23:17 PM

← HTML/CSS 代码规范

大厂最新技术学习分享群

微信扫一扫进群，获取资料

【本文地址】

CSS 样式命名规则和规范

CSS 样式命名规则和规范

今日新闻

推荐新闻