Question

CSS声明中的属性顺序是否会影响HTML的呈现？

Answer 1

这真是一个比我想象的更棘手的问题。我的第一反应是：

在CSS 规则（也称为“规则集”）中，声明（表单属性：value）的顺序并不重要。因此foo { color: red; background: white; }相当于foo { background: white; color: red; }。在规范中没有单独的声明（我想）;它源于缺乏任何会使订单显着的陈述。

第二个想法，我们也可以

* { font: 100% Calibri; font-weight: bold; }

如果切换订单会怎样？在浏览器中，它确实有效。我不确定如何根据CSS规范解释这一点，但浏览器显然并且自然地按顺序处理声明。因此规则使文本变为粗体，但如果您更改顺序，

* { font-weight: bold; font: 100% Calibri; }

事情发生了变化。 font简写将font-weight设置为其初始值normal，因此文字不是粗体。

第三个想法，基于顺序有很多方法和技巧。所以是的，声明的顺序很重要。

规则顺序的影响是一个完全不同的问题。

Answer 2

显然，订单对结果没有任何直接影响。这里提到了这个主题：http://css-tricks.com/new-poll-how-order-css-properties/

根据这里确实有影响：http://css-tricks.com/ordering-css3-properties/

这是另一个趋势：http://perishablepress.com/obsessive-css-code-formatting-patterns-and-trends/

最终裁决：安排你最好的判断方式，它会起作用。

Answer 3

主要有5种CSS属性指令：

随机
分组依据
字母
按行长
重要性的CSS属性

1。随机

.module {
   border: 1px solid #ccc;
   width: 25%;
   padding: 20px;
   position: relative;
   min-height: 100px;
   z-index: 1;
   border-radius: 20px;
}

2。分组依据

.module {
   width: 25%;
   min-height: 100px;
   padding: 20px;

   border: 1px solid #ccc;
   border-radius: 20px;

   position: relative;
   z-index: 1;
}

3。按字母顺序

.module {
   border-radius: 20px;
   border: 1px solid #ccc;
   min-height: 100px;
   padding: 20px;
   position: relative;
   width: 25%;
   z-index: 1;
}

4。按行长

.module {
   border: 1px solid #ccc;
   border-radius: 20px;
   position: relative;
   min-height: 100px;
   padding: 20px;
   z-index: 1;
   width: 25%;
}

以下是参考网址：https://css-tricks.com/new-poll-how-order-css-properties/

5。按重要性排序CSS属性

但按重要性排序CSS属性的最佳方法

布局属性（位置，浮动，清除，显示）
框模型属性（宽度，高度，边距，填充）
视觉属性（颜色，背景，边框，框阴影）
版式属性（字体大小，字体系列，文本对齐，文字转换）
其他属性（光标，溢出，z-index）

示例：

.button {
    display:inline-block;
    margin:1em 0;
    padding:1em 4em;
    color:#fff;
    background:#196e76;
    border:0.25em solid #196e76;
    box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3), 
               0.5em 0.5em 0 #444;
    font-size:3em;
    font-family:Avenir, Helvetica, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
}

Answer 4

通常不需要或规则来对CSS声明中的属性进行排序。我按照我对设计和浏览器响应的要求编写了命令，但在firebug工具中它安排了字母命令。

最好的订购方法是

 1. box model = width ->height->float
 2. font related = font-size -> text-decoration, font-family
 3. background images = width, height, border, image

然后，只有浏览器根据我的经验更快地为每个元素分配空间。

有些人订购如下类型：

随机

字母

按类型分组

按属性长度

Answer 5

有一些指导方针。但是，在一天结束时，它归结为浏览器实现。尽量不要依赖某个总是有效的订单，因为它不会。在声明中，声明倾向于覆盖先前的声明。

CSS属性订单有多重要？

5 个答案: