今流行りのSMACSSについて基本的なことをまとめてみました。 - Qiita
はじめに CSS設計で昨今非常に重要視され、多くのサービスで取り入れられている設計方法がSMACSSです。個人的にこのSMACSSを用いてCSS設計をすることがあったので、基本的な考え方や構造についてまとめてみました。 SMACSSとは 長期的にCSSを保守するための考え方に「HTMLの構造に依存しないCSS設計」というものがあります。これを体現しているのが、まさにSMACSSといえます。また、CSSをコンポーネントとして再利用できるものとして構築する概念です。 主な構造は以下の通りです。 base layout module state theme それぞれ非常に便利なもので、使い勝手が良いのですが、すべてがどのサービスにも使えるものではありませんので、各々サービスにあった使い方をみつけてください。 base そのサービスやプロジェクト、サイトにおける要素すべてのデフォルト値を定めたもの
CSS 設計における Modifier の記述ルールの最適化 - Qiita
みなさんは CSS 設計をするとき、どの設計方針を採用してますか？ 自分も SMACSS、BEM、FLOCSS と渡り歩いて来ましたが、どうにもしっくり来ない点が Modifier の記述ルールです。 ここでは自分の試行錯誤の過程と結果を公開してみました。 BEM 記法 クラス名に構造情報を持たせることで、要素のモジュール化を強要して定義の破綻を防ぐ、シンプルかつ非常に強力なルールなのですが、下記の例のように HTML 側のクラス記述が冗長になるのがデメリットです。 .local-menu { … } /* Block */ .local-menu--category { … } /* Modifier */ .local-menu__title { … } /* Element */ .local-menu__list { … } /* Element */ .local-menu__l
最強のCSS設計（）のヒントになりそうな考え方いろいろ - Qiita
#自前で最強のCSS設計（）を構築する 今やCSS設計という言葉自体がかなり浸透して、OOCSS・BEM・SMACSSといった設計方法を 実際に使ってる方も多いと思います。 上記のようなCSS構成案を既に取り入れている場合でも、 各設計方法の良いところを取り入れたい 細かいところで融通が利かない もう少しわかりやすく簡潔にしたい なんて感想を持っている方は結構いるんじゃないでしょうか。 これから紹介するものは、著者が実際に使用しているものもありますので、 新しいCSS設計を構築したり、アレンジする際のヒントにしていただければ幸いです。 ##設計概念について 様々な概念がありますが、ここでは代表的なものを取りあげます。 同じ意味合いを持つ概念でも、CSS構成案ごとに名称が異なっていたりしますので、 名称の違いだけ混同しないように注意が必要です。 ##ベース ブラウザのスタイリングをリセットし
CSS設計 BEMを使うとき - Qiita
参照元画像 はじめに 良いCSSを書く方法として、CSS設計がいくつかあります。 その前に、そもそも良いCSSとは？ ・予測しやすい ・再利用しやすい ・保守しやすい ・拡張しやすい とのことです。 で、良いCSSを書くためのCSS設計の1つとして妖怪人間BEMがあります。 もちろん良いCSSが達成できるなら、必要なし 今回はCSS設計ルールの1つであるBEMについてまとめてみました。 BEMとは BEMとは、Block、Element、Modifierの略語 Block ⇒ 塊 Element ⇒ 要素 Modifier(kyeとvalueで表す) ⇒ 状態（変化） なぜBEMを使うの？ ・長期間メンテナンスできる設計で、ファーストバージョンの開発をすばやくするため ・チームのスケーラビリティ ・コードの再利用性 私が使う理由は、ブロックの再利用があるかも！？と思った時にBEMを使用しま
【CSS設計】SMACSSとBEMを少しアレンジ - Qiita
全てがアレンジではないが、ところどころ変えてみた。 自分のための覚書。 レイアウト .l- を使う。 また、id でなく class 名にする。 （同じ部分を他の頁でも使いまわしたりすることもあるので。） BEM Elementは__じゃなく_で書く ただし、Modifierの -- を - にはしない。 理由 誰かが書いたコードを追記する際の混乱を防ぐため。 自分は名前をつけるときsessionDetailとキャメルケースを好んで使うが、人によってsession-detailのように-を使うことがある。 （_も可能性としてはあるが、-よりは低いように思う） 長い要素名は短縮する contentBox_nameArea の下 name kana 要素を追加するとき。
ざっくりCSS設計 - Qiita
色々なCSS設計 下書き削除したいので、適当に書いてます。あてにしないでね。 OOCSS SMACSSやBEMの原点となったもの。 決まり事がゆるく、CSSの命名規則など決まっていないので各プロジェクトで決めていく必要がある。 決まり事１：ストラクチャーとスキン CSSを「ストラクチャー（構造）」と「スキン（外観）」に分けて、それを組み合わせて１つのオブジェクトを作る。 ボタンを例にすれば、「ストラクチャー」が基本のボタンの大きさなどを定義し、 「スキン」でボタンの色などを定義する。 例）ボタンのCSS設計例 <div class="btn btn-primary btn-small">ボタン</div> <style> .btn{ text-align: center; display: block; padding: 5px 15px; } .btn-primary{ backgrou
SMACSS+BEMによるテーマ設計（for Drupal8） - Qiita
CSSのコーディングにおいて、コーディングガイドラインが決められていなかったり、プロジェクト内のチームメンバー同士でコーディングスタイルを統一できていなかったりすると、それぞれが独自スタイルでコーディングし始めるので非常に混乱することになります。 さらにレイアウト部分と視覚的なデザインを混ぜてしまうと一貫性がなく複雑なコードになってしまいます。 これらを解消するための指針として、Drupal CSS コーディング スタンダードで規定されたガイドラインがあります。 CSSコーディングの課題 これらの課題を解消するための設計手法を紹介していきます。 複数メンバーでCSSコーディングしたら似たようなコードが散乱していた 適当にコードを書いていたら設計が複雑になりファイルが膨れあがった 1箇所修正しただけなのに他のページが表示崩れした ページ数が多い分、作業時間も多くかかった そもそもコーディング
モジュール開発でのCSS設計（for Drupal8） - Qiita
CSSのコーディングにおいて、プロジェクト内のチームメンバー同士でコーディングスタイルを決めていないと、それぞれが独自ルールでコーディングをしてしまったり、似たようなコードが散乱することにもなります。 それはテーマ制作の現場だけでなく、UI設計がともなうモジュール開発行うときでも同じです。 これらを解消するための指針として、Drupal CSS コーディング スタンダードで規定されたガイドラインがあります。 モジュールのCSS設計にSMACSSの考え方を導入する Drupal CSS コーディング スタンダードでは、Drupal8からSMACSSが推奨されています。 これはテーマ制作だけではなくモジュール開発でも同じです。 SMACSSとは、Scalable and Modular Architecture for CSSの略語で「スマックス」と読みます。 SMACSSはCSSの設計手法の
FLOCSSをベースとしたオレオレCSSルール - Qiita
My CSS Rules 仮にDOCSSと名付けました。こちらから オレオレルールになるまでの経緯 「CSS設計の教科書」を読んでから色々考えるようになって、FLOCSSがいいとこ取り感があっていいなーって思って採用していたのですが、自分のように1人でコーディングする場合にページ単位でブロックを作るのがベストかなとか思い始めたのがきっかけです。 色々試行錯誤の末、今のようなルールになりました。 ElementのElement こちらを参考にキャメルケースでやったら結構スッキリしました Modifier Modifierが今でもまだむずいなーって思ってる所です。 実際、CSSのセレクタとかで解決できちゃう場合も多く、ただそうなった時にわかりやすさが無くなってしまうのでModifierの方がいいよなーってなったり。。 PageBLockの依存 当たり前ですが、PageBLockがそのページに依
初心者による初心者向けのSMACSSまとめ - Qiita
SMACSSとは？ SMACSS とは Scalable and Modular Architecture for CSS の略で、「スマックス」と読みます。 SMACSSの公式サイトでは、「CSSをより体系立て、より構造化させることで制作とメンテナンスをより容易に行うテクニック」と書かれており、サイトの運用をしていく中で、CSSを中心としたWEBコーディングを効率的に行うための考え方です。 SMACSSで設計する目的 SMACSSの公式サイトでは、CSSをカテゴライズすることの目的を『デザインの中で繰り返されるパターンを体系立てるため』と解説しています。 繰り返しのパターン化によるメリットとしては、次のことが挙げられています。 コード量が少なくなる メンテナンス性を高める ユーザー体験の一貫性の向上 これらはどんなサイトでもメリットとなるため、小規模から大規模まで、さまざまなサイトでSM
一番詳しいCSS設計規則BEMのマニュアル - Qiita
一番詳しい(当社比) この記事は 大体1年くらいBEMを実践した中で溜まった知見的なものをルール･規則･注意点をまとめたマニュアルというかたちにしたもの. BEM初心者でもすぐ実践してもらえそうな感じに詳しくしたつもり. ちなみにBEMの実践というのはRails製Webアプリでの実践. ※注 多分に我流な部分も含まれている. この記事の全てを真似しようとせずに一部のエッセンスのみ取り入れるのもいいかもしれない. BEMとは Block Element Modifierの略で, Block => でかい括り Element => でかい括りの中にいる要素 Modifier => 上記2つの変化球 の3つに分けて考えていくことでCSSを設計･命名していく手法. 基本的な考えとか前提とか BEMの中でも特にMindBEMdingと呼ばれている命名法をベースとしている SCSSを使用する 基本的に
BEMの命名規則とスタイルの当て方について - Qiita
BEMの命名規則がいまいち分からない方は必見。 またスタイルを当てていると、いざ変更があった場合に依存関係に困ることがある人も多いハズ。 個人的な書き方を備忘録として書いておく。 おさらい Block 構成のルートとなる要素。この要素はどこにでも置くことのできる、独立して動作するもの。 Element Blockに紐付いて定義される子要素。Blockの要素内のパーツであり、Block要素なしでは動作しないもの。 Modifier 元となるBlockまたはElementの要素から変化した状態を表す要素。元となる要素なしでは動作しないもの。 命名規則 Block, Element, Modifierは全てkebab-caseで記述する。 Block-Element間は__で接続する。 Block-Modifier間、Element-Modifier間は_で接続する。 Modifierは状態の名
新規サイトにFLOCSSを採用して模索しながらサイトを作り上げた話 - Qiita
はじめに 業務で新規サイトを制作するにあたり、今まで採用していたCSS設計をそのまま採用するのではなく、このタイミングで一度どの設計手法にするのか見直すことになりました。 そして結果的に新しい手法を取り入れることとなったので、新しい手法を学びながらサイトを作っていった時のお話をまとめたいと思います。 ちなみに、CSS設計手法についてまとめた記事を以前書いたので、記事内に出てくる設計手法に関してはこちらの記事を参考にしていただけますとありがたいです。 結構メモ的に書いてるので詳しくはないです。 各CSS設計手法を取り入れる上でのメリット・デメリットをまとめてみた もくじ 今までの話 FLOCSSを採用した理由 実際に作ったときの話 FoundationとUtility Layout Component Project BEMについて 実際に作ってみて さいごに 今までの話 今までは主にSMA
FLOCSSメモ - Qiita
レイヤー 下記のレイヤーから構成される。 Foundation - reset/normalize/base... Layout - header/main/sideber/footer... Object Component - grid/button/form/media... Project - articles/ranking/promo... Utility - clearfix/display/margin... 1. Foundation reset.css、base.cssなどのブラウザのデフォルトスタイル（タグ要素への指定）を定義。 ページ全体の背景やタイポグラフィなどが該当する。 2. Layout ページを構成するヘッダー、フッター、サイドバー、メインコンテンツといった広域の共通部品の定義。 ページ単位で唯一の部品となるためIDセレクタによる指定を行っても良い。 3.
BEMのmodifierでスタイルを切り替える時の書き方 - Qiita
<div class="p-hoge"> <div class="p-hoge__photo"> <img src="aaa.jpg" alt=""> </div> <div class="p-hoge__text"> テキストテキスト </div> </div> modifierをつけて要素のstyleを切り替えたい、みたいなことはよくあると思う。 .p-hoge <----> .p-hoge--reverse でも、sassはネストしまくると 可読性が悪い 検索しづらい ので私も基本は、ネストさせないようにしている。 https://qiita.com/tatsuyankmura/items/49ac82183415b7779df1 その辺を踏襲しつつ、より良い書き方を探ってみることにした。 ※(注) BlockとElementをネストはさせないけど、modifierは「&」でネストさ
【初学者向け】HTML/CSSでのclassの命名を考える 〜CSS設計（BEM）を学んでみよう〜 - Qiita
とかのアレ（hoge部分）です。 この投稿は HTMLやCSSは書けるけれど、使いこなすためにもう一歩勉強したい classの命名にいつも迷う 現場で使われている技術や知識を身に付けたい こんな人を対象に書いた、初学者向けの投稿です。 CSSの設計とBEMの非常に初歩的なところを解説していきたいと思います。 CSS設計の初歩的なところを考えてみる classの命名っていうけどidじゃだめなの？ Qiitaを覗いてるみなさんには当たり前のことかもしれませんが、一応このあたりから書いていきたいと思います。 HTMLおよびCSSにはclassとidの２種類の名前の付け方がありまして、その名前が一致するものを紐づけてスタイルを書いていきます。 classとidの違いは、ページ内に複数存在できる(class)かできない(id)かです。 なので、正直idだけでページを作ることも可能です。が、一般的には
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Element Modifierと同じノリでElementの見た目を変えれるBlock ModifierのSassの書き方 - Qiita
BEMの命名規則に関する注意点メモ - Qiita
BEMによるコンポーネント設計 - Qiita
今更ながらBEMについてと、それに対応するSassについてまとめてみる - Qiita
