最近、CSS設計に思いを馳せることが多くなってきたので現時点での自分の所感をメモしておく。 結論 基本線CSSはBEM(block-name__element-name--modifire-name)に従って書くで良いと思う。 昨今はフレームワーク等の進化によりCSSのカプセル化ができるように…

Tailwind CSSのメリットとしてtailwind.config.jsでデザイントークンを定義し、それをユーティリティクラスとして提供して利用することでルールに基づいた値でスタイリングできるというものがあると思います。 Tailwindでは、ユーティリティクラスで使用でき…

以下のようなマークアップに対して、 <div class="container"> <article> this is short text </article> <article> this text is veeeeeeeeeeryyyyyyyyyyyy loooooooooooooooooooooooooooooooong word. </article> <article> this is short text </article> <article> this text is veeeeeeeeeeryyyyyyyyyyyy loooooooooooooooooooooooooooo…</article></div>

今まで個人のWebサービスのStyleの記述にSassを利用していたのですが、 sass-lang.com CSSにも変数が追加される等、色々強化されてきており一部の機能をPostCSSでオプトインするぐらいでも十分に思えたので移行してみました。 postcss.org 移行にあたって有…

外部のCSSファイルを限定して利用したいとき等のために正規表現にマッチするセレクターのスタイルを任意のセレクターが付与されている要素・子要素に限定するように改変するPostCSSプラグインを作ったのでメモ github.com 以下のようにpostcss.config.jsで指…

デザイントークンのグレースケールを相対的にしたいときに相対カラー構文を利用するといい感じにできそうだったのでメモ developer.mozilla.org (caniuseを見る限りfirefox以外のモダンブラウザでは利用できるようです) caniuse.com 以下はhslを利用して明る…

管理画面ではdaisyUI使うがユーザー画面では使いたくないみたいなケースでTalwindCSSのエントリー毎に利用するtailwind.config.jsを切り替えたくて、やり方を調べたのでメモ 結論から言うと管理画面で利用しているadmin/tailwind.cssの@configで利用したいta…

TailwindCSSを使うとtailwind.config.jsを使ってデザイントークンに即したユーティリティクラスを生成することができます。 tailwindcss.com TailwindCSSのようなユーティリティクラスベースでのスタイリングにすることはページ間の一貫性を守りやすいという…

display: flexで横並びにした要素をモバイルサイズの場合に縦並びにするときにいい感じのやり方を探して、少しハマったのでメモ 結論としては以下の通りモバイルサイズの時だけflex-direction: column;を指定すれば横並びが縦並びになる .items { display: f…

Vue.jsのSFCを利用している場合に極力Scoped CSSを利用してCSSの統制を取りたいと思いますが、eslint-plugin-vue-scoped-css を利用すると静的解析で強制することができることを最近学んだのでメモ future-architect.github.io やり方は簡単で公式ドキュメン…

Vue3から以下のドキュメント記載の通りディープセレクタを利用する際に::v-deepから:deepに変更になりました。 <style scoped> /* deep selectors */ ::v-deep(.foo) {} /* shorthand */ :deep(.foo) {} /* targeting slot content */ ::v-slotted(.foo) {} /* shorthand *…

あるcomponentのTransitionに合わせて別の要素もアニメーションで動かしたい時のメモ オフセット付きのサイドメニューを作成するような際に一方のトランジションに合わせて他の要素をアニメーションを設定して動かしたいと場合には、JavaScriptフックを使う…

ブランドロゴ等で目立たせるためにWebフォントを利用する際に特定の文字列だけ取得して最適化する方法をメモ 結論 textパラメーターで利用した文字を付与してあげれば良い @import "https://fonts.googleapis.com/css2?family=Ubuntu&display=swap&text=Bra…

スクロールしてTOPに戻るボタンを実装する際にスムーズにスクロールさせるためにcssでscroll-behaviorを指定することがよくあると思いますが、 developer.mozilla.org Window.scrollBy()の実行時にも指定できることを知らなかったのでメモ developer.mozilla…

Media Queries: Range SyntaxがSafariを含むモダンブラウザで利用できるようになったので公式ドキュメントの通りですが、書き方をメモ 簡単ですが今までmax-widthで指定していたものが不等号で直感的に書けるようになりました before @media (max-width: 30e…

はじめに 基本方針 実装したコード 利用例 おわりに はじめに RailsでVue.jsを採用している場合、Vue SFCのscoped cssを利用してCSS周りの統制と取りたくなりますが、RailsのView層に色々要素を書いてしまうとそれも難しくなってきます。 vue-loader-v14.vue…

以下のようなメニューを作るときに最後の要素以外にboarderを入れて区切り線をいれたいときに:notと:last-childを使うと簡単にできたのでメモ See the Pen menu-sample by madogiwa (@madogiwa0124) on CodePen. やり方は簡単で以下のような:not(:last-child…

bulmaを利用している際に@import 'bulma/bulma'をで全部入りを利用してしまうとCSSのサイズも大きくなりbulmaに強く依存してしまって外しにくくなってしまって困ってたのですがモジュール単位で利用できることを知ったのでメモ bulma.io やり方は簡単で以下…

CSS グリッドレイアウトを利用時にposition: stickyを効かせるにはstickyを指定するセレクターでalign-self: start;等を指定し高さをストレッチしないようにする必要がありますが、 coliss.com なぜかalign-self: start;を指定しても効かなかった事象があっ…