- 浏览: 662960 次
- 性别:
- 来自: 深圳
文章分类
最新评论
-
zhouyicang:
为嘛人气不够,这么好的文章,我找了几十篇博客,才找到这篇解惑了 ...
HTML 块级元素/内联元素 -
young7:
不错,解惑了
HTML 块级元素/内联元素 -
lvjin948:
获取浏览器语言的完美方案。http://blog.csdn.n ...
JavaScript获取浏览器语言类型 -
tarena_hhh:
我用了css优化工具,发现他的顺序有很大不一样?????
CSS属性书写顺序及命名规则 -
deng131:
谢谢你的提醒,是有个地方写错了
javascript事件绑定addEventListener,attachEvent
传说中的Mozilla推荐
来源:
在怿飞’s Blog的这篇文章里,又将上面的属性分成了三组:显示属性、自身属性和文本属性。在回复里,inG补充这还和浏览器的解析过程有关:浏览器先对DOM定位,然后解析自身属性,接着再解析内部对象。(没找到相关的英文资料,有知情者还望告知)
在Mozilla官方,其实并没有推荐任何CSS书写顺序。很可能是某个开发者在阅读fantasai的这篇文章 mozilla.org Markup Reference 时,顺便对fantasai的CSS源文件产生了兴趣,因此才有了上面的发现。
字母排序
NETTUTS上时不时有些好文章,这不,前不久,Trevor Davis就分享了一篇:5 Ways to Instantly Write Better CSS. 这篇文章中,推荐CSS的属性按字母排序。
优点是:简单,任何人只要遵守,一看就明白。
缺点是:太简单,缺乏逻辑性。比如position, left, top等,这种紧关联的属性,如果都按字母排序,书写和维护起来都不方便。Andy Ford推荐的排序
Andy Ford是HTML和CSS方面的专家,最近写了一篇文章:Order of the Day: CSS Properties. 文章推荐的CSS书写顺序为:
Andy的顺序大体上和fantasai推荐的顺序保持了一致,但细节上更具可操作性。
SitePoint上还有个很热烈的讨论贴:How do you order your properties within a declaration block?
我喜欢fantasai和Andy的书写顺序,但fantasai的顺序中,“自身”属性有点含混不清,Andy的则太细,难以记住。我觉得可以借鉴CSS 2.1 Specification中对CSS属性的分类,将Andy的顺序稍微调整下:
1. 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等)
2. 自身盒模型的属性(比如:width, height, margin, padding, border等)
3. 排版相关属性(比如:font, line-height, text-align, text-indent, vertical-align等等)
4. 装饰性属性(比如:color, background, opacity, cursor等)
5. 生成内容的属性(比如:content, list-style, quotes等)
事情永远没那么简单,比如下面这些困扰:
1. 对于shorthand怎么处理?比如 border: 1px solid red; 其中border-width是和盒模型相关的,但border-color是装饰性的。如何组织呢?
2. 考虑到换肤功能,是否应该将color, background, border-color等和颜色相关的都放一块?以方便以后修改。
3. 对于hacks如何处理?单独放到css文件最后面,还是和hack的属性紧挨着好?
4. 维护同事的css文件时,对于新增加或有修改的属性,如何注释?如何书写?
5. 还有,考虑到CSS Sprite, 所有背景图的选择器都放在一起?不过这已经超出本文的话题了:CSS选择器内属性的顺序和组织。
6. 更进一步的讨论是:CSS文件内的结构组织,以及多个CSS文件的组织。
CSS命名规则:
Css和其他程序一样,都是有作用域这个概念,有全局、类局部作用这些方式。
举个例子:
p{background:#f00;}/* 作用域 :全局 */
.div p{color:#000;}/* 作用域:div类中*/
介绍下Css几种编写方式和权重对比
1)标签:权值为0,0,0,1
2)类:权值为0,0,1,0
3)属性选择:权值为0,0,1,1
4)ID:权值为0,1,0,0
5)important的权值为最高1,0,0,0
相信大家在编写Css的时候,当项目比较大,内容比较多的时候,命名就是一件很头痛的事情,而且一个块里面要表现不同状态的样式 ,这是有掌握命名规则是一把利器,能让你工作起来事半功倍。大致如下:(转载自:http://www.cssforest.org/blog /index.php?id=143,大家可以去这里看,比较多的技术文章)
要避免当状态改变时名称失去意义,最常见的就是用于布局的类名,如“left”、“right”,当左边栏不再是左边栏的时候,“left”这个名就没有实际意义了。这与我们所推荐的 “命名要有意义”就相违背了,使用序号就更加有问题了。好像没错,不过有好长一段 时间都有个问题让我很烦恼,如果一个页面中同个模块出现一次以上,而且细节还不一样,那后面出现的名称应该叫什么呢?难道“one”、“two”就不是序 号?其实我们要避免遇到的情况就是当状态(表现)改变时,对应定义的类名不会失去意义。
所谓的状态(表现)改变,有几种情况:
1. HTML不变,样式定义改变。如果命名使用了表示某一状态的名称,如“red“、“font14“等,必定会引起定义与命名不符的情况,对后继的影响会造成比较大的影响。
2. 样式定义不变,HTML改变。HTML改变意味着类名可更换,也就是如果类名使用了表示某一状态的名称,反而更有利于修改。
3. 样式定义与HTML都改变。只需要考虑不要出现第一种情况的结果就可以了。
而实际情况并不是单纯的某一种情况,更多的时候是混杂着出现的。
规则
[ 模块前缀 ] _ 类型 _ ( 作用 | 状态 ) n _ [ 位置 n ]
图例说明:
* ( 必选 ):必需存在。
* [ 可选 ]:可根据需要选择。
* |:多选一。
* n:可有多个。
名词说明:
模块前缀
模块定义时使用的前缀。
类型
定义类的内容类型。如输入框、文本、段落等等。
作用
定义类的作用,用于对类型的补充。
状态
定义类的状态,用于对类型的补充。
位置
定义类所使用的位置,如首页、导航等等,不排除使用左、右这样的词,但应尽量避免。
* 每项都可有自己的一个缩写表,同一名称的缩写尽量统一。
* 所选用的单词应选择不过于具体表示某一状态(如颜色、大小等)的单词,以避免当状态改变时名称失去意义。
* 由不以数字开头的小写字母(a-z)、数字(0-9)组成。
* 确保类(.class)的重用性与对象(#id)的唯一性,id避免使用保留字。
例:
中文解释 命名 中文解释 命名
文本输入框 .input_tx 段落文本颜色 .c_tx_p
密码输入框 .input_pw 相册弹出的设置层 .pop_set_photo
登录密码输入框 .input_pw_login 日志设置成功提示 .hint_suc_blogset
文本颜色 .c_tx 公共提示 .hint_gb
问几个简单的问题,可以帮助我们完成命名:
1. “什么类型的定义?”——是个输入框,input。
2. “类型补充说明”——如果一个词说明不清楚,那么补充说明类型,文本输入框,input_tx。
3. “在哪使用?”——定义要使用的位置在哪?首页的搜索文本输入框,input_search_index。
结合“模块化”相关的方法去定义,其实所需要定义的名称并不需要很多。 如:“hint_tx”表示提示模块的文字定义,“hit_tx_hint”表示提示里文字强调的定义,至于是改变颜色还是加粗,这个就看不同提示模块的需要了。
/* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * position * float * clear * width * height * margin * padding * border * background * color * font * text-decoration * text-align * vertical-align * white-space * other text * content * */ ...
来源:
http://www.mozilla.org/css/base/content.css
在怿飞’s Blog的这篇文章里,又将上面的属性分成了三组:显示属性、自身属性和文本属性。在回复里,inG补充这还和浏览器的解析过程有关:浏览器先对DOM定位,然后解析自身属性,接着再解析内部对象。(没找到相关的英文资料,有知情者还望告知)
在Mozilla官方,其实并没有推荐任何CSS书写顺序。很可能是某个开发者在阅读fantasai的这篇文章 mozilla.org Markup Reference 时,顺便对fantasai的CSS源文件产生了兴趣,因此才有了上面的发现。
字母排序
NETTUTS上时不时有些好文章,这不,前不久,Trevor Davis就分享了一篇:5 Ways to Instantly Write Better CSS. 这篇文章中,推荐CSS的属性按字母排序。
优点是:简单,任何人只要遵守,一看就明白。
缺点是:太简单,缺乏逻辑性。比如position, left, top等,这种紧关联的属性,如果都按字母排序,书写和维护起来都不方便。Andy Ford推荐的排序
Andy Ford是HTML和CSS方面的专家,最近写了一篇文章:Order of the Day: CSS Properties. 文章推荐的CSS书写顺序为:
1. Display & Flow 2. Positioning 3. Dimensions 4. Margins, Padding, Borders, Outline 5. Typographic Styles 6. Backgrounds 7. Opacity, Cursors, Generated Content 例子: el { display: ; visibility: ; float: ; clear: ; position: ; top: ; right: ; bottom: ; left: ; z-index: ; width: ; min-width: ; max-width: ; height: ; min-height: ; max-height: ; overflow: ; margin: ; margin-top: ; margin-right: ; margin-bottom: ; margin-left: ; padding: ; padding-top: ; padding-right: ; padding-bottom: ; padding-left: ; border: ; border-top: ; border-right: ; border-bottom: ; border-left: ; border-width: ; border-top-width: ; border-right-width: ; border-bottom-width: ; border-left-width: ; border-style: ; border-top-style: ; border-right-style: ; border-bottom-style: ; border-left-style: ; border-color: ; border-top-color: ; border-right-color: ; border-bottom-color: ; border-left-color: ; outline: ; list-style: ; table-layout: ; caption-side: ; border-collapse: ; border-spacing: ; empty-cells: ; font: ; font-family: ; font-size: ; line-height: ; font-weight: ; text-align: ; text-indent: ; text-transform: ; text-decoration: ; letter-spacing: ; word-spacing: ; white-space: ; vertical-align: ; color: ; background: ; background-color: ; background-image: ; background-repeat: ; background-position: ; opacity: ; cursor: ; content: ; quotes: ; }
Andy的顺序大体上和fantasai推荐的顺序保持了一致,但细节上更具可操作性。
SitePoint上还有个很热烈的讨论贴:How do you order your properties within a declaration block?
我喜欢fantasai和Andy的书写顺序,但fantasai的顺序中,“自身”属性有点含混不清,Andy的则太细,难以记住。我觉得可以借鉴CSS 2.1 Specification中对CSS属性的分类,将Andy的顺序稍微调整下:
1. 影响文档流的属性(比如:display, position, float, clear, visibility, table-layout等)
2. 自身盒模型的属性(比如:width, height, margin, padding, border等)
3. 排版相关属性(比如:font, line-height, text-align, text-indent, vertical-align等等)
4. 装饰性属性(比如:color, background, opacity, cursor等)
5. 生成内容的属性(比如:content, list-style, quotes等)
事情永远没那么简单,比如下面这些困扰:
1. 对于shorthand怎么处理?比如 border: 1px solid red; 其中border-width是和盒模型相关的,但border-color是装饰性的。如何组织呢?
2. 考虑到换肤功能,是否应该将color, background, border-color等和颜色相关的都放一块?以方便以后修改。
3. 对于hacks如何处理?单独放到css文件最后面,还是和hack的属性紧挨着好?
4. 维护同事的css文件时,对于新增加或有修改的属性,如何注释?如何书写?
5. 还有,考虑到CSS Sprite, 所有背景图的选择器都放在一起?不过这已经超出本文的话题了:CSS选择器内属性的顺序和组织。
6. 更进一步的讨论是:CSS文件内的结构组织,以及多个CSS文件的组织。
CSS命名规则:
Css和其他程序一样,都是有作用域这个概念,有全局、类局部作用这些方式。
举个例子:
p{background:#f00;}/* 作用域 :全局 */
.div p{color:#000;}/* 作用域:div类中*/
介绍下Css几种编写方式和权重对比
1)标签:权值为0,0,0,1
2)类:权值为0,0,1,0
3)属性选择:权值为0,0,1,1
4)ID:权值为0,1,0,0
5)important的权值为最高1,0,0,0
相信大家在编写Css的时候,当项目比较大,内容比较多的时候,命名就是一件很头痛的事情,而且一个块里面要表现不同状态的样式 ,这是有掌握命名规则是一把利器,能让你工作起来事半功倍。大致如下:(转载自:http://www.cssforest.org/blog /index.php?id=143,大家可以去这里看,比较多的技术文章)
要避免当状态改变时名称失去意义,最常见的就是用于布局的类名,如“left”、“right”,当左边栏不再是左边栏的时候,“left”这个名就没有实际意义了。这与我们所推荐的 “命名要有意义”就相违背了,使用序号就更加有问题了。好像没错,不过有好长一段 时间都有个问题让我很烦恼,如果一个页面中同个模块出现一次以上,而且细节还不一样,那后面出现的名称应该叫什么呢?难道“one”、“two”就不是序 号?其实我们要避免遇到的情况就是当状态(表现)改变时,对应定义的类名不会失去意义。
所谓的状态(表现)改变,有几种情况:
1. HTML不变,样式定义改变。如果命名使用了表示某一状态的名称,如“red“、“font14“等,必定会引起定义与命名不符的情况,对后继的影响会造成比较大的影响。
2. 样式定义不变,HTML改变。HTML改变意味着类名可更换,也就是如果类名使用了表示某一状态的名称,反而更有利于修改。
3. 样式定义与HTML都改变。只需要考虑不要出现第一种情况的结果就可以了。
而实际情况并不是单纯的某一种情况,更多的时候是混杂着出现的。
规则
[ 模块前缀 ] _ 类型 _ ( 作用 | 状态 ) n _ [ 位置 n ]
图例说明:
* ( 必选 ):必需存在。
* [ 可选 ]:可根据需要选择。
* |:多选一。
* n:可有多个。
名词说明:
模块前缀
模块定义时使用的前缀。
类型
定义类的内容类型。如输入框、文本、段落等等。
作用
定义类的作用,用于对类型的补充。
状态
定义类的状态,用于对类型的补充。
位置
定义类所使用的位置,如首页、导航等等,不排除使用左、右这样的词,但应尽量避免。
* 每项都可有自己的一个缩写表,同一名称的缩写尽量统一。
* 所选用的单词应选择不过于具体表示某一状态(如颜色、大小等)的单词,以避免当状态改变时名称失去意义。
* 由不以数字开头的小写字母(a-z)、数字(0-9)组成。
* 确保类(.class)的重用性与对象(#id)的唯一性,id避免使用保留字。
例:
模块前缀: * 弹出 pop * 公共 global,gb * 标题 title,tit * 提示 hint * 菜单 menu * 信息 info * 预览 pvw * Tips tips * 导航 nav 类型: * 按钮 bt * 文本 tx * 段落 p * 图标 icon * input input * 颜色 color,c * 背景 bg * 边框 bor 作用: * 设置 set * 添加 add * 删除 del * 操作 op * 密码 pw * 导入 inc 状态: * 成功 suc * 失败 lost * 透明 tran 位置: * 公共 gb * 边框 bor * 段落 p * 弹出 pop * 标题 title,tit * 菜单 menu * 内容 cont * 导航 nav
中文解释 命名 中文解释 命名
文本输入框 .input_tx 段落文本颜色 .c_tx_p
密码输入框 .input_pw 相册弹出的设置层 .pop_set_photo
登录密码输入框 .input_pw_login 日志设置成功提示 .hint_suc_blogset
文本颜色 .c_tx 公共提示 .hint_gb
问几个简单的问题,可以帮助我们完成命名:
1. “什么类型的定义?”——是个输入框,input。
2. “类型补充说明”——如果一个词说明不清楚,那么补充说明类型,文本输入框,input_tx。
3. “在哪使用?”——定义要使用的位置在哪?首页的搜索文本输入框,input_search_index。
结合“模块化”相关的方法去定义,其实所需要定义的名称并不需要很多。 如:“hint_tx”表示提示模块的文字定义,“hit_tx_hint”表示提示里文字强调的定义,至于是改变颜色还是加粗,这个就看不同提示模块的需要了。
发表评论
-
css定位z-index问题
2012-11-09 11:04 15321. 某些浏览器下元素层级遮盖存在bug; 2. 某个元素z ... -
几种 css hack 方法
2012-10-31 22:38 1632第一种:!important方式 .DIV{ backgr ... -
前端使用CSS浮动16条规则
2012-06-18 09:40 1708好久没来写东西了,今 ... -
浏览器兼容 CSS Hack方法
2012-03-01 23:11 1330.element{ color:#00 ... -
IE中css属性writing-mode使用
2011-09-22 21:03 1986在项目中遇到这个属性的用法设置文本的垂直显示,但是只能在ie中 ... -
javascript获取元素CSS样式值
2011-06-18 14:36 1722IE: element.currentStyle curre ... -
div,span标签title属性
2011-06-07 21:59 10252div,span标签title属性:规定元素的额外信息(可在工 ... -
CSS中border实现圆角效果
2011-05-27 22:42 1744重要的是其实现的原理,明白原理后就可以自由的发挥你的想象了,不 ... -
CSS中border实现三角效果
2011-05-27 21:52 1311一直关注js比较多,对css不是很熟,作为前端开发工程师而言这 ... -
IE6下png格式图片透明问题
2011-05-24 10:26 983.png{ background: url(http:// ... -
IE6,IE7下设置透明度opacity问题
2011-05-24 09:55 4088在前端开发中经常被问到IE下这个bug问题: ie6下是因为 ... -
ie6下实现position:fixed效果
2011-05-23 17:31 1059由于IE下position:fixed无效,所以需要寻找一种合 ... -
CSS中ime-mode控制输入法选择
2011-02-12 11:41 2035上图更好说明如何使用应用场景 ime-mode: 语法: ... -
@font-face网页嵌入字体
2011-02-10 10:47 1756字体使用是网页设计中不可或缺的一部分。在网页中使用某一特定字体 ... -
IE中hasLayout属性布局问题
2010-12-13 12:11 1383IE中 Internet Explorer for Windo ... -
<img/>垂直居中方法
2010-10-17 09:47 2723以前面试中遇到相似问题。“纯CSS实现未知尺寸的图片(但高宽都 ... -
<div>页面居中显示
2010-10-17 08:58 2364以前在面试中就遇到过这个问题。借用别人的解释。 以下为让di ... -
IE6 png背景透明问题
2010-10-01 11:35 1949相信在前端开发中大家都会遇到浏览器的兼容性问题,这个问题网上有 ... -
CSS鼠标指针cursor属性
2010-09-27 21:47 3996大家都知道常用的鼠标指针样式: * au ... -
清除float浮动三种方法
2010-09-22 13:09 18241:使用空标签清除浮动。我用了很久的一种方法,空标签可以是di ...
相关推荐
书写顺序的意义 减少浏览器reflow(回流),提升浏览器渲染dom的性能 ①:解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构 ②:构建render树:DOM树和CSS树合并之后形成...
一、CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background, ...
CSS规范手册包括:CSS书写顺序、CSS命名规则、CSS写作建议、
一、基本书写规范 1.书写时重定义的最先,伪类其次,自定义最后。 2.所有单位均以px为单位标识(所有单位,全部要带px,包括0px,符合w3c书写规范) 3.所有的css书写均以英文小写字母书写...属性书写顺序
主要介绍了 CSS 样式书写规范,包括编码设置,命名空间规范等知识,非常不错,具有参考借鉴价值,需要的朋友可以参考下
CSS书写顺序 *{ /*显示属性*/ display position float clear cursor … /*盒模型*/ margin padding width height /*排版*/ vertical-align white-space text-decoration text-align … /*文字*/ color font ...
前端规范文档,命名规范,html书写规范,css书写顺序,注释规范
1.格式化代码1.1文件[建议]:CSS文件使用无BOM的UTF-8编码1.2缩进[强制]:使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。 CSS Code复制内容到剪贴板 .selector { margin: 0; padding: 0...
+TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的ColumnId->ColumnID,GetColumnId->GetColumnID。 -Grid1.Columns.FindColumnById函数被Grid1.Find...
+TreeNode的属性NodeId被重命名为NodeID,这是ExtAspNet中的一个命名约定。 -同时更名的还有GridColumn的ColumnId->ColumnID,GetColumnId->GetColumnID。 -Grid1.Columns.FindColumnById函数被Grid1.Find...
用于对目录,文件等名称命名规范的校验prettier;用于对于代码风格以及格式化的统一;什么是husky和lint-staged?husky是用git提交项目时,各个生命周期的回调lint-staged;获取git add区域的所有文件;并可以对这些
Oracle编程的编码规范及命名规则 Oracle数据库字典介绍 0RACLE的字段类型 事务 CMT DEMO(容器管理事务演示) 事务隔离性的一些基础知识 在组件之间实现事务和异步提交事务(NET2.0) 其它 在.NET访问MySql数据库时的...
设置内容风格(CSS) - 20 - HTTP 内容协商 negotiation - 21 - 从http headers开始设置内容类型 - 21 - 定制格式 - 22 - 03.控制器 - 23 - 控制器概览 - 23 - 获取http参数 - 24 - 使用params map - 25 - 还可以从...
设置内容风格(CSS) - 20 - HTTP 内容协商 negotiation - 21 - 从http headers开始设置内容类型 - 21 - 定制格式 - 22 - 03.控制器 - 23 - 控制器概览 - 23 - 获取http参数 - 24 - 使用params map - 25 - 还可以从...