css 属性自动排序_“由外而内” —按重要性排序CSS属性

css 属性自动排序

本文全部涉及CSS代码结构-特别是关于我最近几年一直在使用的一种方法，该方法使我编写CSS的顺序具有逻辑性和一致性。 我称这种方法为“外向内”。

申报单？

我过去听说过各种编写CSS的方法。 有些人根本不使用任何特定的顺序，其他人则按属性名称的字母顺序声明，我什至听说过少数情况，其中有些情况是根据每个property:value对的长度在视觉上对它们进行排序的！

过去对CSS-Tricks进行的民意测验提出了这个问题，结果令我感到十分惊讶：在11,000多人中，有39％在订购CSS时没有具体计划。

按类型分组可能表明height紧随width 。 例如，按字母顺序将看到从background到z-index列出的声明。

我使用按类型对属性进行分组的方法-尽管我甚至使用特定的顺序对组进行排序！

除了“随机方法”外，所有其他方法都具有一定程度的有序性。 但是该顺序不一定能很好地映射到有关网站样式的任何有用信息。

如果您要收集有关教室中学生身高的数据，则可以通过长度测量对学生进行排序。 如果您要对DVD的集合进行分类，则按字母顺序排序可能很有意义。 但是，当这些样式由浏览器绘制时，以这些方式排序CSS属性是否与它们的重要性顺序有关系吗？

如果按字母顺序排序，那么元素的color比width重要？ 元素的border-style是否比文档的常规流程中的border-style重要？ 我不会说。

外在

我喜欢的方法是通过CSS属性对所选元素或周围其他元素的影响程度来排序的。 该技术的要旨是从大图片属性开始，该属性会影响元素外部的内容并朝更精细的细节起作用。 这就是为什么我称其为“ Outside In”方法。

position和float声明从其正常流程中删除了元素，并对周围的其他元素产生了巨大影响。 这是很重要的事情，我认为应该在一个CSS块的顶部将其弄清楚。

通常，控制诸如cursor或元素overflow之类的事情不太重要，因此我倾向于将这种事情留到最后。

我使用的顺序如下：

• 布局属性（ position ， float ， clear ， display ）
• 盒子模型属性（ width ， height ， margin ， padding ）
• 视觉属性（ color ， background ， border ， box-shadow ）
• 版式属性（ font-size ， font-family ， text-align ， text-transform ）
• 杂项属性（ cursor ， overflow ， z-index ）

我知道border是一个box-model属性，而z-index与位置有关，但是这个顺序对我有用。 即使我不喜欢按字母顺序排序，也有将z-index放在最后的感觉……

实际例子

让我们以样式化按钮模块为例。

让我们从一个很好的，有意义的类名开始，如.button 。 我个人不喜欢像.btn这样的.btn名称，并且倾向于在可能的情况下偏爱较长的描述性类名-这只是个人喜好，YMMV :)

/* <a href="#" class="button">Order now &rarr;</a> */
.button { }

我们希望能够操纵按钮周围的垂直间距，因此需要将display从inline （锚链接的默认设置）更改为inline-block 。

为了使按钮的宽度取决于文本内容， inline-block是比设置了width float更灵活的选择。

.button {
    display:inline-block;
}

接下来，我们需要添加一些框模型特征，例如margin和padding。 保证金超出限制范围，因此，“从里到外”应该首先出现。

.button {
    display:inline-block;
    margin:1em 0;
    padding:1em 4em;
}

接下来要添加的是颜色。 为了区分每组属性类型，我想在空白处留空-这使每个部分都更加突出。

.button {
    display:inline-block;
    margin:1em 0;
    padding:0.5em 3em;

    color:#fff;
    background:#196e76;
}

接下来，我们可以添加边框和阴影以提供一定的深度，然后添加任何版式属性，并再次用空白行分隔。

.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;
}

读码

拥有这样的系统的一个好处是，一旦实施，它就无需考虑太多。 如果我正在阅读我的代码，并且想要更改某幅大图，例如元素的width或position ，那么我知道我会朝着规则的顶端看。 如果要调整诸如text-transform或list-style ，我将向该块的底部看。

像这样编写代码的结构对于其他阅读CSS的人也确实有用。 如果面对这样组织的代码，则很容易看到组成按钮模块的所有组件。 在编写代码时，重要的是要使我们的其他开发人员尽可能地容易阅读。 这使代码更易于理解和维护。

预处理器

我在这里使用了普通CSS来解释我的方法，但是您可以在Sass，LESS和Stylus中同样有效地应用“ Outside In”方法。

结论

编码可能是非常个人的事情。 如果您使用其他方法来组织CSS，则不胜感激！ 发表评论以继续讨论。

翻译自: https://webdesign.tutsplus.com/articles/outside-in-ordering-css-properties-by-importance--cms-21685

css 属性自动排序