タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

cssと設計に関するdencygonのブックマーク (5)

  • BEMによるフロントエンドの設計 | 第1回 基本概念とルール

    BEMによるフロントエンドの設計 第1回 基概念とルール この記事ではフロントエンドの設計方法「BEM」を紹介します。第1回目はBEMのもっとも基となるBlock、Element、Modifierの概念と、class名の命名ルールを解説しています。 はじめに 最近フロントエンド界隈で、『BEM』という言葉を見かけることが増えてきました。BEMとは、Block、Element、Modifierの略語です。Webサイトのコンポーネント化のためのフロントエンド設計方法のひとつで、厳格なclass名の命名ルールが特徴的な手法です。 第1回は、BEMをまったく知らない方向けの入門編です。 なぜBEMが必要なのか 私たちはHTMLCSSを使うことでしか、Webサイトを作ることができませんが、HTMLCSSにはプログラム的な機能が備わっていません。そのために、フロントエンドエンジニアは次のような

    BEMによるフロントエンドの設計 | 第1回 基本概念とルール
  • BEMによるCSS設計の方法を解説。命名規則から使い方まで

    BEMとは BEM命名規則など、CSS設計の考え方のアイデアのことです。(構成案) BEMBlock, Element, Modifierの頭文字をとったものです。 BEM 公式サイトの文章を引用します。 BEM Quick start BEM (Block, Element, Modifier) is a component-based approach to web development. The idea behind it is to divide the user interface into independent blocks. This makes interface development easy and fast even with a complex UI, and it allows reuse of existing code without copyin

    BEMによるCSS設計の方法を解説。命名規則から使い方まで
  • CSS設計における3大メソッド[OOCSS][BEM][SMACSS]

    こんにちは。マツコです。 突然ですが、CSS設計はとても重要なものです。 一定のルールがないと、コーダー各々が違う考え方でスタイルづけをして余計なCSSが増えてしまったり、人でなければ分からないルールが発生してしまい、メンテナンスがしにくくなってしまいます。 そのため、以下のことを強く意識してCSS設計を行うことが大切だと言われています。 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい 今回は上記の目的を達成するヒントとなる、著名なCSS設計手法である「OOCSS」「BEM」「SMACSS」についてお話したいと思います。 概要 Object Oriented CSS(オブジェクト指向CSS)の略。 オブジェクト指向に基づいて、考案された設計手法です。 Yahoo!のNicole Sulivan氏によって開発され、Twitter(とBootstrap)やGithub、Youtub

    CSS設計における3大メソッド[OOCSS][BEM][SMACSS]
  • BEMが破綻する理由

    ここ数年、CSSも設計の重要度が高まり、様々な設計手法が出てきています。 「OOCSS」「SMACSS」「BEM」などが代表的な手法で、これらの考え方をベースにした派生版も優秀なものが出てきていますよね。 弊社ではBEMをベースにFLOCSS等を交えたCSSガイドラインを使用しています。 良い面も多いですが悪い面もあり、導入が失敗だったと感じたこともありましたが、いまは慣れたこともあり使用しています。 今回はBEMが破綻するケースを挙げてみたいと思います。 あくまでも慣れ、スタッフの認識度合いによりますので参考程度に読んでみてください。 デメリット 1. BEMの記述法、概念 ここが曖昧なままだとCSSの設計はすぐに破綻します。 まずは以下のような情報に目を通すことが重要ですね。 https://en.bem.info/ https://csswizardry.com/2013/01/mi

    BEMが破綻する理由
  • フロントエンドの命名や設計の基本と自分の現在の設計 - Qiita

    上記の他に以下のような規則も必要に応じて設けると良いでしょう。 接頭辞(プレフィックス)を必要に応じて付ける(例:is-xxxx) 単語は略語を使用しない(NG例:cnt, hdg, tbl) 参考 変数名の命名規則/**ケースの使い分け 命名方法 命名規則が決まればそれに則って命名すれば良いのですが、どういう単語を使えば良いのか指標がほしいところです。 英単語がすぐ出てこないような時はネーミング辞書 Codicを使ってみると良いです。命名の参考としては良いツールだと思います。 目的や内容によっては汎用的に使える英単語も存在します。例えば、レイアウト用の要素としてcontainer, row, col。ジャンル・業界別の要素としてabout, results,productsなど。 レイアウト用のclass名や汎用class名に関してはいろんなCSSフレームワークのコードを見て研究すること

    フロントエンドの命名や設計の基本と自分の現在の設計 - Qiita
  • 1