蟑螂窩

自動排序 CSS 屬性 - CSScomb

| Comments

csscomb.png

CSScomb Official Site : http://csscomb.com/

在撰寫 CSS 的時候如果沒有很好的習慣，總是想到什麼屬性，就直接塞到 {…} 之中， 或是頂多只把類似的屬性放在一起 (譬如 margin 可能和 padding 或 border 放在一起)， 長期下來， CSS 語法會非常「亂」，使得在找屬性的時候很難找，另一方面，看到亂七八糟的屬性心情也會很差。

CSScomb 就是用來解決這個問題的工具！

先來看一段雜亂的 CSS ：

1
2
3
4
5
6
7
8
9

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

經過 CSScomb 整理過後的 CSS：

1
2
3
4
5
6
7
8
9

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

可以看到相似的屬性被放在一起了，加上註解的話，應該會看得更清楚：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.module {
    /*  position  */
    position: relative;
    z-index: 1;

    /*  box model  */
    padding: 20px;
    min-height: 100px;
    width: 25%;
    border: 1px solid #ccc;

    /*  styling  */
    border-radius: 20px;
}

如果你對 CSS 稍微有點潔癖的話，相信這個工具應該很適合你！

Comments