テクノロジー
CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

気に入った記事をブックマーク

気に入った記事を保存できます
保存した記事の一覧は、はてなブックマークで確認・編集ができます
記事を読んだ感想やメモを書き残せます
非公開でブックマークすることもできます

CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

テクノロジーカテゴリーの変更を依頼記事元:

tech.pepabo.com

適切な情報に変更

エントリーの編集

エントリーの編集は全ユーザーに共通の機能です。
必ずガイドラインを一読の上ご利用ください。

このページのオーナーなので以下のアクションを実行できます

タイトル、本文などの情報を
再取得することができます

コメントを非表示にできますコメント表示の設定

ブックマークしました

ここにツイート内容が記載されますhttps://b.hatena.ne.jp/URLはspanで囲んでください

Twitterで共有

次回からTwitterへ自動リダイレクト

ONにすると、次回以降このダイアログを飛ばしてTwitterに遷移します

719usersがブックマークコメント

コメントするにはログインが必要ですブックマークを追加

ブックマークを追加

よく使うタグ

CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

719 users

tech.pepabo.com

よく使うタグ

はてなブックマークで
関心をシェアしよう

みんなの興味と感想が集まることで
新しい発見や、深堀りがもっと楽しく

ユーザー登録

アカウントをお持ちの方はログインページへ

記事へのコメント43件

注目コメント
新着コメント

t-wada特に既存 CSS のリファクタリングのところがいいな

2015/06/11リンク

その他

