找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 3344|回复: 3

[教程] 建议大家用的css命名规则

[复制链接]
发表于 2013-3-29 13:17:58 | 显示全部楼层 |阅读模式 来自 中国–北京–北京
相信大家对css样式命名都多少感到困难,特别是想起一个有意义的名,更难。本文作者整理了样式的命名规则,希望能更实用些。



每个人的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



发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

发表于 2013-3-29 15:12:12 | 显示全部楼层 来自 中国–广东–深圳
关键是好多都不懂或一知半解的,怎么能用好啊

点评

这就一标准罢了....  详情 回复 发表于 2013-3-29 21:30

评分

参与人数 1金币 +5 收起 理由
抢楼评分专号 + 5 很幸运,你获得了抢楼奖励!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

 楼主| 发表于 2013-3-29 15:14:21 | 显示全部楼层 来自 中国–北京–北京
悦鹜 发表于 2013-3-29 15:12
关键是好多都不懂或一知半解的,怎么能用好啊

这些是大多数公用的标签的命名,只不过让 你看起来更专业些,对于程序开发来说,如果要找某个标签也方便些,如果你事先和程序员协商好,那命名只要你们的开发团队看清楚就好,没有过分的要求

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

发表于 2013-3-29 21:30:29 | 显示全部楼层 来自 中国–广东–湛江
悦鹜 发表于 2013-3-29 15:12
关键是好多都不懂或一知半解的,怎么能用好啊

这就一标准罢了....

评分

参与人数 1金币 +1 收起 理由
抢楼评分专号 + 1 很幸运,你获得了抢楼奖励!

查看全部评分

发帖求助前要善用【论坛搜索】功能,那里可能会有你要找的答案;

如何回报帮助你解决问题的坛友,好办法就是点击帖子下方的评分按钮给对方加【金币】不会扣除自己的积分,做一个热心并受欢迎的人!

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号

关闭

站长推荐上一条 /1 下一条

QQ|侵权投诉|广告报价|手机版|小黑屋|西部数码代理|飘仙建站论坛 ( 豫ICP备2022021143号-1 )

GMT+8, 2024-11-2 20:28 , Processed in 0.049528 second(s), 9 queries , Redis On.

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表