WEB部門での実務経験

実務経験37日目、エディタでおすすめのvscodeの拡張機能

 

「コーディングのスピードをあげたいな〜」と思っていてTwitterを何となくみたらこんなツイートがありました。

「ん、scss?」と思いすぐググったらありました、cssを短縮して書く方法です。

 

コーディングでの私が思うscssの使い方

scssは何度も使う色や横幅や縦幅のサイズを変数として宣言できたり他のファイルから変数を持ってきたりできます。

ですがLPを作るときに変数の宣言や他のファイルから変数を持ってくるのは必要ないと思うので使わなくていいと思うし私は使っていません

必要になったら使えばいいです。

だから私が必要と思う書き方だけ説明しますがprogateでscssの使い方を解説している内容は使う機能はそんなにないので見なくても大丈夫です。

 

親要素と子要素の関係を見やすくする

見慣れたcssだと親要素と子要素の関係が見えにくいです。

また私はよくやっていたのですがセレクタに対するcssを指定したのに下の方でまた同じセレクタに指定していました。

cssの2度付けです。

でもscssで書いてからは親要素と子要素の関係が見えやすいのでどこにcssをつけているかが分かり同じセレクタにcssの2度付けをすることがなくなりました。

↑でitemsクラスの中に入っている子要素が分かりやすいです。

 

子要素にcssを当てる時ですが親要素の中に書くので子要素が増えれば増えるほどコードが減ります。

親要素の直下の子要素やnth-childを使う時は↓になります。

 

scssを使うときの注意点

親要素に対して子要素はインデントしないとcssが反映されないので注意しましょう、↓とします。

 

scssをどうやって使えるようにするか

vscodeのプラグインはいくつかありますが私はLive Sass Compilerを使っています。

使い方は↓で説明しています。

vscodeでコーディングする時の拡張機能
実務経験44日目、vscodeでコーディングする時の拡張機能 LPのコーディングをする時に効率的にできた方が時間の短縮とストレスが減ります。 実務でずーっとコーディングしている...

scssを使う時に困ったこと

HTMLファイルにscssを読み込むための記述をしないといけないのですがネットで見つけることができなくて悩んだ結果「もしかしてcssと同じでは?」と思いやってみたらうまくいきました。

私はcssフォルダの中にstyle.scssとstyle.cssを置いています

scssの拡張子ですが「style.scss」みたいになります。

 

クラスの命名規則をつけるとコーディングスピートが上がるしコードの保守性も上がる

クラスの付け方のルール(命名規則)でBEMというのがありますがこれをすると最初は慣れてないせいでコーディングが遅いですがすぐにもっとコーディングスピートが上がります

実務経験42日目、命名規則BEMでコーディングすると早い
実務経験42日目、命名規則BEMでコーディングすると早い 命名規則BEMでコーディングすると早くなる コーディングをしていると同じ内容が何度も出てくる事がよくあります。 特に商品ペー...

 

BEMとscssの組み合わせはこういう時にご利益を実感できる

それとコーディングしている時はクラスを見たらどこに付けたクラス名か分かりますが数ヶ月経つと忘れますよね。

その時に「これはどこに対して付けたクラス名だろう?」と悩む時間が減るしscssだとかたまりで書かれているので編集も楽になります

実務でLPのコーディングをするとキャンペーンで割引するからコードを少し変えたりscssの編集をしないといけない時にありがたさがよく分かります

LPが長い時に特に便利さを実感できるはずです。

コーディングスピードが上がるのとcssがすっきりして見やすくなるのでcssを使っている人はぜひscssを使って下さい。

「エディタはvscodeを使ってないけど」という人もいるはずですがこの機会にエディタを変えてみてはどうでしょうか?

vscodeのシェア率は圧倒的です。

2019年度のJavaScriptを使う人のエディタランキングですが飛び抜けてますよね

 

拡張機能もあるし無料だし使いやすいからだと思います。

YouTubeでもおすすめ動画があります。