[書評] CSS設計の教科書 - Qiita
先週読んだ本が参考になったのでまとめてみました。 章の構成と内容 第1章で、CSSにおける設計とは、という前提と筆者のかたの考えを説明しています。 HTMLに依存しない、スタイルの上書きをしない、など後々の修正の影響が理解しやすいものをよしとしていることと、また早めに設計し実機で確認しながら作るアジャイル的なワークフローを用いることがフロントエンド側からできるアプローチだ、としています。 第2章では カスケーディングの仕組みと詳細度について、不用意に詳しい指定をしない(セレクタを短くする)ような整理(リファクタリング)のしかたを説明しています。 第3章ではコンポーネント設計のアイデアとして、基本的なコンセプトと各種法の方法を紹介しています。基本的な考え方として「関心の分離」というのがあり、コンポーネント単位で独立して作る(適度にカプセル化する)ことが重要としています。 上記の5つについて、
![[書評] CSS設計の教科書 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/5ee96a7d197702a47af1662f7a0c488039667da4/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fqiita-user-contents.imgix.net%252Fhttps%25253A%25252F%25252Fcdn.qiita.com%25252Fassets%25252Fpublic%25252Farticle-ogp-background-afbab5eb44e0b055cce1258705637a91.png%253Fixlib%253Drb-4.0.0%2526w%253D1200%2526blend64%253DaHR0cHM6Ly9xaWl0YS11c2VyLXByb2ZpbGUtaW1hZ2VzLmltZ2l4Lm5ldC9odHRwcyUzQSUyRiUyRnFpaXRhLWltYWdlLXN0b3JlLnMzLmFtYXpvbmF3cy5jb20lMkYwJTJGMzUxNiUyRnByb2ZpbGUtaW1hZ2VzJTJGMTQ3MzY4MzI4MD9peGxpYj1yYi00LjAuMCZhcj0xJTNBMSZmaXQ9Y3JvcCZtYXNrPWVsbGlwc2UmZm09cG5nMzImcz00MzkyMTU5NzE1MTMwMjM5NmRmZTRjMjE0ZmQxYzdiOA%2526blend-x%253D120%2526blend-y%253D467%2526blend-w%253D82%2526blend-h%253D82%2526blend-mode%253Dnormal%2526s%253D4d644bff194f1719080cf69415f31fc5%3Fixlib%3Drb-4.0.0%26w%3D1200%26fm%3Djpg%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk2MCZoPTMyNCZ0eHQ9JTVCJUU2JTlCJUI4JUU4JUE5JTk1JTVEJTIwQ1NTJUU4JUE4JUFEJUU4JUE4JTg4JUUzJTgxJUFFJUU2JTk1JTk5JUU3JUE3JTkxJUU2JTlCJUI4JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9NTYmdHh0LXBhZD0wJnM9ZThiMzRmOTFmMjI4YjE4OTBiZWQxMTY1MGIyNzRiMTQ%26mark-x%3D120%26mark-y%3D112%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTgzOCZoPTU4JnR4dD0lNDB5ZF9uaWt1JnR4dC1jb2xvcj0lMjMxRTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LXBhZD0wJnM9NDdjMjllZjRhZTQ2MjMzMzg2YzMwNTkxYzc3NWI5ZWM%26blend-x%3D242%26blend-y%3D480%26blend-w%3D838%26blend-h%3D46%26blend-fit%3Dcrop%26blend-crop%3Dleft%252Cbottom%26blend-mode%3Dnormal%26s%3D2b58a41a54eac8f6cf33e97bc3200573)
oocss&smacss&bemでのcss改善まとめ - Qiita
oocss 参考 知っておきたいHTMLテンプレート設計法 - OOCSSの基本 ルール 場所に依存した指定方法をしない レゴのように考える スキン 装飾など。smacssでいうモジュールの部分。 構造 骨格。 smacss 参考 SMACSSによるCSSの設計 ベースとレイアウト つくってるプロジェクトでは、oocssだけで十分で、smacssはガチで取り入れなくてもいい気がした。理由↓ レイアウト>>使う機会が少ない。gridなどを使う機会があまりない。あるとしても、oocssでいう骨格を作るのと同等（な気がしている）。 テーマルール>>使わなそう モジュール>>oocssのスキン的な考えで十分 状態>>これは普段からやっている気がする。 ベース 要素そのもののデフォルトスタイル レイアウト ページをエリアごとに分割 モジュール 再利用可能なパーツ 状態（ステート） レイアウトやモジュ
IE8互換のレスポンシブデザインを、ワンソース、モバイルファーストで作れるSassミックスイン - Qiita
一部の公共性の高いWebサイトでは、今だにIE8への対応を行いつつ、同時にレスポンシブデザインも要求されるケースがある。当然IE8はCSSのメディアクエリに対応していない為、メディアクエリ抜きでコーディングをする必要がある。 設定する要件 モダンブラウザに対応し、あるブレークポイントを境にPC版とスマートフォン版のスタイルが切り替わる。レスポンシブデザインとすること モダンブラウザのPC版とほぼ同等の外観でIE8にも対応すること。ただし、ブレークポイントを越えてもレイアウトが変わる必要はない 実装方針 もしPCファーストの設計であれば、IE8のことを気にせずに実装できる。 1.サイズ共通のスタイルを書く 2.PC専用スタイルを記述する 2.SP専用のスタイルをメディアクエリの内側で上書きする しかし、PC用スタイルのオーバーライドは無駄が多くて分かり辛い為、できればモバイルファーストで実装
Sass/SCSSの@extendは使いすぎるとカオスだった - Qiita
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? .cf:before, .floatedList:before, .navGlobal ul:before, .book.horizontal .inner > ul:before, .book.horizontal .ulWrap > ul:before, .articleList > .head > .options > ul:before, .bodyPage .pageHeader .bodyHead .articleInfos:before, .archiveModeBtns ul:before, .contentWrappe
今流行りの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設計】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の設計手法の
初心者による初心者向けのSMACSSまとめ - Qiita
SMACSSとは？ SMACSS とは Scalable and Modular Architecture for CSS の略で、「スマックス」と読みます。 SMACSSの公式サイトでは、「CSSをより体系立て、より構造化させることで制作とメンテナンスをより容易に行うテクニック」と書かれており、サイトの運用をしていく中で、CSSを中心としたWEBコーディングを効率的に行うための考え方です。 SMACSSで設計する目的 SMACSSの公式サイトでは、CSSをカテゴライズすることの目的を『デザインの中で繰り返されるパターンを体系立てるため』と解説しています。 繰り返しのパターン化によるメリットとしては、次のことが挙げられています。 コード量が少なくなる メンテナンス性を高める ユーザー体験の一貫性の向上 これらはどんなサイトでもメリットとなるため、小規模から大規模まで、さまざまなサイトでSM
新規サイトにFLOCSSを採用して模索しながらサイトを作り上げた話 - Qiita
はじめに 業務で新規サイトを制作するにあたり、今まで採用していたCSS設計をそのまま採用するのではなく、このタイミングで一度どの設計手法にするのか見直すことになりました。 そして結果的に新しい手法を取り入れることとなったので、新しい手法を学びながらサイトを作っていった時のお話をまとめたいと思います。 ちなみに、CSS設計手法についてまとめた記事を以前書いたので、記事内に出てくる設計手法に関してはこちらの記事を参考にしていただけますとありがたいです。 結構メモ的に書いてるので詳しくはないです。 各CSS設計手法を取り入れる上でのメリット・デメリットをまとめてみた もくじ 今までの話 FLOCSSを採用した理由 実際に作ったときの話 FoundationとUtility Layout Component Project BEMについて 実際に作ってみて さいごに 今までの話 今までは主にSMA
BEMとSMACSSを融合させる最も簡単な方法 - Qiita
BEMは素晴らしいアイデアであり、SMACSSもまた素晴らしいガイドラインです。 これらの特徴を組み合わせて最高のCSS設計を構築したい、と思った私はさまざまな方法でこの2つの融合を試みましたが、失敗の連続でした。 しかしながら、ようやくいくつかの結論を導けるようになってきました。 今回はそんないくつかの方法論の内、 BEMの命名ルールをそのまま生かしつつ、最もシンプルにSMACSSと融合させる方法 を紹介したいと思います。 実は、SMACSSとBEMをそのまま組み合わせることはできません。 お互いのルール同士が衝突するからです。 とくに注意したい部分は、CSSのカテゴライズだといえるでしょう。 SMACSSではCSSを主要な6つのカテゴリに分類します。 ベース、レイアウト、モジュール、サブモジュール、ステート、テーマです。（※サブモジュールに関しては他のカテゴリと比べるとあまり言及されて
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
CSSガイドライン （サンプル） - Qiita
CSSが破綻する4つの理由 - Qiita
SMACSSを参考にしたCSSコーディング規約 - Qiita