1段上のCSS設計・コーディングの概念図（HCDCモデル図） - Qiita
はじめに HTML＋CSSコーディングにおいて、「どのように要素を特定してスタイリングするのか」というCSS設計上の課題に対し、「ひとつ上の視点で思考できる概念図」を紹介します。 この図を用いることで、3種類の異なるスタイリングアプローチ（OOCSS方式 / 包括要素基点方式 / BEM方式）の本質を一度に俯瞰できるため、全てを同じ枠の中で捉えられます。そして、最終的には種別や規模の異なるサイトやプロジェクトに対し、同じメソッドを使ってそれぞれ最適な設計がおこなえるようになります。 ※この記事は標準化ノウハウ公開の一環として書いています。 仕組みの概要や前提事項などについては「UltimateCoding 概要・前提事項」のエントリをご確認ください。 経緯 / 制作者中心のデータ分類 そもそもですが、HTMLとCSSは目的も仕様も異なる言語です。 HTML+CSSコーディングを一般的な視点
Atomic Designの実装例 〜Atomic Designを使ったコンポーネント指向のUI開発：Q〜 - UGAP Engineer's Blog
本稿は（序）（破）（Q）のシリーズの3番目の記事になります。 本稿では前回（破）で説明したAtomic Designを導入する際に工夫した点をふまえた実装例をJSフレームワークを使用する場合と使用しない場合の２つの場合について紹介します。 シリーズ（序）ではAtomic Designの概要 シリーズ（破）ではAtomic Designの導入に際して工夫した点 について説明していますので、そちらをご覧ください。 実装例題材 下のサイトテンプレートを題材に実装していきます。 https://html5up.net/prologue シチュエーションとしては、デザイナーからもらったデザインカンプをエンジニアが実装する想定で説明します。 コンポーネントの分割 エンジニアはデザインカンプをAtomic Designのコンポーネント単位に分割していきます。 コンポーネントの分割フロー図は（破）で以下の
CSSのコーディング設計について考える事 – YATのBLOG
CSSの設計は人によって様々で、これが正解というものは無いのですが、何も考えずに作っていくと命名の重複で悩んだり、定義したクラスの使い回しがしづらかったりといった悩みが多くなってきます。これらを防ぐためには、CSSの設計を考えながらコーディングすることが大切です。 目次 CSSで大切なこと ドキュメントの作成 CSS構成について 様々な設計手段 SASS、SCSS コードリファクタリング 最後に CSSで大切なこと CSSで大切なことは CSS Architecture でPhilip Walton氏が述べているように 予測しやすいこと 再利用しやすいこと 保守しやすいこと 拡張しやすいこと で、これらはページが多くなれば多くなるほど重要度が高くなります。 予測しやすいということは、命名規則のルールにより、どのクラスがどういった挙動するかが掴みやすく、修正作業が必要な時にソースコードを追う
APB CSS - Atomic Parts Base CSS -
What is Atomic Parts Base CSS(APB CSS) Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) Atomic Parts Base CSS(APB CSS)って何？？ Atomic Design + OOCSS + SMACSS = Atomic Parts Base CSS (APB CSS) APBCSS は Atomic Parts Base CSSのそれぞれ頭文字を取っていて、「エーピービーシーエスエス」と呼びます。 APBCSS は Atomic Designをベースに設計された「CSSアーキテクチャ」の一つとなります。 Point - Simple - Predictable - General versatility - Reusable - Maintainabl
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSS設計全盛期に学ぶフロントエンド設計
DMMで新規サービス作ったらフロントエンドエンジニアの重要性が浮き彫りになった話 - DMM Study night
