SaaS・システム・CMSなどのリセット、デフォルトCSSに影響せずに構築する方法

  • このエントリーをはてなブックマークに追加

昨今SaaSやCMSは進化して、使いやすくなってきたり、機能・レイアウトが簡単に行えるようになって、かなり便利になったなぁと感じるわけですが、それらというのは、もともとのCSSやJavaScriptなどがあって、実現されていることも多いのです。

どれだけ、裏ですごいシステム・プログラムが動いていようが、表に表示されるものが意図しない形になってしまっていては意味がないのです。

それをしてしまうのが、今までの慣例・習慣。
なんの慣例や習慣化と言うと、CSSにおいてはレイアウトやデフォルトの見てくれを実現するためにいる。それがどんどん複雑化してきているため、コンフリクトする可能性が高くなってきて、またコストがかかる時代になったなぁと困っています。

ただ、こういったことは考え方を変えることによって、効率的に流れでいままでのように作業することが可能。

どう考えるか?

リセットされるCSS。マージンを取ったりリストマークを消したりします。構築前にこれを用意しておくと大変作業が楽です。それも慣れてしまうと当たり前になるわけですが。

さて、リセットされるCSSは自前で用意したものだけで構築するのを前提にするのならば、問題ないので、今までの通り使えばいいのですが、WordPressだったりfutureshopだったりのSaaSでは少々困った問題が起こるのです。

WordPressのGutenberg

WordPressにGutenbergが搭載されました。記事の編集画面にレイアウトなんて言うメニューが付いてとても便利なのですが、これは対応しているテーマでないとレイアウトが実現できません。レイアウト用のCSSが必要なのです。これを読み込むためには、functions.phpに

add_theme_support( 'wp-block-styles' ); 

と記述します。
これを記述するだけで、CSSが読み込まれるようになるのですが、リセットもしたいところは残っています。どうしましょう?Gutenbergと被らないクラス名を用意して、その中のタグだけリセットすればいいのです。

.common-partsとでもクラス名を割り当てて、今までのheaderやfooterにクラスを割り当てて、そこの中のulなどをリセットすればいいのです。共通部分なんて言うものは、案外少なかったり、これが慣れになると大して大きな問題ではなくなるため、考え方や柔軟な発想にもっていくことによって、ストレスなく構築を進められ、Gutenbergのレイアウトの恩恵も受けられます。
Gutenbergのスタイルは単純なクラス名などでできているため、非常に優先順位が低いため、まずはそちらを読み込んだ後に、自分のリセット・共通CSSで上書きしてうまく使うのが良さそうです。Gutenberg側でリセットされていないところをリセットすればいいだけですが、探すのが面倒ですよね?先程話したとおり、他のクラス名と被らないクラスを付与して、その中のタグをリセットするだけ。それだけなのです。

Gutenbergのレイアウト用CSSとコンフリクトしたり影響が出ないように構築する方法

futureshop commerce creator

FutureShop2は、タグは全くリセットされていませんでした。それぞれのシステムのパーツに対して、リセットしてあり、色・文字の大きさなどがついていました。マージンなどはデフォルトでしたが。
FutureShop2では、共通CSSのコンフリクトというのは、#xxx .xxxといった形式にしておけば、全く問題なかったのですが、futureshop commerce creatorではそうもいかなくなりました。※スターターテーマなどのリセットが行われているテーマに限る
ベースに合わせて、上書きするならまだしも、HTMLタグのリセットはいただけません。ただ、これも考え方次第です。

futureshop commerce creatorのデフォルトのCSSをまずは読み込んでおいた後に、それをベースに組み立てるだけです。リセットは、WordPressと同じく、被らないクラス名の中のタグに指定しておけば問題ないのです。
commerce creatorのページに使用される、見出し・テーブルなどはうまくスタイルが適用されています。リセットで上書きしないようにしましょう。

どうしても、futureshop commerce creatorのスターターのCSSが気に入らないのであれば、スケルトンがあります。スケルトンテーマはCSSが適用されていないため、全てあなたの手で一からレイアウトすることが可能なのです。

futureshop commerce creatorのレイアウト用CSSとコンフリクトしたり影響が出ないように構築する方法

システム・リセットスタイルなどに影響を与えないようにリセットする構築方法

reset.cssなどを使って、リセットすると構築の効率性が上がる。

よくあるのが、ulやtableなどのスタイルのリセット。これはデフォルトだとそのままだとあまり美しくないため使用できない。そのため、予めいつもの作業にはひな形・リセットCSSを使ってそこから作業スタートとなる。

ただ、システムなどで使用されるスタイルに影響が出てくると困ると言ったことも。タグにリセットされる値を指定していたが、システム側のデフォルトスタイルとコンフリクトすると、そこは問題だ。上書きの上書きも面倒だし。

シンプルに考えると、共通パーツであるヘッダーやフッター、あるいはメインなどに差し込むメニュー等のボックスに他とはかぶらないclassを加えてあげることで解決する。面倒そうだが、冷静になって考えると、上書きだのコンフリクトだの考えるよりはシンプルかつスマート。

さいごに

構築しやすいこと、効率的なこと、ここをまずは目指すのです。誰になんと言われても自分が最も構築しやすく、効率的に早く簡単にシンプルに構築できるような仕組みづくりしましょう。SaaS・システム・CMSなどのリセット、デフォルトCSSに影響せずに構築する方法は、考え方を変えること・今までで良ければそれをうまく活用することに重きをおきましょう。