Hatena Blog Tags
はてなブログ トップ
CSS設計
このタグでブログを書く
言葉の解説
ネットで話題
関連ブログ

CSS設計

このタグの解説についてこの解説文は、すでに終了したサービス「はてなキーワード」内で有志のユーザーが作成・編集した内容に基づいています。その正確性や網羅性をはてなが保証するものではありません。問題のある記述を発見した場合には、お問い合わせフォームよりご連絡ください。
UPSIDER Techblog•1ヶ月前

Next.js × MUI × SCSS環境で、差分検知しながらCSS ModulesをTailwindへ段階移行した話

こんにちは。 UPSIDERでフロントエンドを担当しているShuntaroです。 「このスタイル、どこで当たってるんだ？」と思ってDevToolsを開くと、SCSS、CSS Modules、MUIの追加CSSを行ったり来たり。そんな状態が続くと、変更の影響範囲を読むだけで時間が溶けます。 既存プロダクトは Next.js + MUI をベースに、SCSSと CSS Modulesが混在している構成です。今回はこれらを「すべて捨てて作り直す」話ではありません。 既存のMUI/SCSS資産は活かしつつ、記述コストの削減と将来的な構成の簡素化を目指して、CSS Modulesから Tailwind …

#Next.js#Tailwind CSS#playwright#CSS設計

関連ブログ

虎の穴ラボ技術ブログ•1年前

Tailwind CSS と Atomic Design で実現する効率的な Web 開発の事例

この記事は虎の穴ラボ Advent Calendar 2024の 20 日目の記事です。 こんにちは、虎の穴ラボの古賀です。 今回の記事は React や Vue などモダンな環境に対する Tailwind CSS や Atomic Design の導入の知見が得られる内容となっていますので、よろしければご覧ください。 目次 はじめに 採用理由 Tailwind CSS Atomic Design 開発ガイドライン コンポーネント単位の外部 CSS は作らない global.css には基本何も書かない カスタムコンポーネントに className 属性を使わない 任意の値は制限しない tai…

#開発事例#Tailwind CSS#Atomic Design#CSS設計#フロントエンドエンジニア
のーとそーだこーど。•2年前

【初級編DAY23】CSS設計の基本概念からクラスの付け方をイメージしよう

一通りCSSについて学んできましたが、CSSを書くにあたり効率的かつ管理しやすい形でCSSを作りたいですよね！ そのためにはどうしたら良いか？についてここでは学んでいきましょう。 CSS設計について OOCSSについて 「構造」と「見た目」の分離 「コンテナー」と「コンテンツ」の分離 Sassでの記述の注意 BEMについて【命名規則】 補足 参考サイト SMACSSについて Sassでの記述のポイント Sassについての復習 まとめ CSS設計について CSSには色々な書き方が有ります。それを効率的かつ管理しやすい形となるよう先人が体系化して共有してくれていたりします。それをCSS設計と呼んで…

#OOCSS#BEM#SMACSS#CSS#CSS設計#Sass
Wiz テックブログ •5年前

CSS設計について

こんにちは！ 今年新卒で入社したフロントエンドエンジニアの益田です。 研修の中で特に勉強したCSS設計についてお話させていただきます。 CSS設計とは まず、CSS設計のポイントとして以下の4つが挙げられます。 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい つまり、後々自分や他人が見ても読みやすく 改修しやすいCSSを書きましょうと言うことです。 CSS設計が必要な理由 CSS設計が必要な理由としては、以下の3つが挙げられます。 バグを抑える サイトの寿命を延ばす サイトの改善スピードを速める HTMLでのマークアップやCSSでのスタイリングは人によって書き方が違い、様々な書き方が…

#フロントエンドエンジニア#CSS#CSS設計#BEM