早年就存在自己在硬盘里一篇【前端开发规范文档】,当时就觉得写得不错,之后也一直在默默贴近着它来规范自己:
http://mrthink.net/demo/docs/frontend-specification-bymrthink.htm
今天又看了一遍这规范,来小注下里面的重点,希望对大家有帮助:
1)减少路径重定向
书写链接地址时, 必须避免重定向,例如:href=”http://itaolun.com/”, 即须在URL地址后面加上“/”;
访问地址中,没有带文件名后缀的(例如aspx,asp等等),服务器都会尝试解析为一个文件夹,自动加上一个路径斜线,然后再查找内部的默认页面。
http://www.cnblogs.com/chenxizhang/archive/2013/05/05/3060804.html
2)title 属性优化作用
常与 form 以及 a 元素一同使用,以提供关于输入格式和链接目标的信息。同时它也是 abbr 和 acronym 元素的必需属性。当然也可用于 p 标签,如:
<p title="Free Web tutorials">W3School.com.cn</p>
3)区分出来为 javaScript 预留钩子的 className 或 id 命名,比如:js_hide\ js_show
4)className 或 id 命名常用命名字段:
头部 header\hd
内容块 content\con\bd
text
txt
title
尾部 footer
导航 nav\menu
sub-nav\sub-menu
侧栏 side-con
栏目 item
外容器 wrapper\sprite
左右中 left\right\center
上下 top\bot
登录 login-bar
标志 logo
横栏、广告 banner
主体 main-container
热点 hot
新闻 news
下载 download
搜索 search
友情链接 friend-link
版权 copy-right
标签 tab
列表 list
post-list
评论信息 cmt
提示信息 msg\note
小备注 tips
注册 regsiter
图标 icon
表单 fm
input-text
5)AlphaImageLoader滤镜
(IE滤镜的一种,其主要作用就是对图片进行透明处理;虽然FireFox和IE7以上的IE浏览器已经支持透明的PNG图片,但是就IE5-IE6而言还是有一定的意义)
_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, src=’img/bg.png’);
实际操作中需要注意:AlphaImageLoader滤镜会导致该区域的链接和按钮无效,一般情况下的解决办法是为链接或按钮 添加:position:relative使其相对浮动 要注意的是,当加载滤镜的区域的父层有position:absolute绝对定位的时候使用position:relative也不能使链接复原。建议 使用浮动办法处理。