谈DIV+CSS样式表命名的规则方法

开发 前端
刚开始写DIV+CSS样式表的时候,是记不住那些CSS样式的属性,但是在逐渐熟悉后,发现给DIV+CSS样式表命名也是一件头疼的事情,本文将介绍一些相关的规则方法供大家参考。

DIV+CSS样式表命名不能随意而为,否则以后进行维护时困难很大。如同软件开发中对类名的仔细处理一样,DIV+CSS样式表命名也需要遵循规则。

如果要是就几行或几十行代码吧!就根据英文单词就行了。可是要是多了那就不好写了,有时候就直接用汉语拼音或拼音的首字母代替。可是多了吧,自己写的都看不出是什么意思,别说再让程序员调用这些样式了。DIV+CSS样式表的id和class的区别:就一句来概括, class可以定义多个值并且可以应用到多个标签上,但id只能是一个。所以就开始查一些相关的DIV+CSS样式表id和class的常用命名规则,请大家参考一下:

首先讲一下DIV+CSS样式表的id的常用命名规则如下表所示:

页头
header
登录条
loginBar
标志
logo
侧栏
sideBar
广告
Banner
导航
nav
子导航
subNav
菜单
menu
子菜单
subMenu
搜索
search
滚动
scroll
页面主体
main
内容
content
标签页
tab
文章列表
list
提示信息
msg
小技巧
tips
栏目标题
title
加入
joinus
指南
guild
服务
service
热点
hot
新闻
news
下载
download
注册
regsiter
状态
status
按钮
btn
投票
vote
合作伙伴
partner
友情链接
friendLink
页脚
footer
版权
copyRight
 
 

实际上上面的DIV+CSS样式表的id命名也会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。

再讲一下DIV+CSS样式表的class的常用命名规则如下表所示:

 外 套
wrap
主导航
mainNav
子导航
subnav
页 脚
footer
整个页面
content
页 眉
header
商 标
label
标 题
title
主导航
mainNav
边导航
sidebar
左导航
leftsideBar
右导航
rightsideBar
旗 志
logo
标 语
banner
菜单内容
menu1Content
菜单容量
menuContainer
子菜单
submenu
边导航图标
sidebarIcon
注释
note
面包屑
breadCrumb
容器
container
内容
content
搜索
search
登陆
login
功能区
shop
当前的
current
 
 

当然像DIV+CSS样式表的id和class的命名远远不止这些,可能还会有更多的命名,你可以用一些通俗的易懂.容易理解的一些来命名,如果您有更好的DIV+CSS样式表的id和class的命名规则的话,请留言,多多指教.

本文来自百洋软件研究实验室博客园博文《怎么给div+css样式表命名的规则

【编辑推荐】

  1. CSS 3中的炫目新功能抢先预览
  2. CSS 3备受期待的8大功能
  3. CSS网页布局困扰新手的八个问题
  4. 25个下拉菜单导航脚本下载
  5. HTML 5 正式标准恐将2022年才能正式发布
责任编辑:彭凡 来源: 博客园
相关推荐

2010-09-14 11:11:09

DIV+CSS样式表

2010-08-25 09:11:57

DIVCSS

2010-08-30 10:46:13

DIV+CSS

2010-08-31 09:39:17

CSS样式表

2010-09-09 16:43:35

DIV+CSS

2010-08-06 14:52:35

FlexCSS层叠样式表

2010-08-26 11:19:31

CSS样式表

2010-09-06 10:04:31

CSS样式表

2012-08-06 09:40:36

DIV

2010-09-07 13:10:48

CSS样式表CSS

2010-09-03 14:57:33

CSS样式表CSS

2010-09-06 14:11:32

CSS

2010-08-23 14:30:14

DIV+CSS

2011-05-26 18:05:01

DIV+CSS

2010-08-26 09:16:23

CSS样式表

2010-09-03 14:39:53

CSSCSS样式表

2010-08-24 11:25:06

DIVCSS

2011-05-17 09:51:27

Div+CSS

2010-09-06 16:09:58

CSS样式CSS

2010-08-27 14:05:40

DIV+CSS
点赞
收藏

51CTO技术栈公众号