本文罗列出一些常用的 CSS 命名规则, 包含 CSS 命名规则, id 的命名规则, CSS 样式表文件命名规则等, 对 web 开发比较有作用.
CSS 命名规范:
头: header
内容: content/container
尾: footer
导航: nav
侧栏: sidebar
栏目: column
页面外围控制整体佈局宽度: wrapper
左右中: left right center
登录条: loginbar
标志: logo
广告: banner
页面主体: main
热点: hot
新闻: news
下载: download
子导航: subnav
菜单: menu
子菜单: submenu
搜索: search
友情链接: friendlink
页脚: footer
版权: copyright
滚动: scroll
内容: content
文章列表: list
提示信息: msg
小技巧: tips
栏目标题: title
加入: joinus
指南: guide
服务: service
注册: regsiter
状态: status
投票: vote
合作伙伴: partner
注释的写法:
<!-- Header -->
内容区
<!--End Header-->
Id 的命名:
1)页面结构
容器: container
页头: header
内容: content/container
页面主体: main
页尾: footer
导航: nav
侧栏: sidebar
栏目: column
页面外围控制整体佈局宽度: wrapper
左右中: left right center
(2)导航
导航: nav
主导航: mainnav
子导航: subnav
顶导航: topnav
边导航: sidebar
左导航: leftsidebar
右导航: rightsidebar
菜单: menu
子菜单: submenu
标题: title
摘要: summary
(3)功能
标志: logo
广告: banner
登陆: login
登录条: loginbar
注册: register
搜索: search
功能区: shop
标题: title
加入: joinus
状态: status
按钮: btn
滚动: scroll
标籤页: tab
文章列表: list
提示信息: msg
当前的: current
小技巧: tips
图标: icon
注释: note
指南: guild
服务: service
热点: hot
新闻: news
下载: download
投票: vote
合作伙伴: partner
友情链接: link
版权: copyright
注意事项:
一律小写;
尽量用英文;
不加中槓和下划线;
尽量不缩写, 除非一看就明白的单词.
CSS 样式表文件命名
主要的 master.CSS
模块 module.CSS
基本共用 base.CSS
布局, 版面 layout.CSS
主题 themes.CSS
专栏 columns.CSS
文字 font.CSS
表单 forms.CSS
补丁 mend.CSS
打印 print.CSS
CSS 文件命名:
全局: global.CSS
全局样式为全站公用, 为页面样式基础, 页面中必须包含.
结构: layout.CSS
页面结构类型复杂, 并且公用类型较多时使用. 多用在首页级页面和产品类页面中.
私有: style.CSS
独立页面所使用的样式文件, 页面中必须包含.
模块 module.CSS
产品类页面应用, 将可复用类模块进行剥离后, 可与其它样式配合使用.
主题 themes.CSS
实现换肤功能时应用.
补丁 mend.CSS
推荐: CSS 参考手册 https://www.html.cn/book/css/
来源: http://www.css88.com/web/css/17691.html