一、命名规范
1、基本要求:
1)文件编码统一使用 UTF-8 编码;
2)命名时以符合语义为主要参考指标,CSS属性书写规范,采用统一风格及命名方法;
3)结构清晰,层级关系明朗,以不超过三级为标准;
4)同一表现形式的样式要求可重复利用,模块组件类的样式要求可整体外部移植;
5)编写 CSS 的时候,应当避免使用CSS Hack,能不用则不用。
6)所有页面默认都针对Firefox 等最接近标准的浏览器进行设计,然后使用 IE 特有条件注释功能进行针对性修正。
7)请使用英文进行命名,尽量避免使用拼音。命名要求具有可读性,尽量避免使用缩写。命名虽然允许数字,但应尽量避免使用数字命名。
2、命名方法 要求采用统一的命名方法。常用命名方法有:
1)连写式命名法,如:helloworld
2)中线命名法,如:hello-world(目前采用此方法的较多,建议采用)
3)下划线命名法,如:hello_world
4)骆驼命名法,如:helloWorld
5)帕斯卡命名法,如:HelloWorld
6)其他方法。
3、样式文件命名规范 如:
全局的:global.css;
主要的:master.css;
布局、版面:layout.css;
专栏:columns.css;
文字:font.css;
打印样式:print.css;
主题:themes.css;
补丁:pacth.css;
格式化浏览器:base.css等。
4、ID及Class命名常用名称
页头:header
登录条:login-bar
标志:logo
侧栏:side-bar
广告:banner
导航:nav
子导航:sub-nav
菜单:menu
子菜单:sub-menu
搜索:search
滚动:scroll
页面主体:main
内容:content
标签页:tab
文章列表:list
提示信息:msg
小技巧:tips
栏目标题:title
加入:joinus
指南:guild
服务:service
热点:hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
合作伙伴:partner
友情链接:friendlink
版权:copyright
外套:wrap
页脚:footer
标题:title
顶导航:top-nav(mini-nav)
一、命名规则说明: - TOP
1)、所有的命名最好都小写
2)、属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
3)、每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
4)、空元素要有结束的tag或于开始的tag后加上"/"
5)、表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
6)、<h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
7)、给每一个表格和表单加上一个唯一的、结构标记id
8)、给图片加上alt标签
9)、尽量使用英文命名原则
10)、尽量不缩写,除非一看就明白的单词
DIVCSS5给大家介绍常见CSS命名和DIV CSS命名方法。
二、相对网页外层重要部分CSS样式命名: - TOP
外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容(中部)
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部
三、DIV+CSS命名参考表: - TOP
以下为CSS样式命名与CSS文件命名参考表,DIV CSS命名集合:
CSS样式命名
说明
网页公共命名
wrapper
页面外围控制整体布局宽度
container或#content
容器,用于最外层
layout
布局
head, #header
页头部分
foot, #footer
页脚部分
nav
主导航
subnav
二级导航
menu
菜单
submenu
子菜单
sideBar
侧栏
sidebar_a, #sidebar_b
左边栏或右边栏
main
页面主体
tag
标签
msg #message
提示信息
tips
小技巧
vote
投票
friendlink
友情连接
title
标题
summary
摘要
loginbar
登录条
searchInput
搜索输入框
hot
热门热点
search
搜索
search_output
搜索输出和搜索结果相似
searchBar
搜索条
search_results
搜索结果
copyright
版权信息
branding
商标
logo
网站LOGO标志
siteinfo
网站信息
siteinfoLegal
法律声明
siteinfoCredits
信誉
joinus
加入我们
partner
合作伙伴
service
服务
regsiter
注册
arr/arrow
箭头
guild
指南
sitemap
网站地图
list
列表
homepage
首页
subpage
二级页面子页面
tool, #toolbar
工具条
drop
下拉
dorpmenu
下拉菜单
status
状态
scroll
滚动
.tab
标签页
.left .right .center
居左、中、右
.news
新闻
.download
下载
.banner
广告条(顶部广告条)
电子贸易相关
.products
产品
.products_prices
产品价格
.products_description
产品描述
.products_review
产品评论
.editor_review
编辑评论
.news_release
最新产品
.publisher
生产商
.screenshot
缩略图
.faqs
常见问题
.keyword
关键词
.blog
博客
.forum
论坛
CSS文件命名
说明
master.css,style.css
主要的
module.css
模块
base.css
基本共用
layout.css
布局,版面
themes.css
主题
columns.css
专栏
font.css
文字、字体
forms.css
表单
mend.css
补丁
print.css
打印
CSS命名其它说明:
DIV+CSS命名小结:无论是使用“.”(小写句号)选择符号开头命名,还是使用“#”(井号)选择符号开头命名都无所谓,但我们最好遵循,主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名,同时考虑命名的CSS选择器在HTML中重复使用调用。
通常我们最常用主要命名有:wrap(外套、最外层)、header(页眉、头部)、nav(导航条)、menu(菜单)、title(栏目标题、一般配合h1\h2\h3\h4标签使用)
、content (内容区)、footer(页脚、底部)、logo(标志、可以配合h1标签使用)、banner(广告条,一般在顶部)、copyRight(版权)。其它可根据自己需要选择性使用。
DIVCSS5建议:主要的、重要的、最外层的盒子用“#”(井号)选择符号开头命名,其它都用“.”(小写句号)选择符号开头命名。
2.CSS样式文件命名如下
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
四、英文命名技巧: - TOP
如果遇到不常用的,可以借助翻译工具进行翻译取其英文命名。
推荐使用谷歌在线翻译工具:http://translate.google.cn/
谷歌翻译工具介绍:http://www.divcss5.com/css-tool/t346.shtml
五 DIV命名
站点:site
首页:homepage
导航:nav
布局:layout
搜索:search
网页头部:head/header
二级页面/子页面:subpage subContent
登录条:loginbar toolbar
侧栏:side/sidebar
广告:banner
子导航:subnav
当前位置导航面包屑导航:crumb
菜单:menu
子菜单:submenu
滚动:scroll
下拉:drop
表单:form
箭头:arr/arrow
下拉菜单:dropmenu
主题/外观:theme
页面主体:main
内容:content
标签页:tab
列表:list
工具条:tool/toolbar
转角/圆角:cor/corner
提示信息:msg
小技巧:tips
标题:title
特别的:speciscal
资源:source
加入:join-department
指南:guild
服务:service
热点:hot news_hot
新闻:news
下载:download
注册:regsiter
状态:status
按钮:btn
投票:vote
关于我们:aboutus
网站地图:sitemap
合作伙伴:partner
友情链接:friendlink
网页底部:foot/footer
版权:copyright
提交:submit
搜索框:searchbox
文本框:textbox
统计:count
以上结构就可以组合使用,例如:左列标题lefttitle;底部导航footernav
规范不是说要所有人照一个样子来命名css,我们可以根据自己的需要定制命名规则,只要记住命名的规则,就可以根据网站本身的特点来创造具有自己风格的命名方式。
一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class,我们可以使用f即foot的头字母为前缀进行命名,如:
f-blue:表示蓝色字体样式
f-blod:表示粗体字体样式
对于网页中如新闻频道的一些新闻的现实样式,可以用n作为前缀进行样式设计,如:
n-title:新闻标题
n-list:新闻列表
二、我们还可以将代表各个部分的名字组合起来使用,如 ,对于上面的例子,我们可以这样命名:
fontBlue: 表示蓝色字体样式
newsTitle:表示新闻列表
这样的命名方式同样清晰明了,为大多网页设计师所接受,只不过要特别注意大小写的区分,css中是区别大小写的.开始时容易出错,多加注意便可.
按照这样的一些命名方式,我们可以非常明确的知道css中的每一个class的用途,便于使用和设计、维护。
想一想,你要想出很多名字来命名css也很麻烦的,是吧?
————————-另外一个规范——————-
1.CSS ID 的命名
外 套: wrap/container
主导航: main_nav
子导航: subnav
页 脚: footet
整个页面: content
页 眉: header
页 脚: footer
商 标: label
标 题: title
主导航: mainbav(globalnav)
顶导航: topnav
边导航: sidebar
左导航: leftsidebar
右导航: rightsidebar
旗 志: logo
标 语: banner
菜单内容1: menu1 content
菜单容量: menu container
子菜单: submenu
边导航图标:sidebarIcon
注释: note
面包屑: breadcrumb(即页面所处位置导航提示)
容器: container
内容: content
搜索: search
登陆: Login
功能区: shop(如购物车,收银台)
当前的 current
2.另外在编辑样式表时可用的注释可这样写:
<– Footer –>
内容区
<– End Footer –>
3.样式文件命名
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css