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 条评论
登录 后参与评论

相关文章

来自专栏向治洪

制作.9.png

1. PNG格式。       在这里不过多的讨论PNG格式的定义问题。但是.9.PNG确实是标准的PNG格式,只是在最外面一圈额外增加1px的边框,这个1p...

2255
来自专栏腾讯社交用户体验设计

web图像的常见应用策略与技巧

911
来自专栏前端菜鸟变老鸟

Sprite 从PS切图到具体实现完整过程

711
来自专栏everhad

Android图片资源

title: 2016-5-5未命名文件 tags: UI适配,图片资源 grammar_cjkRuby: true --- 概述: 本文整理了Andr...

18410
来自专栏儿童编程

儿童编程Scratch之“画笔”基础功能学习总结

Scratch中“画笔”功能能够让使用者模拟画笔在舞台上创作,合理运用能够给作品带来极大的趣味性。

1742
来自专栏瞎说开发那些事

使用RPA绘制素描图

1736
来自专栏.Net移动开发

.Net语言 APP开发平台——Smobiler学习日志:如何快速实现地图定位时的地点微调功能

Smobiler是一个在VS环境中使用.Net语言来开发APP的开发平台,也许比Xamarin更方便

1275
来自专栏落影的专栏

iOS开发-视图渲染与性能优化

前言 关于iOS的视图渲染流程,以及性能优化的建议。 源于WWDC视频。 我假设你是一个这样的开发者: 了解OpenGL ES; 了解view hierar...

4147
来自专栏青玉伏案

视错觉升级版:多个视错觉效果实现

之前发表过一篇关于视错觉的文章:《视错觉:从一个看似简单的自定义控件说起》,虽然不是用iOS开发中的Mask来实现的,但是原理和Mask原理是一样的,相当于手动...

18510
来自专栏哲学驱动设计

任务记录:OEA 框架中的多类型树控件

    11年11月我主要对 OEA 框架中 WPF 自动界面生成模块中多类型树型表格控件进行重构,并同时支持更多的功能。这样,整个 OEA 就不再使用 Dat...

1987

扫码关注云+社区