清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog

フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする

[securecat]

だーしまパイセンの丁寧な記事。隙がない。さすが。

[yasu-log]

共通のヘッダーは鬼門。大手サイトだと、jQueryや古いJS/CSSライブラリ依存、font-size: 62.5%; 強制、PHPで実現･･･等々。VueやReactで簡単に取り込めると思ったら大間違い。なので、この記事の取り組みは100点満点で素晴らしい

[otoan52]

どのリセットCSSが使われてるかわからない状況ってなかなかつらみだなぁ。ちょっとだけ経験あるけど…。

[sugarte]

游ゴシックを使うときの指定方法、スキップリンクを真似したい。

[toblog]

この人ほんとすごいよな

[mayumayu_nimolove]

62.5%昔使ってたけどあまり意味ないから使わなくなった。BEMなんかもなんでアンダーバー2個なのか、1個でいいじゃんとか改良に終わりはないよね

[klim0824]

scss使う前提なら、`html { font-size: 62.5% }` 使わずに、pxをremに変換するmixinやfunctionを使った方がいいと思っている。例：https://dev.to/nikolab/convert-px-to-rem-using-sass-3-methods-4ep2

[respectbookmark]

地味だけど、コードやUIを本当の意味で顧客と組織のものにするために大事なことが詰まっている。

[sakaki0214]

パイセン素敵…

[kisiritooru]

清く正しく「サービスを提供するブッダ」を宗教する

[kenzy_n]

共通ヘッダ・フッタのお約束事

[daruyanagi]

いろいろあんだなぁ