[笔记]CSS样式声明顺序

最新推荐文章于 2025-05-07 11:15:37 发布

weixin_33827731

最新推荐文章于 2025-05-07 11:15:37 发布

阅读量68

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/tinyTea/p/5851716.html

本文介绍了在CSS中如何正确地组织属性以提高代码的可读性和维护性。通过将相关属性分组并按照Positioning、Boxmodel、Typography和Visual的顺序排列，有助于保持样式表的一致性和清晰性。

来自Bootstrap中文网编程规范

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

Positioning
Box model
Typographic
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。

转载于:https://www.cnblogs.com/tinyTea/p/5851716.html