28 November, 2016 Nesting Your BEM? Written by Harry Roberts on CSS Wizardry. Table of Contents Nesting in CSS Specificity Chain the First Class Simplifying with Sass Practical Upshot Downsides Use Cases To Use or Not to Use? Let me please start this post by saying that this is not a recommendation or new ‘best practice’. This is me thinking out loud. I’m a huge fan and proponent of BEM, and have

こんにちは。みんなのウェディングの平岡です。 みんなのウェディングでは自社開発したCSSフレームワーク「Esthe（エステ）」を利用して開発をしています。 今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。 導入前までに抱えていた問題 案件が発生する都度すべてのデザインを作成していたため、デザイナーの作業が増えていく デザインガイドラインがないため、コンテンツ作成毎にトンマナがずれていく CSSのルールがないため、どこから読まれているのかわからず解読＆確認に時間がかかる サービスの急激な伸びによる影響でCSS周りの整備まで手が回らず、 コンテンツの拡充に比例して日々メンテナンスコストが上がっている状態でした。 なんとかしたい サイトとして共通化されたデザインパーツがほしい デザインガイドラインがほしい 管理されたCSS環境がほしい bootstrap？ bootstr

Our first design system at GE, created in 2012, was similar to many design systems you find on the Internet today. It was designed to appeal to and support a broad audience within GE and contained a large selection of common design patterns (a term I’ll be using to encompass both user interface components and interaction patterns) grouped by function. This was purposely done to drive adoption of d

Atomic Design はデザインシステムを作る方法論となります。 デザインシステムというのはスタイルガイドやブランドのガイドラインなどを指すようです。 日本だとAbemaTV（アベマ TV）で使われています。 （Atomic Design を実案件に導入 - UI コンポーネントの粒度を明確化した結果と副産物 | ygoto3.comより） Atomic Design は今までのページ単位と違いコンポーネント単位でデザインカンプを作る考え方です。 作ったコンポーネント同士の組み合わせでページを作ります。 Atomic Design はコンポーネントの単位を 5 つに分けています。 その 5 つの単位は Atoms（原子）・Molecules（分子）・Organisms（有機体）・Templates（テンプレート）・Pages（ページ）です。 各コンポーネントの詳細は次のとおりです。

今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだ本だと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善

How a little BEM and cleverness can make extensive use of EMs worth doing, and how it can up your game. Using relative units for measurements has a lot of advantages, but can cause a lot of heartache if inheritance goes wrong. But as I’ll demonstrate, BEM methodology and some clever standardization can reduce or eliminate the downsides. A little vocab before we get too far into this: em units CSS

CSS Nite LP39 フォローアップ（6）高津戸 壮さん（ピクセルグリッド） 記事公開日：2015年7月 6日（月） 2015年2月7日（土）ベルサール九段 イベントホールで開催したCSS Nite LP39「Coder's High 2015：コーディングスタイルの理想と現実」のフォローアップとして、高津戸 壮さん（ピクセルグリッド）の『柔軟なコンポーネント設計のためのCSS』セッションのスライドなどをシェアします。 HTMLHTMLのzipPDF 「柔軟なコンポーネント設計のためのCSS」を担当した高津戸です。 頂いた質問にお答えいたします。 > スライドのツールが知りたいですReveal.jsという、HTMLで出来たプレゼンテーション用のフレームワークです。 http://lab.hakim.se/reveal-js/#/ > blockでmarginとpaddingの選択に迷

July 28, 2016 CSS Enduring CSS(以下ECSS)についてまとめる。 ECSSは大規模プロジェクトのためのCSS設計手法だ。考案者はBen Frain。 大規模WebアプリケーションにおけるCSSの記述について根本的なアプローチを定義したいという彼の個人的な要望から生まれている。 ■ ECSSの要望 長期にわたって肥大なCSSのメンテナンスを容易にすること 他に影響を与えずに、コードベースから一部のCSSを取り除けるようにすること どんな新しいデザインでも高速に開発することを可能とすること ある要素へのプロパティや値の変更が他に意図しない影響を与えないこと 実装の変更には最小限のツールやワークフローしか必要としないこと 可能な限り、ユーザーインターフェイス内でのステートの変更を伝達する際などARIAのようなW3C標準をもちいること ■ スケールする際の問題点 プロ

Forkwell という会社の勉強会で登壇したときの資料。フロントエンドの人たちはデザインに近いところで仕事しているのに、小手先のツールに支配されすぎているので目線を上げるためのアンチテーゼ的な資料

2016/12/3のbuilderscon tokyo 2016で話した内容です。 --- ## 資料内のリンク - "CSS is too fragile"が最初に書かれた記事？ http://www.andoh.org/2009/11/web-directions-east-200…

Qiitaを開発しているIncrementsで、フロントエンドをやっていってる @morishitter です。入社して4ヶ月が経ち、会社にも少しずつ慣れてきました。 CSS Advent Calendar 2016 の1日目の記事として、Qiita及びQiita:TeamでのCSSの構成について書きます。 脱Sprockets Qiita / Qiita:Teamでは、サーバーサイドのアプリケーションフレームワークとしてRuby on Railsを採用しています。そのため、これまでは Sprockets というRailsにbundleされているassetビルドツールを使ってSassをCSSにコンパイルしていました。しかし今では、全てのCSS, JSのビルドをNode.jsで行っています。 CSSでの移行手順はざっと以下の通りです。 まず、Sprocketsで使われているRuby製のSas