:note

csscombでcssの整形

csscomb/csscomb.js: CSS coding style formatter

CSScomb: Makes your code beautiful

プロパティのソートとグルーピングをしてくれる

% npm install csscomb -g
% csscomb
No input paths specified

  Usage: csscomb [options] <file ...>

  Options:

    -h, --help           output usage information
    -V, --version        output the version number
    -v, --verbose        verbose mode
    -c, --config [path]  configuration file path
    -d, --detect         detect mode (would return detected options)
    -l, --lint           in case some fixes needed returns an error

% csscomb magnesium.css
% git diff

configオプション無指定でデフォルトの csscomb.json を使用した結果。

{ が行頭にくるのが気持ち悪い。

diff --git a/static/css/magnesium.css b/static/css/magnesium.css
index c25dad0..1ff3367 100644
--- a/static/css/magnesium.css
+++ b/static/css/magnesium.css
@@ -1,46 +1,60 @@
-body {
-  margin: 0;
-  color: hsl(20, 10%, 20%);
+body
+{
+    margin: 0;
+
+    color: hsl(20, 10%, 20%);
 }
-a:link {
-  color: hsl(20, 10%, 60%);
-  text-decoration: none;
+a:link
+{
+    text-decoration: none;
+
+    color: hsl(20, 10%, 60%);
 }
-a:visited {
-  color: hsl(20, 20%, 50%);
+a:visited
+{
+    color: hsl(20, 20%, 50%);
 }
 a:hover,
-a:focus {
-  text-decoration: underline;
+a:focus
+{
+    text-decoration: underline;
 }
-a:active {
-  color: hsl(20, 10%, 20%);
-  text-decoration: overline;
+a:active
+{
+    text-decoration: overline;
+
+    color: hsl(20, 10%, 20%);
 }

zen.jsonをconfigに使用

% csscomb --config zen.json static/css/magnesium.css
% git diff
diff --git a/static/css/magnesium.css b/static/css/magnesium.css
index c25dad0..2879557 100644
--- a/static/css/magnesium.css
+++ b/static/css/magnesium.css
@@ -19,28 +19,28 @@ a:active {
 }

 code {
-  color: hsl(60, 50%, 25%);
-  background-color: hsl(60, 10%, 90%);
   padding: 0 .5em;
+  background-color: hsl(60, 10%, 90%);
+  color: hsl(60, 50%, 25%);
 }

 blockquote {
+  padding-left: 1em;
   border-left: 5px solid hsl(60, 10%, 20%);
   background-color: hsl(60, 10%, 95%);
-  padding-left: 1em;
 }

 img {
+  max-width: 320px;
   width: auto;
   height: auto;
-  max-width: 320px;
 }

yandex.jsonをconfigに使用

% csscomb --config yandex.json static/css/magnesium.css
% git diff
diff --git a/static/css/magnesium.css b/static/css/magnesium.css
index c25dad0..a6da940 100644
--- a/static/css/magnesium.css
+++ b/static/css/magnesium.css
@@ -1,10 +1,12 @@
 body {
   margin: 0;
+
   color: hsl(20, 10%, 20%);
 }
 a:link {
-  color: hsl(20, 10%, 60%);
   text-decoration: none;
+
+  color: hsl(20, 10%, 60%);
 }
 a:visited {
   color: hsl(20, 20%, 50%);
@@ -14,26 +16,29 @@ a:focus {
   text-decoration: underline;
 }
 a:active {
-  color: hsl(20, 10%, 20%);
   text-decoration: overline;
+
+  color: hsl(20, 10%, 20%);
 }

 code {
+  padding: 0 .5em;
+
   color: hsl(60, 50%, 25%);
   background-color: hsl(60, 10%, 90%);
-  padding: 0 .5em;
 }

 blockquote {
+  padding-left: 1em;
+
   border-left: 5px solid hsl(60, 10%, 20%);
   background-color: hsl(60, 10%, 95%);
-  padding-left: 1em;
 }

 img {
   width: auto;
-  height: auto;
   max-width: 320px;
+  height: auto;
 }

zen.json を ~/.csscomb.json に配置してデフォルトにしてみる。

 
comments powered by Disqus
back to top