2024.08.01 2024.08.03

[Web制作日記#10]CSS設計完全ガイドを6割ぐらい読んだ

ベアさん

記事内に商品プロモーションを含む場合があります

日記を書き始めて10日目が経過しました！(個人的な体感は、30日ぐらいなんやが…笑)

そんな今日は

ベアさん

CSS設計完全ガイドを6割ほど読んだので、中間報告

をする記事にしますね。

また、日常ネタとして「時間とツールの見直しをした」って話もするつもりですよー！

興味がある人は、ぜひ最後まで読んでいただけると嬉しいです。

Contents

CSS設計完全ガイドを6割ほど読んだ
- (忖度なしの)正直レビュー
- ちょいアウトプットしてみる
時間・ツールの見直しをしたよ
- 時間の見直し
- ツールの見直し
次回：Youtube見るのやめた効果がえぐい！

CSS設計完全ガイドを6割ほど読んだ

リンク

↑の本を6割ほど読み終えました。

中間発表的な感じで、

(忖度なしの)正直レビュー
ちょいアウトプット

の2つを書きます。

結論から言うと、「普通に難しいけど、網羅性や実例があって丁寧」な本ってのが途中までの感想で、割と評価高め？です。

それでは、レビューからいきましょう↓

(忖度なしの)正直レビュー

お堅い、普通に難しい笑

まず、本を開いて、パラパラめくって思ったのが

ベアさん

あ〜こいつは難しいやつやな〜笑

そして、実際に本を読んでみると案の定難しくて、横文字も結構並んでます。(一度置いてかれると、大変です…)

どの辺が難しいかというと

難しいポイント

一番は横文字が多くて、取り残されること
文章量が多い
内容が詰まってる

などが挙げれます。

とはいえ、難しいのはデメリットだけじゃなくて、良い面もあると思います。以下では、どっちかと言えば良い点を書きますね↓

網羅性とかは星５

まず、何よりも

網羅性があって、これ一冊仕上げたら良いのが伝わってくる

です。さすが、「完全ガイド」とタイトルにつけるぐらいですね。

ベアさん

また、網羅性があるので辞書的な使い方をしても良いなと…

僕、一応エンジニアとして実務も積んでるのでわかるのですが、網羅系の本は「大事な部分を抜き取る力」が必要と思ってます。

なぜなら、網羅系と言いつつ

よく使うのは2割ぐらい
同じことを繰り返してる

ような本が多く、この本もそんな印象を受けましたね。

この本につられて僕もお堅いことを言ってますが笑、大切なことかな〜と思って共有してみました！

実例付きでわかりやすい

この本、割と実例の部分が多くて

本の構成

最初に理論を解説して
実務でどうやって使うか？を丁寧に解説する

ような構成の本でした。

僕、最初の理論が全然わからないまま進んでいたのですが、さすがに実例ばっかり見ていたらなんとなくわかってきました。

そして、ちゃんと理論の部分を読み返したら…

ベアさん

え？スイスイわかるんですけど？

って感じになりました。

また、BEMという技術がこの本のミソだと思ったので、忘れないうちにちょいアウトプットしておきます↓

ちょいアウトプットしてみる

CSS設計の手法の一つにBEM(ベム)というのがありまして、個人的に好きなのとよく使われてるみたいなのでアウトプットします。

BEMを構成する要素の全体像は

BEMを構成する要素

Block
Element
Modifier(モディファイア)
(プラス)Mix

という3+1で構成されています。

悩む人

なんか、よくわからん英語が並んでるぞ

と思った人、完全に本を読み始めた頃の僕と同じです笑

それぞれを簡単に解説すると

簡単に解説すると…

Block→他でも使いまわせる要素の塊
Element→Block内でしか使えない要素
Modifier→BlockやElementの状態を説明する
Mix→レイアウトを整える

って感じで、文字じゃ難しいのですが割とシンプルですよ。

また、BEMには命名規則があります↓

block-name__element-name_modifier-name

ベアさん

・BlockとElementの間に_が２つ
・ElementとModifierの間に_が１つ
・名前の間には-が１つ

って感じになるよ！

MindBEMbingという命名規則なら、「ElementとModifierの間に–が2つ(＋キーを省略)」っていうのがあるみたいです。

プロジェクトに応じて使い分けしながら、BEMを使いこなしていきたいですね！

時間・ツールの見直しをしたよ

日常ネタなのですが「時間・ツールの見直し」を時間をとってやりました。

時間の見直し

僕いっつも

ベアさん

時間がない…時間がない

と言ってる割に、無駄な時間が結構多かったので。

具体的にやったことは

現状の時間の使い方を洗い出して
無駄な時間を削減する

っていう、シンプルなやり方をしました。

その結果として

無駄な時間を削減するために…

Youtube見るのやめた
Googleアプリを削除した
通知見る時間を少なくした

などを行ったのですが、Youtube見るのをやめるのが８〜９割で効果抜群です。

自分の意思で使ってない時間はお金もそうですが、削除するのがおすすめです。(精神的にも穏やかな日常になりました)

ツールの見直し

使用しているツールをうまく使えてない感じがあったので、時間のついでにツールも見直すことにしました。

主に見直したのが「タスク・スケジュール管理」で、最終的に

使用するツール

メモ帳→1日のやることを朝に書く
Chatwork→仕事関連のタスクを入れる
Googleカレンダー→個人のタスク・複合スケジュール

という感じにしました。

これでうまくタスクを管理できると良いのですが…比較的忙しくない今から頑張ってやっていきます。

ツールの見直しは以上です！皆さんも参考にしてくださいね・

次回：Youtube見るのやめた効果がえぐい！

次回は「Youtube見るのやめたら…良い効果があった」をテーマに記事を書きます。今日の記事で、時間を見直したので。

仕事の生産性が上がるし、脳がすっきりするし…良いことしかないです。

お楽しみに！

P.S

11話書いたよ↓

[Web制作日記#10]CSS設計完全ガイドを6割ぐらい読んだ