属性书写顺序

[建议] 同一 rule set 下的属性在书写时,应按功能进行分组,并以 Formatting Model(布局方式、位置) > Box Model(尺寸) > Typographic(文本相关) > Visual(视觉效果) 的顺序书写,以提高代码的可读性。

解释:

  • Formatting Model 相关属性包括:position / top / right / bottom / left / float / display / overflow 等
  • Box Model 相关属性包括:border / margin / padding / width / height 等
  • Typographic 相关属性包括:font / line-height / text-align / word-wrap 等
  • Visual 相关属性包括:background / color / transition / list-style 等

另外,如果包含 content 属性,应放在最前面。

示例:

.sidebar {
/* formatting model: positioning schemes / offsets / z-indexes / display / ... */
position: absolute;
top: 50px;
left: 0;
overflow-x: hidden; /* box model: sizes / margins / paddings / borders / ... */
width: 200px;
padding: 5px;
border: 1px solid #ddd; /* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px; /* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}

CSS书写顺序提高可读性的更多相关文章

  1. css书写顺序和常用命名推荐

    写代码的时候有一个好的规范和顺序能够帮你节省很多时间.下文将推荐相关CSS书写顺序和规范的一些方法.这个文档将会整理进前端规范文档中,如果你有更好的意见,不妨留言告知我们. CSS书写顺序 该代码来自 ...

  2. CSS书写顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...

  3. 面试准备 css 书写顺序及原理

    书写顺序 (1)定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index (2)自身属性: ...

  4. 推荐的 CSS 书写顺序

    //显示属性 display list-style position float clear //自身属性 width height margin padding border background ...

  5. Mozilla推荐的CSS书写顺序

    //显示属性displaylist-stylepositionfloatclear //自身属性widthheightmarginpaddingborderbackground //文本属性color ...

  6. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  7. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  8. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  9. 推荐大家使用的CSS书写规范及顺序

    @设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...

随机推荐

  1. php md5()函数 语法

    php md5()函数 语法 作用:字符串md5编码.dd马达价格 语法:md5(string,raw) 参数: 参数 描述 string     必需.规定要计算的字符串. raw     可选.规 ...

  2. hdu 4641K-string SAM的O(n^2)算法 以及 SAM+并查集优化

    转载:http://www.cnblogs.com/hxer/p/5675149.html 题意:有一个长度为n(n < 5e4)的字符串,Q(Q<=2e5)次操作:操作分为:在末尾插入一 ...

  3. zabbix4.0 percona插件实现监控mysql

    percona是一款能够详细监控zabbix MySQL的插件 官方下载percona插件 wget https://www.percona.com/downloads/percona-monitor ...

  4. nginx proxy大文件上传失败问题总结

    问题描述: http://www.syhuo.net ota.apk包上传正常 http://www.syhuo.net:8080 ota.apk包上传不正常 查看nginx error日志 [roo ...

  5. drawChild中画阴影,裁剪出圆角

    我们在EasyConstraintLayout中初始化paint,并且关闭硬件加速,然后在drawChild中实现阴影逻辑,最终代码如下. public class EasyConstraintLay ...

  6. yii2框架的安装&配置启动

    top:环境MacBook 1.通过composer 安装yii2 [yii2需要php的PDO和pdo_mysql扩展,需要确认已安装] a. 首先需要配置composer:我使用的是阿里云的镜像: ...

  7. 搭建maven本地仓库

    1. 需先配置java环境. 2. 下载nexus. https://www.sonatype.com/download-nexus-repo-oss?submissionGuid=a015a3db- ...

  8. hibernate搭建及其增删改查

    一.jar包 最基础的hibernatejar包,以及数据库驱动的jar包 二.数据库 t_user表 id int 主键 自动增长 name varchar() 三.配置文件 <?xml ve ...

  9. php+form表单的文件上传

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. CSS中设置字体样式

    <style type="text/css"> body{ font-family: SimHei,"微软雅黑",sans-serif; } < ...