RailsDM 2019 https://railsdm.github.io/#session-upinetree ふりかえり http://upinetree.hatenablog.com/entry/2019/03/27/233842 English version https://speakerdeck.com/upinetree/how-to-deal-with-technical-debt-of-css
こんにちは。みんなのウェディングの平岡です。 みんなのウェディングでは自社開発したCSSフレームワーク「Esthe(エステ)」を利用して開発をしています。 今回はそのEstheの簡単な説明と導入までの流れを紹介したいと思います。 導入前までに抱えていた問題 案件が発生する都度すべてのデザインを作成していたため、デザイナーの作業が増えていく デザインガイドラインがないため、コンテンツ作成毎にトンマナがずれていく CSSのルールがないため、どこから読まれているのかわからず解読&確認に時間がかかる サービスの急激な伸びによる影響でCSS周りの整備まで手が回らず、 コンテンツの拡充に比例して日々メンテナンスコストが上がっている状態でした。 なんとかしたい サイトとして共通化されたデザインパーツがほしい デザインガイドラインがほしい 管理されたCSS環境がほしい bootstrap? bootstr
はじめまして!デザイナーのきよえし(@kiyoe_furuichi)です。 ママリ、ママリQ のUIデザインとフロントコーディングを担当しています。最近暑すぎて溶けそうです。スイカたべたい! さて今回は、爆速で拡大成長中のママリが行っている『よりよいCSS設計のための開発手法』についてまとめてみました。 『よりよいCSS設計』を考える 「あれ?スタイル効かない…!importantしよ♡」 身の回りでこのようなことは起きていませんか…? 意図しないことが頻繁に起こる場合『CSS設計』の見直しが必要かもしれません。 私たちは普段からサービスを成長させていくにあたって『よりよいCSS設計』とはなにかを考え、チーム内で検討し、改善をおこなっています。 そんな私たちが実践している開発手法や取り組んでいることについて、いくつかご紹介していきたいと思います。 きっかけ はじめに、私が『よりよいCSS設
CSSの設計 = セレクタ名をどう付けるか、って思っている人が多いので、年も明けたしここらで一度「CSSを設計する」とはどういうことか、考えていることをまとめてみる。 セレクタ名をどう付けるか CSSのルールセットは現状全てグローバル定義なので、上手いセレクタ名を付けることで衝突を回避する必要がある。 そのための手法として、SMACSSでは.is-**とか.l-**みたいにプリフィックスを付けたり、BEMみたいに.Block__Element--Modifierのような独特な記法でネームスペースを設けたりする。 CSSは、HTMLのどの要素にどんなスタイルを当てるか、という風に宣言的に記述する言語だ。 この特性ゆえに開発者は、このスタイルをどこの要素に適応させるべきかと考え、セレクタ名を付け、HTMLの属性値に書く。 しかし、この「セレクタ名をどう付けるか」と考えることが、Webページのデ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く