CSS样式声明顺序

来自Bootstrap中文网编程规范

相关的属性声明应当归为一组,并按照下面的顺序排列:

  1. Positioning
  2. Box model
  3. Typographic
  4. Visual
.declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;

    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;

    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;

    /* Misc */
    opacity: 1;
}

由于定位(positioning)可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式,因此排在首位。盒模型排在第二位,因为它决定了组件的尺寸和位置。

其他属性只是影响组件的内部(inside)或者是不影响前两组属性,因此排在后面。

完整的属性列表及其排列顺序请参考 Recess

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏blackheart的专栏

[C#6] 0-概览

1. C#6 新特性图谱 ? C#6的新特性主要由编译器(“Roslyn”)带来,并不依赖CLR和.NET Framework的升级,我们可以认为这个版本的新语...

1938
来自专栏琦小虾的Binary

二维码生成原理及解析代码

二维码生成原理及解析代码 自从大街小巷的小商小贩都开始布满了腾讯爸爸和阿里爸爸的二维码之后,我才感觉到我大天朝共享支付的优越性。最近毕业论文写的差不多了,在入职...

5226
来自专栏xingoo, 一个梦想做发明家的程序员

剑指OFFER之树的子结构(九度OJ1520)

题目描述: 输入两颗二叉树A,B,判断B是不是A的子结构。 输入: 输入可能包含多个测试样例,输入以EOF结束。 对于每个测试案例,输入的第一行一个整数n,m(...

17310
来自专栏Crossin的编程教室

【Python 第7课】if

感觉又一次被微信坑了。前两天刚说改变课程发送方式,今天微信就突然服务器升级,暂时不能新增接收文章的关键字了。所以这两天,还是用回老方式,直接推送。过去的课程0~...

2696
来自专栏IMWeb前端团队

web系统性能及规范检测笔记

静态检查 关于javascript的语言特性,Douglas Crockford在蝴蝶书里面写过:“一些特性因为规范的不完善而可能导致可移植性问题,一些特性会导...

1796
来自专栏机器之心

Julia 1.0 正式发布,这是新出炉的一份简单中文教程

文章地址:https://zhuanlan.zhihu.com/p/41802723

762
来自专栏一个爱瞎折腾的程序猿

看了180分钟的视频,写了半天的代码

清晨,日常打开B站,被首页此视频的标题所吸引,虽一看就是标题党,但还是没能抑制住好奇心。 视频共计60*3分钟,学习到了很多东西。其中后半部分有许多正三观的见...

602
来自专栏mathor

LeetCode54. 螺旋矩阵&LeetCode59.螺旋矩阵 II&LeetCode48. 旋转图像

 要是去找每次移动下标之间的关系就错了,很难找到,应该从宏观角度去看,首先打印的是最外层一圈,然后打印倒数第二层的一圈,...依次下去,所以应该这么做,找到...

572

为什么你应该学习Julia

Julia是于2012年发布的一种函数式编程语言。它的创建者希望将Python的可读性和简单性与以C语言为代表的静态编译语言的速度相结合。

646
来自专栏Crossin的编程教室

【Python 第34课】 break

我们已经熟悉了循环的使用,包括while和for...in。while循环在条件不满足时结束,for循环遍历完序列后结束。如果在循环条件仍然满足或序列没有遍历完...

25710

扫描关注云+社区