[笔记]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)或者是不影响前两组属性,因而排在前边。

完整的性质列表及其排列顺序请参考 RecessBootstrap,。

相关文章