タグ

ブックマーク / frasco.io (2)

  • BEM を使うべき5つの理由(なぜ BEM が G.R.E.A.T といえるのか) - Frasco

    CSS は、比較的簡単に使いこなすことができます。しかし、それを使い続け綺麗な状態を長期的に保つこととは全く別の話です。知らず知らずのうちに乱雑になっていきます。ありがちですよね?そんな時、命名規則の出番です。様々な選択肢がある中で私が選んだのが BEM なのです。 BEM とは何か BEM とは、命名規則の一種で、モジュラーでメンテナンス可能なスタイルを書くことができます。 BEM は、Block-Element-Modifier の略語で、クラス名は3つ[^1]のパートから成ります。実際の表記は block__element--modifier となり、Block から始まり、次に Element(アンダースコアが2つ)、そして最後に Modifier が続きます(ダッシュが2つ)。 画像1:BEM で命名されたコンポーネントの例 Block(ブロック) Block は、独立しており再

    BEM を使うべき5つの理由(なぜ BEM が G.R.E.A.T といえるのか) - Frasco
  • あなたの知らない CSS ベストプラクティス - Frasco

    ReactAngularVue.js などの一般的なフレームワークを使用してアプリケーションを構築している人にも、スタイルの追加は必要です。使用するテクノロジーによっては、スタイルを特定の記述方法で書くことが求められるからです。たとえば React なら、コンポーネントの性質上、CSS Modules を使ってスタイルを記述する方が良いでしょう。新しい CSS の機能を使いたいのであれば、 CSSNext をおすすめします。Sass や LESS のような、古き良き CSS プリプロセッサのことも忘れてはいけません。あなたは、こう思っているかもしれませんね。ツールの数だけ記述方法が存在するに違いない・・・。そうですね、その通りです。でも、基は同じなんですよ。 この記事では、CSS Modules や Sass / LESS を使用するかどうかにかかわらず、堅牢かつメンテナンス可能

    あなたの知らない CSS ベストプラクティス - Frasco
  • 1