• ミュージアム　

Webコーディングで悩むこと。

自己紹介

はじめまして、くじらで働いていますトラカッパです。
基本無趣味なのですが、Webコーディングは趣味？として、それなりに長い間勉強しています。

一応、下記が私のポートフォリオです。
http://sawakei.sakura.ne.jp/portfolio/
コーディングをしていますと、いろいろ悩んだり、思う事があるのですが、最近よく感じている事について書かせていただきます。

CSS難しい…

CSSはWebサイトの見た目を制御する「スタイルシート言語」と呼ばれるものです。このCSS、多くの人が習得できるように、敷居を下げて設計されたという話を聞いた事があります。

確かに、文字の色を変えるだけなら、1行コードを書くだけです。

<!--html-->
<p>このテキストを赤くする</p>

/* css */
p{
  color:red;
}

ところが、CSSをたくさん書いていくと、ここのテキスト赤くしたいのに、変わらない…どうしてなんだとっていう事に出くわします。

<!-- html -->
<div class="wrap">
  <p class="color-text">このテキストを赤くする</p>
</div>

/* css */
p{
  color:red;
}

上記の例はわかりづらいのですが、CSSが簡単かつ難しいのは「詳細度」の概念だと思います。

詳細度とは

詳細度(MDN)のページですが、うーん俺にとって説明が難しいです。
点数として考えて、点数が多いものが適用されると考えてみます（点数で考えるのは厳密には間違い)

idは一つ使うと100点、classは10点、pなどのタグは1点と計算してみます。
#wrap p 100＋1 = 101点　→　点数が多いのでこちらが適用
.color-text 10 = 10点
(ただし、classを11個つなげれば110点になるからid一つの100点より高くなるので適用されるという考えは間違い)

CSSの難しさに対抗するためには

CSSはこの詳細度の概念や、適用される範囲（スコープ）がグローバルな所が、ある意味敷居を低くし、反面難易度をあげていると思います。

そういった難しさに対して「CSS設計」という考え方をで対処します。
（「BEM」「FLOCSS]「PRECSS」など）

と言ってもいきなりこの考え方は敷居が高いかもしれません。

classにスタイルを指定する事を意識すれば、かなりCSSは扱いやすくなるのかなと思っています。

ちなみに私はいまだにCSSが良くわかりません…。

torakappa

torakappaが投稿する記事の一覧です。