より良いCSSを書くための様々なCSS設計まとめ
CSSは誰でも簡単に自由に書けるのですが、好きなように書いていると「ここを変更したら、違うところが崩れた」といったようにすぐに破綻してしまいます。 さらに、複数人で書いている場合は、各々が好きなように書いて読むだけでも苦痛なCSSが出来上がってしまいます。 そこで、これらの問題を解決するために考えられたのが「CSS設計」です。 今回は記事が長くなり過ぎるので、CSS設計の概要のみを説明し、参考となる公式ドキュメントへのリンクを記載しました。 CSS設計とは CSS設計は、CSSを記述する時のルールとなるものです。プロジェクト毎に適したCSS設計を採用することで、「良いCSS」にすることができます。 最近では、命名規則はBEMで、構成はSMACCSのように各CSS設計の概念を取り込んだオリジナルの規約をつくるといったことも多いようです。 「良いCSS」とは 「良いCSS」の定義として、おそら
CSS設計の選定に学ぶ仕事術 - Developer’s Blog
選定作業には責任がつきまとう。 おはようございます おやすみなさい 皆さま、初めまして。今回のプロジェクト開発者の一人コースケと申します。 本日は連載中の尾形（以降リーダーと呼びます）に代わり特別編といたしましてイチ開発者である僕からフロントエンド挑戦における失敗談を皆さまにお伝えさせてください。 不安の中始まったフロントエンドの挑戦 今回のプロダクトで僕が任されたのは、フロントエンド周り全般。 特に、デザイン周りでは自分一人で結構な量の調査や選定、実践を行ないました。 HTML/HTML5の調査 CSS/CSS3の調査 Sassの調査 CSSデザイン/設計の参考書の選定 設計方針の選定 参考となる規約の選定 プロトタイプの作成 などなど。 フロントエンドの調査に僕一人で突っ込まれて孤立しながら、右も左もわからぬまま「初心者」と「入門」を＆検索にググり続けました。。 ※画像はイメージです。
チーム作業をするための最適なCSS規約、Sassについて考えた - Developer’s Blog
こんにちは、エンジニアの尾形です。 前回のブログではHTML/CSSコーディングを行なうにあたっての事前準備についてお伝えしました。 今回はCSS規約やSassによるコーディングの実例について、ごく一部ではありますが、ご紹介します。 FLOCSSをベースとした構成について 前回のブログで少し触れましたが、CSSコーディングを行なうにあたり、FLOCSSをベースとしたCSS規約を作成しました。 数あるCSS方法論の中でFLOCSSを採用した理由は以下の通りです。 コンポーネントの概念がエンジニアにとって馴染みやすい。 候補のひとつであったBEMの概念が含まれている。命名しやすい。Sassとの相性が良い。 再利用性や拡張性が高く、機能追加や仕様変更に柔軟に対応できそう。 情報量が比較的多くわかりやすい。 FLOCSS本家サイト hiloki/flocss: CSS organization m
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
