35
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

~エンジニア未経験から約1ヶ月の感想~
HTML CSS 知識ゼロ状態から研修に入りある程度コーディング練習を終えてでの所感です。
コーディング練習がもっぱらで悪戦苦闘しつつカリキュラム学習を進めているのですが
こちらの書籍をインプットする機会があったのでアウトプットとして書いています。
僕の偏見と独断による稚拙な長文ですが何卒!

CSSにおける設計とは

"完璧"なCSSは存在しない...!
壊れた時に勇気を持って修正できる設計を。というので著者が伝えたい内容
いや、設計ってどういうこと?って感じたんだけど
より良いCSSを作る上でそれに近づけるための考え方だと一応解釈しました。
じゃあ良いCSSってどういうことを目指せば良いのか?ってことになる
4つの目標がありそれに近づけばより良い!と、きっと天才エンジニアが言ったのだろう
僕は、そんなことも知らずにただひたすら書き殴っていたコードを書いてきて
最初からそんな指標があればどんなに良かっただろう!と思いました、はい...

1.予測しやすい
2.再利用しやすい
3.保守しやすい
4.拡張しやすい

これら4つがより良いCSSを満たす要素です。これに近づける考え方が設計ということですね
それぞれを部品として考えて上4つに当てはまるように考えることが近道なんや!

CSSの基本

正直これが僕にとって一番理解が深まった部分です。
なんでも基礎・基本って大事ですよね?コーディング・プログラミングで一緒です
CSS(Cascading Style Sheet)はカスケーディング・スタイルシートの略で滝のように
後で宣言されたルールによって継承または上書きされます。
この”滝”っていうのがイメージしやすくて僕は理解が深まりました!
この章では詳細度、リファクタリングが説明されていて特に詳細度のことについて簡潔に書かれています。この記事を書く前、コーディング練習をしてCSSをHTMLの通りにそれぞれCSSを書いていると迷走入りしてしまうケースが多発していた僕ですが原因は詳細度を適当にしており後々になって「これ、なんで隙間できてるの??このタグだけおかしくない?」
などありましたが!詳細度君、君を理解できていなかったよ...
CSSがなぜ滝として例えられているのかを理解するとこの詳細度というのが見えてきます。
上から流れて来て、下に着く頃には滝の水はどうなっている?途中で岩とかにあったたら落ちてくる方向も変わって来ますよね。この流れを変えているrockが詳細度なのか!?って理解してます。

設計のアイディア

難しい、難しいぞ!なので僕的な解釈で例えます!
好きな食べ物にお寿司があるのですが(聞いてない)、いろんな職人さんが全国各地で日々握っているわけです。作っているものはみんな同じですが、きっとおそらく握り方って流派的なもの存在すると思うんですよ〜
より美味しく、素早く提供するためなのか知らんけど人それぞれあります。
そう、そういう感じです!設計にもそれぞれゴールは一緒だけど最適解って全て同じじゃないよね?ということを伝えたいんです。僕には難しく感じましたが、慣れるとそれが楽になる素晴らしい考えだと思います。是非手に取って読んでください!

コンポーネント設計の実践

手法が詳しく書いてあります。頻出のものを厳選して書いてあるようで今後参考にするかも?特に参考になったのは最適化を焦らないというポイントでした。同じ処理が3回行われたら最適化をするなど3回を目安にして制作すると良いとのこと
またコンポーネント化に囚われすぎないことが大事!偉い人いわく
時期尚早な最適化は全ての悪の根源である。と格言がある...らしい

余談

まだまだ続くよこれからも、ということでCSSの設計についての参考書感想を書きました!
今後はPHP WordPressやらを学習する様です?ですがHTML CSSは基礎中の基礎だと思うので最初が肝心ですよね、地味ですがここ大事。

35
22
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
35
22

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?