css代码标准化规范

>>返回顶部

WEB前端代码标准化规范

web2.0标准

“web”标准时一系列标准的总称，（误区：把web标准说成div+css）；准确的说法：采用W3C推荐的WEB标准中XHTML1.1结合CSS2.0样式制作页面。

使用web2.0的好处：
a.节约运营成本（宽带流量）；
b.人成本工（修改方便）；
c.用户友好性（包括普通用户；搜索引擎；手机、PDA、媒体机等设备）

CSS的编写原则

Css语言算不上程序语言，但是程序语言的命名规则为css所用

1. 样式名称首字母统一为小写，不能为数字、下划线及特殊符号；
2. 样式名尽量语义化或简写；
3. 减少div的嵌套层数；
4. 给图片上加上alt属性，给重要的元素和截断的元素加上title；
5. 非特殊情况下要表现和内容分离，代码中不要涉及任何表现元素（eg：style font）；
6. 样式拼写顺序:

   a) 显示与定位： display position float list-style
   b) 元素自身： width height margin padding border background
   c) 文本外观： color font line-height text-align text-decoration other
   Eg：.text{float：left；width：950px；margin：10px；background：#fff；color：#333；}

7. 继承样式定义，多级关系可省略多级父级元素名称，会少包含最外层父级元素名称，独立碎片除外；
8. 个版本浏览器hack定义顺序（FF IE7 IE 6）
   Eg：.text(border:1px solid #000; *border:1px solid #000; _border:1px solid #000;)
9. em 带有强调的意思而且是斜体文字 用到的时候em{font-style:normal;}

10. 背景(Backgrounds)
    背景的属性如下：

    background-color:#f00;
    background-image:url(background.gif);
    background-repeat:no-repeat;
    background-attachment:fixed;
    background-position:0 0;
    可以缩写为一句：background:#f00 url(background.gif) no-repeat fixed 0 0;

11. 常用的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
边导航	sidebar	左导航	leftsidebar	右导航	rightsidebar	摘要	summary
登陆	login	登录条	loginbar	注册	regsiter	功能区	shop
加入	joinus	状态	status	按钮	btn	当前的	current
图标	icon	注释	note	服务	service	新闻	news
热点	hot	下载	download