Creating the “Perfect” CSS System
A high level guide for designers and developers who write CSS, but want to be more strategic about building moderate to large scale CSS systems I’ve spent a lot of time working CSS systems. A large amount of my exposure occurred while working for a small web development agency as a UI Engineer and Designer. Being principally responsible for all things HTML, CSS and presentational JS on dozens of p
CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?
CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS? I’ve been thinking a lot about my CSS authoring, its current state and how it has changed over the years. Typically when I start a new project I’ll use my own framework Motherplate. It uses SCSS and Compass. Most of the class names were’t originally based on any other framework. Not deliberately anyway. Most developers I know n
フロントエンドエンジニアとして働き始める前に勉強した事
今回学習した理由 私は今までWebアプリケーションの開発を行なうソフトウェアエンジニアとして、いわゆるバックエンド・フロントエンドの区切りなく開発に関わらせて頂きました。 しかし、この度転職をしまして、次の会社ではフロントエンドエンニアとして働かせて頂ける事となりました。 そこで、フロントエンドエンジニアとして実際に働き始める前にフロントエンドエンジニアが求められる事項に関して網羅的に学習をしておきたいと思ったのがきっかけです。 学習した事の概要 Developer RoadmapsのFrontend Developerに沿ってフロントエンド知識全般の補填を行いました。(※今回は私が今まであまり注力を置いて学習してこなかった事項を重点的に学習しました) あくまでも各項目の入門的な事項を学んだのでより深い知識は今後の業務＋学習でつけていければと考えています。 そもそもフロントエンドエンジニア
toge's diary
去年発売された本ですが、今さら読みました。 gihyo.jp 読んだ動機 私はフロントエンド、特にデザイン周りはからっきしです。 フロントエンドやるときはJavascriptのチューニングばっかりなので、HTML+CSSは最低限知っている程度のレベルです。 WebスクレイピングをしているとCSSクラスの指定が結構複雑で「何かベストプラクティスがあるんだろうなぁ」と思っていまいた。 そこらへんの知識をちょっと除き見して、あわよくばスクレイピングで利用したかったのです。 感想 HTML + CSSをかじったことのある程度の私にはちょうど良い本でした。 とても丁寧に作られている本だと思ったので、本来の対象読者であるHTML+CSS書く人以外でもお勧めだと思います。 500ページ以上ある大作ですが、HTML+CSSのコードが大量に掲載されているためなので、そんなに重くなく読み進めることができます。
BEM とは - CHROMA
メンテナンスブルな CSS の設計の話で OOCSS や SMACSS ってのがあるけど、そのうちの一つで BEM というのがある。 http://bem.info/ BEM-Methodology Definitionsの日本語訳 を見てみると XJST とか BEMHTML とかいうテンプレートエンジンに関する内容（よくわかってない）も書かれてるんだけど、日本ではこの中の BEM を CSS 用に使いやすくした MindBEMding （日本語訳はこっち ）の命名規則が良いってことで流行ってるみたい。 また、今 BEM っていったら大体は MindBEMding のことを指してるみたい。 BEM-Methodology Definitions の内容全部をこれから理解しようとすると自分が知らない知識が多くてちょっとアレなので.. 、MindBEMding の内容を先に抑えておきたいと思
BugSnag's CSS Architecture
A few months ago, a number of designers and UI engineers, inspired by a popular blog post from GitHub’s Mark Otto, published articles on their approaches to writing and organizing CSS. In this post, I’m going to follow suit and take you through a breakdown of the tools we use, as well as the architecture of BugSnag’s CSS. There’s no surefire method for organizing CSS for all situations; the conten
Bootstrap's Grid System vs. Susy: A Comparison — SitePoint
There are a lot of grid frameworks for us the to choose from while developing websites nowadays. Of the many frameworks, one of most loved and yet most hated framework is definitely Bootstrap. Today, I’ll like to introduce you to a slightly lesser known framework that has caught on for many people – Susy. In this article, I’ll show a comparison between Susy and Bootstrap’s grid system so you can f
8月に入り、晴れてフリーランスになりました。 ありがたいことに色々とお仕事のお話を頂きまして、今月から創業間もないスタートアップ2社に微力ながらお力添えさせていただくことにしています。楽しみです。 7月はほとんど有給消化期間で、結構のんびりしていたのですが、いろんな人にお会いしてお話したり積読本を消化したりする傍ら、5年くらい前に自分がぱっとつくってほぼ放置していたRailsアプリのリファクタ、パフォーマンス・チューニングをしていました。 30万pv/monthしかない小規模なウェブサイトですが、一週間くらい頑張ったらだいぶマシになったので、やったことを晒します。（大したことやってないですが、近況報告程度に。） Railsアプリの概要 ikstudieという、独学の大学受験生を支えたいというコンセプトのウェブサービスが対象です。私自身、大学受験には独学で臨んだのですが、何かと不安に思うとこ
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法 谷 拓樹 インプレス 2,090円 (1,900円+税) 関連サイト本書の関連ページが用意されています。 Web制作者のためのCSS設計の教科書 | Impress内容紹介コンポーネントやCSSプリプロセッサを意識した設計・管理の実践など、「ちゃんとCSSを書く」ためのプロの考え方を徹底解説。「セレクタが複雑になってしまう……」「オブジェクト指向CSSってなに？」「考え方はわかったけど、どう組めばいいの？」そんな人のバイブルになるのが、この本です。破綻しやすいCSS、セレクタのリファクタリングなどの基本から、OOCSS、SMACSS、BEMなどのコンポーネント設計のアイデア、実際によくあるパターンのコードの組み方までを丁寧に解説。また、注目されはじめた「Web Components」につい
Scoped CSS - Qiita
JavaScriptの激変は、CSSコーダー(?)にとっても対岸の火事ではありません。むしろ、変態的な職人的な方法論を捨て去らなきゃならないのは、CSSも同じ。 それはともかく、Scoped CSSについて整理しつつメモしてみます。※2015年初頭の状況として なにこれ? Scoped CSSはDOMの中に<style scoped>タグを配置すると、そのDOMの内側にだけに限定されるCSSが書けるというものです。アイデア自体はしばらく前から存在するものの、Firefoxにのみ実装され、Chromeについては実装が止まっています。経緯を追うと、Web ComponentsのShadow DOMのCSSがscoped相当になるため「重複機能」と判断され、ペンディングになっている気配です。(ChromeとしてはWeb Componentsの仕様固めが優先) 仕様: whatwg.org ブラウ
Fifty Shades of BEM
Diary of a French front-end developer in San Francisco. Mostly gossiping about responsive web design, HTML, CSS and Sass. As a development concept becomes popular, it is common to witness programmers forking it to fit various workflows and habits. This is resulting in a very fragmented landscape of implementations. It is happening to BEM at this very moment, and I myself have experimented with mul
FLOCSSとは？CSS設計手法を活用して保守性の高いコードを書こう | Web Design Trends
FLOCSS（フロックス）は、人気の高いCSS設計手法の1つです。 CSSは複数人で作業したり、大規模なWebサイトになるとコード量が増えてしまい、途中で整合性が取れなくなったり、破綻してしまう場合があります。それを防ぐために必要なのがCSS設計手法で、しっかりとルールを定めてコードを書くことにより、管理しやすく、破綻しづらいCSSを記述することができます。 今回は、FLOCSSの基本や特徴をご紹介したいと思います。 【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が... Web Design Trends
釣り針のクソデカいタイトルですが、こちらの記事はロンドンのフルスタックNode/JS/TS開発者のBrian Boykoさんが4月20日にDEV Communityに投稿した記事:TailwindCSS: Adds complexity, does nothing.の和訳となります。(6/28原文著者の掲載許可取得済み) こちらの記事を5月7日にtwitterで10万人のフォロワーを持つフロントエンド開発者でインフルエンサーのSara Soueidanさんがリツイートし、それにTailwindCSSの作者 Adam Wathanさんが反応したことで炎上。議論を巻き起こした様です。（こちらの炎上事件の詳細は: Tailwind CSS批判ブログ記事の紹介ツイートへの攻撃で作者が炎上 などでご確認ください) さてさて、日本ではフロントエンドのオピニオンリーダー的な影響力の強いエンジニアにも概ね
フロントエンドの複雑さに立ち向かう 〜DDDとClean Architectureを携えて〜 | さくらのナレッジ
自己紹介 さくらインターネットではシニアフロントエンドエンジニアをやっています。代表作は「NES.css」というファミコン風CSSフレームワークで、エイプリルフールには「さくらのINFRA WARS」というゲームの企画開発をしていました。 話さないこと 本記事ではソフトウェア設計ということで、以下の設計・アーキテクチャに関しては話す予定はありません。コンポーネント設計や CSS 設計に関しては過去に記事やスライドを公開していますので、気になる方はそちらを参考にしていただければと思います。 コンポーネント設計 加速するコンポーネント設計入門 / Component Design as an Accelerator コンポーネント指向時代のmargin戦略 / Rethinking the relationship between Components and Margins CSS設計 OO
CSS Architecture (OOCSS, SMACSS, BEM, FLOCSS) に関する日本語情報ソースまとめ | DriftwoodJP
以下も同じく、後述する3つの手法の概要。 CSS Nite LP32フォローアップ（8）高津戸 壮さん（ピクセルグリッド ） | CSS Nite公式サイトen.ja Article の記事はどれも興味深いですが、以下の3つが CSS 設計に関する記事かなと。 en.ja Articleen.ja Articleではハイクオリティな海外のフロントエンドにまつわる記事の翻訳を掲載しています。 CSS Architecture | en.ja ArticleAbout HTML semantics and front-end architecture | en.ja ArticleCode smells in CSS | en.ja Article下記は BEM に関する記事ですが、リンク先など設計全般に関する情報が網羅されていて必読な気がしています。 en.ja Article 1. 2.
integralist BBC News Engineer: Object-Oriented Design principles using Ruby, PHP, BEM, AMD, TDD and BDD More info about me… What we'll cover reading time: approx. 7mins Introduction BEM: Block, Element, Modifier Example Why BEM over the others? Conclusion Introduction This is a super quick post to introduce you to a method of writing more maintainable CSS by using what's called "BEM". Update: @nec
For years I’ve struggled with CSS. Remember Damien Newman’s squiggle as a visual representation of the design process? Flip it and you’ll have a perfect depiction of any CSS project: At least in my case, every new project starts out extremely well-organized, then pretty soon turns into a complete mess. The problem is mostly me, but I blame CSS for it as well. CSS is an unstructured language. Every
I often ask myself these questions: Will this code be easy for the others to edit? Does it scale? Can I forget it and change it later without being lost…
この記事が2014年最後のものになる。年の瀬だし、今年1年を振り返って軽くポエむ。 CSSとの出会い CSSとの出会いはちょうど1年前くらいだと思う。約3年前からプログラミングを初めて、その頃からなんとなくCSSも書いていたけど、作っているWebアプリの見た目を表現したいものにできればいいぐらいにしか思っていなかった。だから、CSSという技術そのものと向き合い始めたのが1年前ということだ。そして2014年は、ひたすらCSSに投資した年だった。 去年の夏に2人で3000行くらいのCSSを書くことがあった。その頃の僕はCSSをどう書いていけばいいのかなんて考えたこともなく、好きなように書いて、破綻した。この頃になんとなくCSSはヤバい言語だという意識が生まれた。そして、今までめちゃくちゃ適当に書いていたHTMLとCSSについて勉強しなおすことにした。HTMLのセマンティックさなんて知らなかった
知っておきたいCSS設計法 第1回 OOCSSの基本 HTMLテンプレートを設計する上で、基礎と考えられる概念のひとつOOCSSを取り上げます。オプジェクト指向のCSSとは何か？ 今回はその考え方の基本をまずおさえましょう。 はじめに このシリーズでは、OOCSS（オーオーシーエスエス）、BEM（ベム）、SMACSS（スマックス）という3つのCSS設計概念の概要を解説します。HTMLとCSSをどのように書いていけばよいかは、過去に「CSSの設計」シリーズにまとめました。今回のシリーズは、その2014年度版とでもいうような内容になっています。 というのも、CSSの設計を書いた頃と比較すると、さまざまな設計概念が広く知られるようになったものと思います。今回紹介するBEMやSMACSSが、その代表です。また、CSSのプリプロセッサSassのバージョンアップでは、BEMを意識したような機能なども追
酔ってる。 CodeGrid二周年記念パーティー良かった。 気になってたけど Twitter でリプライ送るの恥ずかしくて話ができなかった人、そんな人達と話せてよかった。 特に難しい話、新しい話はしてないけど、LT してきた。 CSS の構造化、その目的 - slideshare OOCSS, SMACSS, BEM などの CSS の構成案に手を出す前に、これらが出てきた背景と目的を理解しとくことが大事 スライドの例で言いたかったこと 予測しやすい BAD) .container とか .wrapper という名前が抽象的すぎる。 一番最後の .img+p は HTML の変更に弱過ぎる。 GOOD) 抽象的すぎる名前は変更する。 それでも自分以外に伝わらないと感じたらドキュメントに残す。 再利用しやすい BAD) ニュースページのリスト、 質問ページのリスト、ブログのリスト、こんなふう
レガシーなシステムとの向き合い方 ~ リニューアル案件を通して - ぐるなびをちょっと良くするエンジニアブログ
本記事はぐるなびで、飲食店掲載ページ(以下、店舗ページ)の開発を担当している店舗チームがお送りします。 はじめに ぐるなびはWebメディア業界の中では老舗で、技術的負債やレガシーな運用・開発フローが多数残っています。 今回はそんな中、ぐるなびのエンジニアがそういった技術的負債にどう立ち向かっているのかを紹介します。 納品スタイルな開発体制 ぐるなびの開発体制は工程ごとに分業されています。 企画が要件を決めて、その要件をもとにデザインチームがデザインをします。 そのデザインをもとにフロントチームがHTMLやCSS、JSなどの静的資源を作成し、作成された静的資源をもとにバックエンドチームが動きを付けていきます。（これを以降では「納品スタイル」と呼びます。） そんな納品スタイルがゆえにチーム間で実装に関する余計なコミュニケーションが発生したり、無駄なHTML取り込みなどが発生していました。 ぐる
こんにちは🙌、pixivFACTORYでフロントエンドエンジニアをしているラグです😇 ピクシブ株式会社 AdventCalendar 2017 13日目のこちらでは、そこそこページ数の多いRailsアプリケーションでのCSS設計についてお話します TL;DR namespace classを使おう💪 namespace classは「誰が考えても同じクラス名になる」ことが重要 Railsなら View のファイルパスで正規化するとよさみがある どういう問題が起きていたか pixivFACTORY には、LPやユーザーのパーソナルなページを含めて、100ページ弱くらいのViewがあります。 これらのスタイルはSass上ではURL毎に分割されていましたが、実際のクラスは全てグローバル空間にベタ置きされていました。 これによってどういう問題が起きるかというと 特定ページ専用のコンポーネント
HTML5 Conference 2013: モバイル時代のフロントエンド開発レシピ フォローアップ
2013-11-30-A-Recipe-for-Modern-Mobile-Front-end-Web-Development-html5-conference-2013.md A Recipe for Modern Mobile Front-end Development モバイル時代のフロントエンド開発レシピ 斉藤 祐也: Twitter@cssradar スライド: http://d.pr/s2Qw Intro Our Mobile Planet スマートフォン市場規模の推移・予測（2013年3月） - 株式会社 ＭＭ総研 Frontrend in Sapporo Frontrend in Fukuoka @ 2014.01 Code Scaffolding Brunch - ultra-fast HTML5 build tool Yeoman - Modern workflows
Drupal 8 でテーマ開発をしよう（前編） ～Drupal 7 からの変更点とテンプレートとテーマの違い～ | さくらのナレッジ
はじめまして、スタジオ・ウミの大野と申します。さくナレには最初の投稿となりますので、まずは簡単な自己紹介をさせていただきます。 スタジオ・ウミは滋賀県の琵琶湖の畔で Drupal を専門としたウェブ制作会社です。これまでは関西や地元企業のお客様を主体に制作のお仕事をさせていただいておりましたが、今年の4月に東京にもオフィスを開設し、関東圏内でも活動させていただくようになりました。 私が Drupal を初めて触ったのがバージョン 4.7 の頃で、Drupal が好きで好きで他の CMS には目もくれず、今年で開発歴が10年目になってしまいました。私自身はまだエンジニアを自負していますが、社内ではデザイン以外の業務であればディレクションから開発まで、ケースに応じて殆どのことをしています。 本稿では Drupal.org の Theme folder structure の記事を参考に、テーマ
FLOCSS で自社サービスの CSS 設計をやり直した話 | TECHSCORE BLOG | TECHSCORE BLOG
この記事は TECHSCORE Advent Calendar 2016 の 9 日目の記事です。 弊社サービス Synergy! では、新機能「リターゲティングメール」搭載のタイミングで UI の刷新が行われました。 無事リリースできたのは良かったものの、特に CSS 設計は手探りな部分が多かったので、その後いろいろと課題が見えてきました。 今後の UI のベースとするには、あまりにも心もとない……ということで、FLOCSS を導入して CSS 設計のリファクタリングに取り組んだお話です。 元々の設計 Bootstrap FlatLab (Bootstrap ベースのテンプレート) 自社の style.css HTML/CSS 周りは、ざっくりこんな感じの構成です。 独自のスタイルは style.css に集約していました。 あと、クラスの命名規則は特に設けていませんでした。 Boots
2020年2月27日紙版発売 2020年2月27日電子版発売 半田惇志 著 B5変形判／512ページ 定価3,608円（本体3,280円＋税10%） ISBN 978-4-297-11173-1 Gihyo Direct Amazon 楽天ブックス 丸善ジュンク堂書店 ヨドバシ.com 電子版 Gihyo Digital Publishing Amazon Kindle ブックライブ 楽天kobo honto 本書のサポートページサンプルファイルのダウンロードや正誤表など この本の概要 CSS設計は多くの現場で導入されていますが，いまだに悩みがつきません。プロジェクトの大小や性質によって最適解も変わってきます。 そこで本書は，CSSのさまざまな設計手法を紹介しつつ，考え方や実践のポイントを明確化します。そのうえでボタン，ラベル，カード，テーブル…といったウェブの定番的なモジュールを網羅的に
People love naming things. And developers love acronyms. And thus here we are, finding ourselves with all of these CSS naming conventions and methodologies: BEM, SMACSS, Point North, ITCSS, OOCSS, Title CSS, Idiomatic CSS, Atomic Design, SUIT CSS, Kickoff CSS, etc. We often hear “Are you using OOCSS or BEM?” but these things are not mutually exclusive. In fact, most of the time, we’re taking conce
みなさんは 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（TailwindCSS）と向き合った話 - Qiita
最近、業務にTailwindCSSとAstroを取り入れ始めました。 ここではそれまでの苦悩、導入までの軌跡や工夫についてご紹介します。 育った環境 私が社会人になるころにちょうどWeb標準という言葉が浸透し、「世の中はXHTMLでマークアップはセマンティックであるべし！」という価値観で育ちました。 CSSは名前の通り、カスケードするから良いものだと思っていましたし、クラス名はデザインの都合ではなく、機能や意味からつけることが幸福につながると信じていました。 当時は大量コーディングをより効率よく行うためにコマンドラインのプログラムをつくってXPathで抽出・変換し少しでも作業を軽減できないか試行錯誤したり、複数人でのコーディングをどのように効率よくまわせるか考えたり、HTMLをXMLとして捉えて、当時のXHTMLの思想に則って業務を進めていました。 XHTMLは廃れ、それほど厳格性を求めら
Brett Jankord I design and develop websites for the ever changing landscape of the Web. Menu Skip to content HOME ABOUT BLOG CONTACT My understanding of CSS modules continues to grow from day to day. To me, modules are one of the best ways to create scalable and reusable styles. I wanted to jot down a few things I’ve learned about modules. Source: Wikipedia What are modules? If you’ve read through
現在のWeb制作ではBootstrapのようなCSSフレームワークやSASS、LESSなどのCSSを効率良く各手法がよく使われます。SASSと一緒に使われるものとしてはcompassがよくあげられますが、実はこれ以外にも便利なMixin集やフレームワークがたくさんあります。 このページではThe Ultimate SASS Resources & Toolsで紹介されている多数のフレームワークの中からとくにおすすめできそうなものを紹介していきます。 SASSを効率良くするフレームワーク&ミックスイン集 Bootstrap Sass まずはこちら、BootstrapのSASS版。BootstrapはLESSで提供されていましたが、SASS版も出ています。BootstrapのコンポーネントをSASSでカスタマイズできるので便利。 Foundation こちらはBootstrapに並んでよく使用
BEMが破綻する理由
ここ数年、CSSも設計の重要度が高まり、様々な設計手法が出てきています。 「OOCSS」「SMACSS」「BEM」などが代表的な手法で、これらの考え方をベースにした派生版も優秀なものが出てきていますよね。 弊社ではBEMをベースにFLOCSS等を交えたCSSガイドラインを使用しています。 良い面も多いですが悪い面もあり、導入が失敗だったと感じたこともありましたが、いまは慣れたこともあり使用しています。 今回はBEMが破綻するケースを挙げてみたいと思います。 あくまでも慣れ、スタッフの認識度合いによりますので参考程度に読んでみてください。 デメリット 1. BEMの記述法、概念 ここが曖昧なままだとCSSの設計はすぐに破綻します。 まずは以下のような情報に目を通すことが重要ですね。 https://en.bem.info/ https://csswizardry.com/2013/01/mi
CSS at Groupon
CSS at Groupon This post was inspired by the recent wave of people sharing info about their CSS: Mark Otto at Github, Ian Feather at Lonely Planet and Chris Coyier at Codepen. About two years ago I was working on a redesign of Groupon's consumer website (which was later scrapped) when I was asked if I wanted to work on our internal tools team. "You won't have to support Internet Explorer," they sa
Ah yes, CSS. Hardly a week passes without it being the topic of a heated online discussion. It's too hard. It's too simple. It's unpredictable. It's not a real programming language. Peter Griffin struggles with blinds dot gif. I don’t know why CSS sparks so many different emotions in developers, but I have a hunch as to why it can sometimes seem illogical or frustrating: You need a certain mindset
Atomic Design と BEM で CSS に立ち向かう | mediba Creator × Engineer Blog
制作部フロントエンドエンジニアの金森です。Vim 派です。 長期的に運用していく CSS を書くのって難しいですよね？ OOCSS や SMACSS、BEM、FLOCSS などの CSS 設計概念を用いてメンテナンスしていても、気がついた時には見るのも嫌になっていることがあります。 OOCSS を考えた Nicole Sullivan 氏1 も、「CSS is awesome. Code is too fragile.（CSS は素晴らしいが、とても壊れやすい）」と述べています2。 Atomic Design の上で実際どのように壊れにくい CSS を構築するのか紹介します。 Atomic Design とはBrad Frost 氏3 が開発した Atomic Design4 とは UI コンポーネントの要素を化学原子論的な要素にみたてたデザインシステムです。 小さく単純なコンポーネントを
photoshopのデザインカンプから画像の切り出し→compass(-rails)でのcssスプライト画像作成の流れ - 訳も知らないで
RailsアプリのUIデザイン〜コーディングするにあたり、 今回はじめてphotoshopとsass,compassを使用しました。 Web(UI)デザインの作成を、Fireworksからphotoshopにのりかえた。 - 記すに足らず。 はじめてSass(Compass)を使ってみた＆CSS設計について初めて考えてみた(SMACSS)時の感想 - 記すに足らず。 そのときにやってみた Photoshopのデータから画像切り出し→coｍpass(-rails)でcssスプライト用画像を作成する方法のまとめ。 photoshopの画像をスライス photoshopから画像を切り出す際、CCから追加された 「画像アセット」 という機能を使うと便利です。 画像アセットとは？ レイヤーに決められた名前を付けるだけで、 勝手に画像として切り出してくれます。 〜参考にさせていただきました！〜 使い方
(Hey, we're having problems showing images in RSS right now, so if you want a better reading experience, consider viewing this article online [here](https://zellwk.com//blog/css-architecture-1. We hope to fix this soon!). Have you worked on large websites that spans more than a few pages? If you did, you probably realized the horrors of not conforming to a robust CSS architecture. You probably wou
イマドキCSS設計 NTTレゾナント 森本恭平 ※矢印キーで動かせます About Me 森本恭平 ディレクター フロントエンドエンジニア Twitter:basara669 今日のスライド http://basara669.com/slides/140122/index.html ※今日のatndやconnpassにも載っています 今日のハッシュタグ #gooOTT Agenda なぜCSS設計が必要なのか BEMとSMACSSの紹介 実際の運用上どうするべきか 本題に入る前に・・・ 様々なCSS設計がありますが、どれも複数クラスを前提としているので、IE6以下では使えないです。。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
5年前に自分がつくったRailsアプリをリファクタした話 - takuwan's blog
Web制作者のためのCSS設計の教科書 モダンWeb開発に欠かせない「修正しやすいCSS」の設計手法
TailwindCSSは複雑性を足すだけで、何もしていない（和訳） - Qiita
Maintainable CSS with BEM | Integralist
Less CSS mess — Thomas Byttebier
SMACSS Your Sass Up
僕とCSSとCSSの生きる道 - morishitter blog
知っておきたいCSS設計法 | 第1回 OOCSSの基本
CodeGrid 書いてる人たちは楽しそうだ。LT してきた - CHROMA
CSSをRailsとゆるふわにお付き合いさせる話 - Qiita
CSS設計完全ガイド ～詳細解説＋実践的モジュール集
Atomic OOBEMITSCSS — SitePoint
CSS 設計における Modifier の記述ルールの最適化 - Qiita
Modular CSS: Thoughts on SMACSS modules | Brett Jankord
SASSが３倍効率良く書けるフレームワーク、ミックスインまとめ
「イマドキCSS設計」の解説 - 後編：BEMとSMACSSと実際の運用について - basara669.com
The CSS Mindset
Writing modular CSS (Part 1) — BEM | Zell Liew
イマドキCSS設計