1行？複数行？CSSの記述方法

いつもお世話になっております。

CSSの記述方法は、2パターンあると思います。

CSS
1/* 1行で記述 */
2.hoge { width:100%; margin:0 auto; }
3
4/* 複数行で記述 */
5.hoge {
6 width:100%;
7 margin:0 auto;
8}

私の勤務先では、1行がスタンダードなのですが、
実際のところ、どちらが良いのでしょうか。

恐れ入りますが、よろしくお願いいたします。

行動規範の内容に同意します

回答5件

どちらで書いても問題ないですが、圧倒的に複数行のほうが見やすいので複数行で書きます。
minifyすればどのみち改行は消えるので、作業する方で統一すればいいと思います。

投稿2017/08/24 05:59

T_sa

総合スコア353

自動生成ならどちらでもいいです。少なくとも仕様書にはどちらの記述もできてきます。
ただ、人がメンテする場合、何が何でも1行で書くというのは、プロパティが増えた場合に見辛くならないでしょうか？

投稿2017/08/24 05:46

x_x

総合スコア13749

例えば何十個も指定することがあっても1行なのでしょうか？
backgroundなど長いプロパティを記述する際は横長になってきつそうですね・・。

私の場合は急いでいるときは1行で書いてしまいますが、動作確認できたらあとで複数行に直す癖がつきました（インデントも揃える）
CSSフレームワークのmin仕様のような場合（容量軽く・変更もほぼ起きない想定）を除いて複数行にした方が読みやすいと思います。

投稿2017/08/24 05:57

m.ts10806

総合スコア80888

複数行で記述するほうが可読性に優れていると思います。
1行では、1つのセレクタに記述するプロパティ・値が増えると可読性が低下するので、避けたほうがよいかと思います。

css
1/* 1行の場合 */
2.example { background: url(assets/images/example.jpg) top left / 100px 100px no-repeat #fff; margin: 10px 20px 30px 40px; padding: 10px 20px 30px 40px; }
3
4/* 複数行の場合 */
5.example {
6  background: url(assets/images/example.jpg) top left / 100px 100px no-repeat #fff;
7  margin: 10px 20px 30px 40px;
8  padding: 10px 20px 30px 40px;
9}

ただし、どちらのほうが書きやすいかは個人差があるので、チーム開発を行うのであれば、コーディングスタイルを自動的に統一できる仕組みを取り入れられたほうがよいかと思います。

CSS のコーディングスタイルを自動整形するツールとしては、CSScomb が有名です。

投稿2017/08/26 07:34

編集2017/08/26 07:42

syuus

総合スコア403

ベストアンサー

レンダリングする側では１行でも複数行でも関係ありません。
(ただし複数行＝余計な改行コードが含まれるため処理速度には影響するでしょう)
管理する人間が読みやすくするためだけの理由で複数行にするだけなので、
見辛くてよければ１行で書けばいいでしょう。

自分の場合は下記の様な時あえて１行で書きます。

CSS
1.hoge1{width:10px;background:red;}
2.hoge2{width:20px;background:blue;}
3.hoge3{width:30px;background:yellow;}
4.hoge4{width:40px;background:black;}