CSScombを使用してプロパティの順番などをコーディングがすべて終わってから、整理すると思いますが、現場の主流はどのような方法でしょうか？

Question

CSScombを使用してプロパティの順番などをコーディングがすべて終わってから、整理すると思いますが、現場の主流はどのような方法でしょうか？

CSScombを普段コンパイル、ミニファイするgulpとは別の場所に独立したgulpを用意して、
CSScombのみをそこで最後に実行しそれを使って管理をするという形でしょうか？

また、プロパティの順番はモジラなど各社出していますが、どの採用が多いでしょうか？
CSScombのデフォルトでしょうか？

Answer 1

コーディングしながらCSSCombを使用しています。CSSCombはgulpがないと動かないわけではありません。

私はsublimeTextというテキストエディターを主に使っていますが、そのプラグインにCSSCombがありますので、随時並べ替えを行っています。他のよく使われているエディターAtom/Bracketsも拡張機能でCSSCombが入れられます。

ショートカットキーを押せば並べ替えますので、大した負担ではありません。バージョン管理などの都合上、コーディングが終わってからでは遅いです。

プロパティの順番は好みです。テキストエディターでは自分のいつもの順番。指定のある案件では、gulpで順番を制御しています。答えになってなくて申し訳ない。

Comments

[退会済みユーザー]

ありがとうございます。

＞＞＞
バージョン管理などの都合上、コーディングが終わってからでは遅いです。

こちらは、具体的になんのバージョンのことでしょうか？
また自分の順番とはモジラのルールなどでしょうか？

また、確かにサブライムにもありますが、下記のような形にならず
プロパティとプロパティの間に隙間が空きませんか？

/*　ul　*/
.drawermenu__inner {
overflow-y: scroll;
/*overflow-x: scroll;*/
height: 101%;/* 下のスクロールバー */
margin-right: -0.1rem;/*横のスクロールバーをはみ出して、上記のhiddenで隠す*/
background: rgba( 229, 228, 255, 0.3 );
}

@media (min-width: 75rem) {
.drawermenu__inner {
margin-right: -1.7rem;
}
}

[Nan-nan]

１．こちらは、具体的になんのバージョンのことでしょうか？
css(sass)を編集する際に、中断や区切りのいい作業ありますよね。また、修正などが入る場合もあります。他の人と共同作業する場合もあります。

そういう時に、ここの地点のテキストを覚えさせます（コミットといいます）。続きの作業をします。また、その地点のテキストをコミットします。また、続きの作業をし、コミットします。上から順番に１番目のバージョン、２番目のバージョン、３番目のバージョンとなるわけです。

それぞれのバージョンをコミットする際に、後からわかりやすいようにコメントをつけておくと管理が楽です。それぞれのバージョンから現在のバージョンの差異を簡単に表示させる機能があります。

また、他の人の同じファイルをくっつけて、それぞれの変更点を１つのファイルに統合する機能などもあります。もし同じ場所を編集していたら、どっちにしますか？と聞いてきます。それぞれのコミットには編集者の名前が残りますので、誰がどんな意図で編集を行ったのか管理ができます。

そして、今までの変更をやめて、どこかのバージョン地点に戻るなどができます。また、１つづつのファイルではなく、下層を含むフォルダ単位で管理します。cssのみならず、htmlやimgなど変更のあったファイルのみを表示しますので、無駄に探し回る必要がありません。

css編集したらいつの間にか、崩れていたなんてときに差分がわかると解決が早いですし、知識がなくどこかのコピペソースで実験なんてときにも役に立ちます。

バージョン管理ソフトでは「git」がよく使われています。teratailでも「gitに関する質問」があるくらい利用者がいます。

順番が同じでないと順番が違うだけで差異として表示されます。探す手間が増えますので、コミットする前には順番を揃えます。

２．また自分の順番とはモジラのルールなどでしょうか？
デフォルトで３つの順番が用意されているのはご存知かと思います。
csscomb.json
yandex.json
zen.json
私は、csscombが出る前から、順番を揃えてcssを書いていました。思考の癖をそのまま順番にしてあります。yandex.jsonに近いですがオリジナルのものです。

３．また、確かにサブライムにもありますが、下記のような形にならずプロパティとプロパティの間に隙間が空きませんか？
それは、設定でいかようにもなります。
サブライムでしたら、Preferences>Packag setteing>CSSComb＞Setting userの箇所。
公式のポチポチ押していく系がわかりやすいかな。どちらかを選んでいくと最後に設定テキストを吐き出してくれますので、自分好みに調整してみてください。
http://csscomb.com/config