【プログラミング独学day45】学習の方向性、CSS設計(SMACSS)

HTML/CSS

プログラミング独学、day45の学習で得たことを教えて!

・今日から「もりけん塾」に入塾、学習の方向性の見直し!

・CSS設計【SMACSS】について
それぞれ、アウトプットしていきます。

 

 

こんにちは。プログラミングでweb制作ができるようになりたいharuです。

2歳0歳の育児をしながら、22時〜0時に独学しています!

 

→プログラミング学習day45、もりけん塾day1

 

わかったことや、気付きをログに残します。

同じく初学者の人が、これをみてインプットや復習ができるように書いていきます。

 

これからの学習の方向性を相談

 

今日から「もりけん塾」に入塾しました!

今までの完全独学から→ついに現役エンジニアの方々と繋がることに成功したのです。

 

今まで、ググりつつ手探りでロードマップを作成していましたが、はじめて助言をもらうことができて嬉しくて泣きそう。。助言から、ロードマップを作り直しました。

 

目標:web制作で完全在宅フリーランスとして案件獲得

*ロードマップ(改)*

HTML/CSSプロゲート【完了】

サイト模写(WordPressテーマ「Write」)【完了】

jQueryプロゲート【完了】

jQuery(書籍:jQuery標準デザイン講座)←今ここ

JavaScript(マンガでわかるJavaScript講座)

JavaScript(書籍:確かな力が身につくJavaScript「超」入門)

jQuery・JavaScript両方でのサイト模写

ポートフォリオサイトの作成

コーディング案件で実働しつつ、PHP・WordPress・Sassを学習

※javascriptの学習方法は、マンガでわかるjavascript講座で大筋を理解してから書籍の流れが良いとアドバイスいただいた。(サイトはこちら→

これで進めてみたいと思う。また、方向性が変わったら(改)バージョン作ります。

 

CSS設計【SMACSS】について学習

ここ数日で、CSS設計についてインプットしています。

 

ここ数日の復習 〜CSS設計とは〜

 

CSS設計とはメンテナンスのしやすいCSSを書く手法のこと。

 

CSS設計の考え方に、「コンポーネント設計」がある。

CSSをひとつ変更や加筆したときに、ほかの関係のないCSSに影響を及ぼさないように「分離」して設計すること。

 

このコンポーネント設計を実践しやすくしたアイディアが5つある。

 

1つ目の「OOCSS」という手法。

 

これは、

・見た目と構造のルールを分離する →ex) btnという基本クラスを使い回す

・場所に依存しないセレクタをかく →.ex) .logoをヘッダーでもフッターでも使う

 

といったように、似たようなコンポーネントをひとつのクラスにまとめて、それらを使い回すという考え方。

 

ーーーーーーここまでが、昨日までの復習ーーーーーーー

 

CSS設計のアイディア2つ目「SMACSS」

ここからは、今日の学習内容です。

 

2つ目の「SMACSS」です。

 

これは、CSS設計を次の5つのカテゴリに分けておこなう考え方

 

Base:サイト全体のフォントサイズ・カラーなどのスタイル

→ html要素をセレクタに指定するルール

 

Layout:ヘッダーやフッターなど大枠のスタイル

→ l-(レイアウト名)で書くルール、IDセレクタは許容されているけどNotgood

 

Module:あらゆる再利用可能なパーツ、ボタンや見出し、リンクなど

→ 親要素から独立させ、HTMLへの依存を減らす。

特に接頭語の指定はないけど、m-(),mod-()などをつけてもいい。

 

State:javaScriptによる制御などに関係する、状態をあらわすルール

→ is-(状態名)で書くルール

例えば、display:noneを適用するための.is-hiddenというクラス名

また、Stateには「mediaクエリ」も含まれ、stateの大枠の中に記載する

 

Theme:テーマを切り替えるような機能が求められるときに使うカテゴリ

→WordPressのテーマのようなイメージ。ユーザーがテーマを変更すると、ヘッダー画像などが切り替わるような場合。

 

SMACSSにおいて一番重要なmoduleの命名規則について深堀り

 

例えば、こんなコードがあったとき、CSSのセレクタはこれでは隙がある

<!--html-->
<body>
  <div class="contents">
     <h2 class="contents-title">タイトル</h2>
     <p class="contents-text">SMACSSの勉強中です</p>
  </div>
</body>


/*css*/
.contents p {
  font-size: 18px;
  font-style: italic;
}

親クラスのcontentsの中から<p>が抜けて、別のdiv要素に入ってしまった場合は無効になってしまうから。

 

/*css*/ 
.contents-text {
   font-size: 18px;
   font-style: italic; 
}

このようにHTMLへの依存を減らすことで、メンテナンスしやすいCSSを書くことができる。

 

 あとがき

学習ログを書いてみたのは初めてだけど、かなり時間がかかった。。jQueryの実装練習は、このあとやりますがログに残せず。

 

ログを書くことが目的になってはいけないので、なるべく簡潔に残せるように工夫していこう。

亀のスピードでも積み上げます。

 

*今日の工夫*

・コードを簡単にブログに入れられるように設定した。

→Wordpressのプラグイン「Crayon Syntax Highlighter」を入れた。

これが入っていると、記事執筆の画面からコードを入力できる。

 

・アウトプット済みのtwitterを引用した

 

今日は以上です。これから jQueryの実装練習やります。

 

Thanks:もりけんさん(@terrace_tec)

もりけんさんのHPはこちら→ 武骨日記