常用的CSS命名规则
web标准化设计：常用的CSS命名规则
(一)常用的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
标签页：tab
文章列表：list
提示信息：msg
小技巧：tips
栏目标题：title
加入：joinus
指南：guild
服务：service
注册：regsiter
状态：status
投票：vote
合作伙伴：partner
(二)注释的写法:
/* Footer */
内容区
/* End Footer */
(三)id的命名:
(1)页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
(3)功能
标志：logo
广告：banner
登陆：login
登录条：loginbar
注册：regsiter
搜索：search
功能区：shop
标题：title
加入：joinus
状态：status
按钮：btn
滚动：scroll
标签页：tab
文章列表：list
提示信息：msg
当前的: current
小技巧：tips
图标: icon
注释：note
指南：guild
服务：service
热点：hot
新闻：news
下载：download
投票：vote
合作伙伴：partner
友情链接：link
版权：copyright
(四)class的命名:
(1)颜色:使用颜色的名称或者16进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }
注意事项::
1.一律小写;
2.尽量用英文;
3.不加中杠和下划线;
4.尽量不缩写，除非一看就明白的单词.
主要的 master.css
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
CSS常用命名收录备用 CSS命名规则
CSS常用命名收录备用，CSS命名规则与技巧探讨
默认分类 2008-12-10 14:53 阅读25 评论0
字号： 大大 中中 小小
1、布局常用CSS命名：
名称 描述 名称 描述
warp/warpper 外套(整体布局) content 容器
main 页面主体 content/container 内容块
site 站点 layout 布局
column 栏 sidebar 侧栏
nav 导航 center 中
left 左 right 右
1.1、结构化命名小技巧：
结构化命名方法一般根据文档结构的描述来命名，如：
id = "mainmenu"
id = "sub_menu"
id = "main-content"
上面的代码中，这3种名称都是根据文档结构进行描述命名的，分别表示主菜单、次菜单和主要内容块，当我们看到这样的样式时就能清楚的知道样式所对应的元素，即使版块和元素的位置或排列顺序改变了却仍然不会影响样式与元素之间的对应关系，从而达到符合XHTML结构化的要求。
2、模块常用CSS命名：
名称 描述 名称 描述
header 页头 footer 页脚
logo 标志 banner 广告
login 登录 loginbar 登录条
regsiter 注册 search 搜索
subnav 子导航 tab 标签页/标签
menu 菜单 submenu 子菜单
scroll 滚动 hot 热点
vote 投票 list 文章列表
news 新闻 download 下载
guild 指南 service 服务
joinus 加入 partner 合作伙伴
friendlink 友情链接： copyright 版权
shop 购物车（功能区） source 资源
map 网站地图 homepage 首页
3、导航常用CSS命名：
名称 描述 名称 描述
nav
导航外套 mainbav 主导航
subnav 子导航 sidebar 边导航
topnav 顶导航 sidebaricon 边导航图标
leftsidebar 左导航 rightsidebar 右导航
menucontainer 菜单容器 dropmunu 下拉菜单
menu 菜单 submenu 子菜单
4、类常用CSS命名：
名称 描述 名称 描述
title 标题 summary 摘要
status 状态 spce 特别
label 标签 current 当前
msg 提示信息 tips 小技巧
submit 提交按钮 btn 按钮
icon 图标 note 注释
red 红色 textbox 文本框
drop 下拉 form 表单
breadcrumb 导航提示 crumb 导航
count 统计 cor/corner 转角/圆角
scroll 滚动
4.1、CLASS 命名小技巧（语义化命名）：
(1)颜色:使用颜色的名称或者16进制代码,如:
.blue { color: blue; }
.f80 { color: #f80; }
.f3f3f3 { color: #f3f3f3; }
(2)字体大小,直接使用"font+字体大小"作为名称,如：
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)对齐样式,使用对齐目标的英文名称,如：
.left { float:left; }
.bottom { float:bottom; }
(4)标题栏样式,使用"类别+功能"的方式命名,如：
.barnews { }
.barproduct { }
5、文件常用命名：
名称 描述 名称 描述
master.css 主要文件 base.css 基本共用
layout.css 布局，版面 module.css 模块
themes.css 主题 columns.css 专栏
font.css 文字 mend.css 补丁
forms.css 表单 print.css 打印
6、注释的写法：
/* Header */
相关代码信息
/* End Header */
/* Warp */
相关代码信息
/* End Warp */
/* Footer */
相关代码信息
/* End Footer */
7、CSS命名规则：
1.区分大小写：建议全部使用小写字母，单词首字母例外；
2.命名合法：一般要求以字母开头，后面可跟数字、下划线、连字符、和特殊字符，但建议尽量使用英文字母，而适当使用下划线和连接线；
3.尽量不要缩写，除非是约定俗成的缩写单词，要保证看得明白，否则尽量别使用；
4.CSS命名要词必达意，名称要反映用途和相关信息，同时也要简短，不要符加任何冗余信息。
-
用微信 “扫一扫”
将文章分享到朋友圈。
关注公众号:xue-jiqiao
本文版权归原作者所有，转载请注明原文来源出处，学技巧网站制作感谢您的支持！
发表评论：
最新建站教程
猜你也喜欢看这些
