html和css书写规范
HTML 规范
分离的标记、样式和脚本
结构、表现、行为分离
在可能情况下验证你的标记
使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能。
技术不支持的时候使用备胎,如canvas
编码格式:使用UTF-8
语义性
对于HTML5而言,例如header、footer、nav、section等跟div能实现的功能基本类似,但是语义性上有着天壤之别。
TODO待定项
尚未实现的或待定的内容一定要标识强调出来,利用TODO辨识,而非其他诸如@@来强调。
在todo项中如果有必要列明联系人,比如负责人。在TODO后追加一个冒号作为行动内容,例 如 TODO:增加HTML5模板多媒体后备:为多媒体提供备选内容
典型就是为img添加alt内容。
HTML 的模块化
<div id="module-1" class="module">
<h3>TITLE</h3>
<p class="module-item">
some text
</p>
</div> <!-- #module .module end -->`
CSS 规范
一、CSS文件
注释
/*
@name: 文件的名称
@description: 简要的描述这个css 文件功能
@require: 依赖文件,没有就不用写
@author: 作者 最好附带联系方式(邮箱)
*/
文件编码级
编码必须使用utf-8(无BOM)
二、 CSS书写顺序
不去完全按照某个书写顺序来写。但我们应该养成良好的习惯,让看代码的人更易理解。易读对于团队协作来说是非常重要的:**
1. 框架为先,细节次之。
比如写一个浮动容器的样式,我们应该先让这个容器的框架被渲染出来,让大家看到基本的 网站框架。然后再再去渲染容器里面的内容。最终呈现给用户. 通常像 color font padding 之类的,写在后面。
.selector{float:left;width:300px;height:200px;font-size:14px;color:#f36;}
2.有因才有果。
比如想使用”图片替换文字“技术,通常要使用的text-indent。如果我们使用标签的是 span:<span>这个文字将被图片替换</span>,那么正确写法:
.thepic{display:block;text-indent:-9999em;}
我们应该是先将 span 变成”块级元素“,再将文字 indent。而不是先 indent 再变成块级 的。
又如我们,如果想让一个 span 使用 margin, 那么我们应该这样写:
span{display:block;margin-bottom:10px;}
而非margin-bottom先行,因为没有 display 之前,行内元素是没有 margin 的。
- 1.位置属性(position, top, right, z-index, display, float等)
- 2.大小(width, height, padding, margin)
- 3.文字系列(font, line-height, letter-spacing, color- text-align等)
- 4.背景(background, border等)
- 5.其他(animation, transition等)
三、 CSS书写规范
模块注释
/*区域模块-1 分模块的写上注释 */
.classname, .ued{
background:#f60 url(xxx/orange.png) no-repeat 0 0;
}
.ued>ul li>a{
font-size:10px;
} /*区域模块-2 分模块的写上注释 */
.classname{
width:950px;
margin:0 auto;
}
避免内联样式
避免使用低效选择器,参考这里
不要随意使用id
id在JS是唯一的,不能多次使用,而使用class类选择器却可以重复使用,另外id的优先级优先与class,所以id应该按需使用,而不能滥用。
使用有效的CSS, 除非是bugs处理或专属语法(浏览器私有前缀)
使用短ID或类命名,但确保他们不要太过隐晦,或直白(如#blue-button)
大型项目使用前缀,如#xyz-help, .xyz-column
选择器尽可能简单,如#example,而不是ul #example
使用缩写
// 反对
border-width: 1px;
border-style: solid;
border-color: #ccc; border:1px solid #ccc // 赞 color :#99ccff; // 反对
color :#9cf; // 赞
url()中不使用引号,0后面不跟单位
margin: 0px auto; // 反对
margin :0 auto // 赞
去掉小数点 0
opacity : 0.8; // 反对
opacity : .8; // 赞
每个声明最后都要有分号(即使是最后一个)
避免浏览器hacks
浏览器前浏览器私有写法在前,标准写法在后。
-moz-box-shadow: 1px 2px 3px #ddd;
-webkit-box-shadow: 1px 2px 3px #ddd;
box-shadow: 1px 2px 3px #ddd;
注释
根据需要解释代码,这个就不多说了,团队开发这个非常重要,尽管很多时候大家不愿意遵守,但确实重要!!!
CSS样式表文件命名
- 主要的 master.css
- 模块 module.css
- 基本共用 base.css
- 布局、版面 layout.css
- 主题 themes.css
- 专栏 columns.css
- 文字 font.css
- 表单 forms.css
- 补丁 mend.css
- 打印 print.css
原文地址:http://my.oschina.net/frontendinfo/blog/184995#OSC_h3_5
html和css书写规范的更多相关文章
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
- CSS书写规范、顺序和命名规则
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考 这些是参考了国外一些文章以及我的个 ...
- 推荐大家使用的CSS书写规范、顺序(转载)
转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...
随机推荐
- Ubuntu一路填坑...
1.安装 从ubuntu9.0开始,一路更新,越来越垃圾,更可恶的是工作上经常指定特定的版本,于是乎,我电脑里装了n个版本的ubuntu. Win7 + Ubuntu 15.10 1)装完win7之后 ...
- mod-mono
http://go-mono.com/config-mod-mono/ 配置文件生成器 Mono remote debugging from Visual Studio http://stackov ...
- 探索ASP.NET MVC框架之控制器的查找与激活机制
引言 前面一篇博文我们介绍了MVC框架的路由机制,我们知道一个URL请求如何从ASP.NET处理管线到达了IHttpHandler实例(MvcHandler).今天我们从MvcHandler来进行下一 ...
- Mysql导入数据命令
转自:http://blog.sina.com.cn/s/blog_610997850100mwv8.html 今天碰到个问题要用phpmyadmin导入1G的数据,但是在怎么都导入不了,用命令行就可 ...
- PHP 图片上传
PHP上传的简单案例: Html文件: <html> <form action="index.php" name="form" method= ...
- codevs3250 操作序列
题目描述 Description Petya是一个非常好玩孩子.他很无聊,因此他开始玩下面的游戏: 他得到一个长度为N的整数序列,他会对这些数字进行操作,他可以把某个数的数值加1或者减1(当然他可以对 ...
- Linux下,如何给PHP安装pdo_mysql扩展
下载了一个免费开源的广告系统(openadserver),在Linux上安装时,提示要安装 pdo_mysql 扩展,先前有过编译安装 soap扩展 的经历,今天要编译安装 pdo_mysql 扩展, ...
- windows7下php5.4成功安装imageMagick,及解决php imagick常见错误问题。(phpinfo中显示不出来是因为:1.imagick软件本身、php本身、php扩展三方版本要一致,2.需要把CORE_RL_*.dll多个文件放到/php/目录下面)
windows7下 php5.4成功安装imageMagick . (phpinfo中显示不出来是因为:1.软件本身.php本身.php扩展三方版本要一致,2.需要把CORE_RL_*.dll多个 ...
- 一次dell R420 电源故障引发的“血案”
说“血案”有写夸张了,其实是也就熬了一夜的通宵,做运维的伤不起啊,作为一名运维工程师,像这种服务器突发故障半夜起床的情况属于家常便饭,见怪不怪了,开始说正事: 前几天半夜12点左右,收到服务器宕机的消 ...
- HDU 3879 Base Station(最大权闭合子图)
经典例题,好像说可以转化成maxflow(n,n+m),暂时只可以勉强理解maxflow(n+m,n+m)的做法. 题意:输入n个点,m条边的无向图.点权为负,边权为正,点权为代价,边权为获益,输出最 ...