monoooki1万行のCSSは戦いがいがあるが進捗しないくてつらい(進行中/CSSじゃないStylusだった

2015/06/10リンク

その他

joker1007既存のそびえ立つクソとの戦い方が書かれてるの素晴らしい。こういうの実際に行動に移すにはかなりの精神力が必要になる。

2015/06/11リンク

その他

inouetakuya「ペパボのフロンドエンドスタンダード」のドキュメント第3弾出ました！

2015/06/10リンク

その他

ekshinyahバイバイ長い夢そこへ行くにはどうすればいいの?

2015/06/11リンク

その他

nomaharu2013いつのまにかめちゃくちゃになってる

2015/06/21リンク

その他

megazalrock「スタイルと文書構造の分離」とさらりと書いてあるが、このCSSとHTMLをいかに疎結合にするかという作業が一番たいへん。特に既存プロジェクトを改変する場合は。

2015/06/10リンク

その他

koheisgflocsはBEMより複雑やけどな、ありなのかもなーとも思う。

2016/08/12リンク

その他

gla69"気がつくと CSS が 1万行くらいになっているのは、なんでなんだろう？" きつい〜〜〜〜きついよ〜〜〜〜〜〜〜〜；；；；

2016/07/13リンク

その他

mosco-muleCSS 設計の長い夢スタイルシートの夢この項目の担当@shikakun 今朝、夢を見ました。夢のなかで、僕はスタイルシートを書いていました。そのスタイルシートは、書きやすくて、読みやすくて、壊れない。そんな「運用しや

2015/10/15リンク

その他

nomaharu2013いつのまにかめちゃくちゃになってる

2015/06/21リンク

その他

xorphitus具体的にどう戦うかが整理されている。運用中のものをリファクタすることになるので、一息にゴールを狙うんじゃなくて、途中途中でまめにリリースしながら前進させたいところ

2015/06/17リンク

その他

oasis440“ width: 50%;”

2015/06/12リンク

その他

muddydixonここまでしないといけない時点でCSS辛い

2015/06/12リンク

その他

Dai_Kamijo特に既存 CSS のリファクタリングのところがいいな / “CSS 設計の長い夢 - ペパボのフロントエンドスタンダード” — Takuto Wada (@t_wada) June 11, 2015 from Twitterhttps://twitter.com/Dai_Kamijo June 11, 2015 at 03:31PM via IFTTT

2015/06/11リンク

その他

Nakatomi“OOCSS ドキュメント”

2015/06/11リンク

その他

masaru_b_cl少なくともSASSくらいは導入しないとイカンなぁとか思った

2015/06/11リンク

その他

joker1007既存のそびえ立つクソとの戦い方が書かれてるの素晴らしい。こういうの実際に行動に移すにはかなりの精神力が必要になる。

2015/06/11リンク

その他

torounit疎結合なCSS、言うは易く行うは難し。

2015/06/11リンク

その他

sadakoa疎結合！疎結合！

2015/06/11リンク

その他

sasashinq「今朝、夢を見ました。夢のなかで、僕はスタイルシートを書いていました。」完全に CV 田村ゆかり（スクライド脳の恐怖）。

2015/06/11リンク

その他

ji_ryooCss設計手法なんてあったのかメモ

2015/06/11リンク

その他

ekshinyahバイバイ長い夢そこへ行くにはどうすればいいの?

2015/06/11リンク

その他

m_m3zonoCSS リファクタリングを実践した夢の話。

2015/06/11リンク

その他

efclCSSの設計CSSのリファクタリングについて。 FLOCSSの考え方でルールと役割に分けていいってリファクタリングする

2015/06/11リンク

その他

t-wada特に既存 CSS のリファクタリングのところがいいな

2015/06/11リンク

その他

asuka0801そろそろCSSそのものを捨ててもっと使いやすい物作るべき

2015/06/11リンク

その他

kenjouとりあえず最低限のルールとして共有してほしいのは、複雑な継承関係を作らない、ページごと、表示する対象ごとにクラスをちゃんと分ける、ですかね。CSS書くのが下手な人はこれができてないです。

2015/06/11リンク

その他

uturiCSSのリファクタリング手法。変な変数名にして後からわからなくなるのは良くあるよね。

2015/06/11リンク

その他

hamichampメモ

2015/06/11リンク

その他

glat_designCSSに関する役だつ資料のまとめでもある /

2015/06/11リンク

その他

kibitakiCSSLint

2015/06/11リンク

その他

strawberryhunter14年前くらいに趣味でCSSはずいぶん触ったが、プロが未だにこのレベルなのか。デザイナーはやっぱり無能だな。

未分類

2015/06/11リンク

その他

tettekete37564CSS は初っぱなからゴミ仕様だよ。まともなスタイル継承があるワープロを知っているか、普通にOOP知ってるプログラマが策定したならあんなねずみ算が如く宣言定義が拡散するアホ仕様には絶対しない。

2015/06/11リンク

その他

elim徳が高い

2015/06/10リンク

その他

Funyapu夢も見なきゃ始まらないのです。

2015/06/10リンク

その他

torico16うっ…夢か…

web制作

2015/06/10リンク

その他

コメントするにはログインが必要ですログインしてコメント

注目コメント算出アルゴリズムの一部にLINEヤフー株式会社の「建設的コメント順位付けモデルAPI」を使用しています

リンクを埋め込む

以下のコードをコピーしてサイトに埋め込むことができます

プレビュー

はてなブックマークボタンを作成して埋め込むこともできます

規約違反を報告

いまの話題をアプリでチェック！

バナー広告なし
ミュート機能あり
ダークモード搭載

アプリをダウンロード

usersに達しました！

さんが1番目にブックマークした記事「CSS 設計の長い夢 ...」が注目されています。

気持ちをシェアしよう

ツイートする

CSS 設計の長い夢 - ペパボのフロントエンドスタンダード

フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターす...フロントエンド周りの技術は驚異的なスピードで進化し、また多様化しています。それらを全てマスターするのは途方もなく大変なので、ペパボでは、社内のエンジニア・デザイナが「最低限これだけはおさえておこう」というスタンダードを文書化することにいたしました。社内向けを想定した文書ではありますが、社内のみに留めず多くの方に役立てたいと考えたため公開します。スタイルシートの夢 (1) 予測しやすい (2) 再利用しやすい (3) 保守しやすい (4) 拡張しやすい代表的なCSS 設計手法既存プロジェクトのCSS に立ち向かう！ (0) 流れ (1) 既存のCSS ファイルを元に SCSS ファイルに変換する (2) イニシャライズCSS や共通の箇所のスタイルを分離する (3)CSS Lint を使って、修正しやすいところから整理していく (4) コンパイル (5) スタイルのスコープ（あ