２日目 基本のキ（小トピック）

今日の学び一覧

・VSCodeの作業が効率的になるいくつかの知識
・チェリーピック
・CSSファイルの上に絶対つけなければいけないもの
・HTMLのPタグ乱用禁止
・Bemはブロックが省略化

VSCodeの作業が効率的になるいくつかの知識

【ワークスペースについて】
よく使うディレクトリをワークスペースとして保存しておくことで、
いつでも作業できる！

こちらの解説がわかりやすい。VS Codeのワークスペース

フォルダ→フォルダーをワークスペースに追加
でワークスペースにすることができる。

【VSCodeの作業中ファイル一覧をだすショートカット(Mac)】
Cmd + Bでバビュンとでる。隠す時も同様

チェリーピック

SourceTreeにて、ブランチを切ってからコミットしないといけないのを、
ブランチせずにmasterでコミットしてしまった、、、

【解決方法】
間違えたコミット部分を右クリックで削除後、コミット。（一個前に戻す）
作業したのに反映されてない部分を右クリックで、チェリーピックする。
するとその部分だけでブランチが切れる！

CSSファイルの最初の行に必ず入れるもの##

それは、、
キャラセット。

@charaset 'UTF-8'

を必ず入れる。

HTMLのPタグ乱用禁止##

<!-- ダメな例 -->
<p> 総天然色の青春グラフィティや一億総プチブルを私が許さないことくらい,</p>
<p>オセアニアじゃあ常識なんだよ！</p>

pはparagraph,つまり段落なので、
まとまっているものを個別に分けるのはナンセンスらしい。

<!-- 好ましい例-->
<p> 総天然色の青春グラフィティや一億総プチブルを私が許さないことくらい,<br>
オセアニアじゃあ常識なんだよ！</p>

Bemはブロックが一部省略可

まずはおさらい(MindBEMdingの表記)。

<nav class="container">    <!-- Block -->
 <a href="#" class="container__btn">OK</a> <!-- elementはで表現 -->
 <a href="#" class="container__btn--yellow">OK!</a> <!-- Modifierは--で表記-->
</nav>

場合によっては、ネストしまくるとクラス名が蛇のようになる。

<div class="container__mainlist__item__cover__text">
 <!-- ながっ -->

なので、省略が可能である。省略する時は、
接頭辞にアンダーバー一つを入れる。

<div class="container">
   <div class="container__main">
      <div class="container__main__block">
         <div class="_block__icon">     <!-- 省略！ -->