标题:
div -命名
[打印本页]
作者:
飞翔的蜗牛
时间:
2011-12-26 15:07
标题:
div -命名
大家都知道规范的
css
命名可以增强样式规则的可读性,便于后来你或别人对页面的修改。起初我写
css
规则的时候
,
用汉语的缩写来命名,现在看来是很不专业的,也给我的后期维护浪费精力。
根据自己的而写法习惯和网上的一些写法,我总结了一套适用自己的
id
命名写法
.
拿出来晒一晒。
CSS
类和
ID
的常用命名:
网站头部
: head/header(
头部
) top
(顶部)导航:
nanv
导航具体区分:
topnav(
顶部导航
)
、
mainnav(
主导航
)
、
mininav(
迷你导航
)
、
textnav(
导航文本
)
、
subnav(
子导航
/
二级导航
)
旗帜、广告和商标:
logo
(旗帜)、
brand(
商标
)
、
banner(
标语
)
搜索:
sreach(
搜索
)
、
sreachbox(
搜索框
)
、
sreachbtn(
搜索按钮
)
、
sreachinput
(搜索输入框)
注册和登录:
login(
登录
)
、
regsiter(
注册
)
、
userbox(
用户名
/
通行证的文本框
)
、
password(
密码
)
布局、分栏和框:
layout(
布局
)
、
bigdiv(
大
div)
、
leftdiv(
左分栏
)
、
rightdiv(
右分栏
)
、
leftfloat(
左浮动
)
、
rightfloat(
右浮动
)
、
mainbox()
、
subpage(
子页面
/
二级页面
)
页脚
/
底部:
foot/footer(
页脚
/
底部
)
、
copyright(
版权信息
)
、
sitemap(
网站地图
)
其他:
content(
内容
)
、
skin(
皮肤
)
、
title(
标题
)
、
from(
表单
)
、
pic(
图片
)
、
news(
新闻
)
、
shop(
购物区
)
、
list(
列表
/
清单
)
、
newslist(
新闻列表
)
、
downloadlist(
下载列表
)
、
piclist(
图片列表
)
、
dropmenv(
下拉菜单
)
、
cor/corner(
圆角
)
、
homepage(
首页
)
、
crumb(
当前位置导航
)
实际上上面的
id
命名我会经常用大小写和
_
来区分,比如主导航就是
MainNav,
如果还有必要在区分就是
MainNav_1,MainNav_2
等等。也可以使用
"
类型
+
变量名称
"
的规则来命名,比如写一个红色字体的
class,
可以
.f_red {}(f
是
font
字体的缩写
)
。总之原则是:大小写、
_
、缩写,大大增强代码的可读性。
另外我还经常使用
"in"
的写法做子
divd
的命名,写法
in+
父
div,
这样可以避免前面命名过了后面
div
不知道怎么去命名。比如
intop
、
inbox
、
infrom
、
inlogin
等等。
作者:
divcss5
时间:
2012-2-21 23:36
不错
可以去参考CSS命名
http://www.divcss5.com/jiqiao/j4.html
作者:
pigjiahua
时间:
2012-3-6 12:07
我现在命名也常常不知所措,参考了,谢谢!
作者:
北京手绘墙
时间:
2012-3-19 07:21
嗯,相当实用的代码,我收藏一下。。。嘿嘿
欢迎光临 CSS论坛 (http://www.divcss5.com/bbs/)
Powered by Discuz! 6.1.0