共働き兼業ママもなかのブログスマートフォン用の表示で見る共働き兼業ママもなかのブログ子育て、家事仕事の両立を目指す全くの未経験からWebデザイナーを目指して頑張るパートで働く2児のママもなかのブログです。この書き方凄いスピード感でコーディングして行けますよね!勉強になります。1の書き方をみつけて、どっちで書くべきなのか迷っていました。1の書き方がProgateではやってなくて、たまたまググッた方の書き方がこうだったんですそれで1で書いたほうが書く時は凄いスピードで書いていけるなと思って。@ruby443n無理やり子供たち任せて1時間半もくもくした。p-で書いた部分で共通してる部分をc-にまとめていく作業した。パッケージ管理システムがそもそも分からないぞ。時間かかりすぎてて...。詰まってたのでまだまだまだまだですね...。js部分理解するのめちゃくちゃ時間かかって、それで何日もかかったから几帳面すぎたかもしれない。ああ、また無駄が多い。これだと2回で終わりで、これ以上メディアクエリの記述は必要ないですよね。ん?そーはなりませんね。個人的には納品先の都合に合わせて1でも2でもどちらでもやりますけど、単純に開発の都合だけ考えると、scssでセレクタをネストしてない場合は1の方が、ネストが深い場合は2の方が分かりやすいなぁと感じます。1はエレメントが多くなればその分、メディアクエリが増えますね。1はエレメント毎にメディアクエリを書きますが、セレクタの記述は1回のみです。レイアウト毎に修正するなら2、エレメント毎に修正するなら1ですね。2はPCSPだと2回だけですね。@ake_nyankoいずれも前時代的なノウハウだけど、それを必要とする案件なら最終的に運用する人が一番使いやすいようにしておいてあげるのがいいと思う。@ake_nyanko生CSSの手運用を前提とするなら、ブロック単位で大中小の見出しコメントをつけておいたり、ブロック単位で@mediaを挿入したりすると見やすい。@mediaで切り分ける単位は細か過ぎても大き過ぎても扱いづらい。そこがポイントっぽいですね。僕はSP、PCを同時にやることが多いので1のほうが視認性がいいって感じるんですね。@ake_nyankoみんな納品後に生cssで運用する世界線では生きていないらしい。今時そんな案件は少数派かも知れんが、確かに存在するんやで。特定のデバイスのみの修正、というより修正の順番ですね。PCやってからSPとかです。この場合、後者のほうが良いはずなんですよね。僕もそれがあるので、ずっと2で書いてました。僕だけかもしれないのですが、PCだけなどの特定のデバイスのみの修正があまりないことと、1でもそんなに肥大化してないことから、1に切り替えちゃいました。エレメントに対し各デバイスを見る必要性と、レイアウトに対し、エレメントを見る必要性を比較した場合、後者の方がメリットが多いように感じます。PCレイアウトに修正が入った場合、後者のほうがメリットがあるはず、と実感しています。1のほうがエレメント毎に、メディアクエリが指定できるので、スクロールしない範囲で、各デバイスのスタイルが見えたり、編集ができたりするのをメリットに感じてます。@tsuDoi220これ、ほんと大事。CSS設計は、これを目指すべき。SCSSコードの肥大化が、見易い・わかりやすい、に繋がるとは思えないんですけどねー。自分が書きやすいコードではなく、第三者含めみんなが見やすい・分かりやすいコードを書かなくちゃですよね。@tsuDoi220わかる。自分も経験ありっすね。修正する時とか引き継ぎすると1だと辛いっすね、やはりスリムでわかりやすいコードを目指さなければ。SCSS設計で一番大事なのは、第三者が見たときにわかりやすいかどうかですね。どっちが良いか迷うけど1で書いてます。自分は2の記述方法で書いてますね。前に外注先が1の書き方で納品してきて、修正するときやりづらかったです。特定の要素に関するスタイルが一箇所にまとまっていたほうがスタイルの見通しは良いと思う。自分は2の方がコードがスリムで作業速度も速いので、1にするメリットがわかりません。作業の流れや設計によって違うんだと思います。確かに1ってコード肥大化がデメリットですよね。@tsuDoi220この議論、見てて面白いんですが、1のほうが速いという意見に対して、自分はPCレイアウトを構築してから、SPレイアウトを構築するので、2のほうが速いんですよねー。PCSP同時に構築する人と意見が違うなー。@tsuDoi220ちなみに、これ、@mediaの肥大化は、出力されるCSSに言ってるのではなく、SCSSのほうね。CSSは、プラグインで綺麗になるので。作業するのは、SCSSなので、そっちが肥大化されちゃ困る。違うこと勉強できてただろうけど、どっちが価値的だったかはわからないし、css設計もsassもじっくり勉強した方があとあと応用が効くようになるものだから、少なくとも悩んだ時間は無駄じゃないと思うよう。あと生css触るお客さんの案件だとデフォルトでminifyにしててごめんなさいってことが往々にしてありますよね。自分は共通、SP、PCで分けていて、例えば、PCレイアウトに修正が入った場合、PCの部分だけ見れば良くて、該当箇所にすぐ辿り着けるというメリットを感じていたりするので、どうなんでしょうかねー。プロパティの差分の比較かー、んー、自分は比較するケースないなー、具体的にどんなケースか気になりますね。scssコードの書く順番とか設計とかその辺が違うと、色んなケースが出てくるってことですかねー。いう感じだと思います。少なくとも私はそうしております。1が好きでございます。scssファイル内での話だけなら、プロパティごとに差分の比較がしやすいとか、似たようなコードをコピペする時にも親セレクタごと丸っとコピペできて楽とかそういうメリットはあります。出力されたCSSで言うとあまりメリット無いです。裏側は割とやること決まってるからなぁ。前は2でしたが、某案件の社内規定が1で、そのやり方に慣れると1のやり方の楽ちんさが身にしみます。2で良いと思うんですけどねー。1で書くメリットって、あるんですかねー。pcとか書くと大変なことになりそうですよねー。子育て、家事仕事の両立を目指す全くの未経験からWebデザイナーを目指して頑張るパートで働くもなかのブログです。月別アーカイブはてなブログをはじめよう!yoshimi0511さんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。