cssの設計を考えるにあたり参考にした設計思想
こんにちは、てっちゃんです。 みなさんはお花見しましたか？今年は安定した暖かさで例年よりもすごしやすかったなと思いました。 そして、私事ですがこの春から花粉症デビューになりそうというお話をいただきまして、毎日マスクが手放せません。いやー、のどのイガイガがたまらなく嫌ですね。 今回は、cssの設計について調べたことを書いていこうと思います。 弊社でもフロントエンド陣によりある程度のコーディングガイドラインは決まっていますが、 記述の細かい仕様までには及んでいません。コンポーネントの作り方なども人によって差異が出てきます。 複数人で作業とも慣れば尚更その差異は大きくなります。cssは記述自体はとても簡単でそれゆえに、とてももろくすぐに壊れてしまいます。 参考：なんでCSSすぐ死んでしまうん そこで壊れにくcssを設計するためには以下が重要だと言われています。 拡張性 保守性 明瞭性 参考：CS
SMACSSにBEMを取り入れたクラス名の命名規則 | SONICMOOV LAB
はじめに みなさまこんにちは！おはようございます！ マークアップエンジニアのうさこでございます！ またお前か・・・という声が聞こえてきそうですね・・・？花粉なんて爆発してしまえばいいと思っている今日この頃でございます。 さて・・・今回はコーディングをする際にきっと頭を抱える方も多いのでは・・・ クラス名の命名規則についてです！！ クラス名の命名・・・地味で単純な作業ですが、悩み始めると止まらず時間のロスに繋がっているのは紛れも無い事実なのです。。 目次 考え方 基本形 Prefix Block Element Modifier 注意点 さいごに 参考URL 考え方 目標はやはりこの4つとなります！ 予測しやすい 再利用しやすい 保守しやすい 拡張しやすい なぜ SMACSS と BEM なのか BEM の Block や Element の考え方は素敵すぎるのですが、クラス名がものすごく冗
BEMという命名規則とSass 3.3の新しい記法 - アインシュタインの電話番号
BEMを使った命名がとても明快で、このところHTMLやCSSを書くのによく使っている。CSSのクラス名として書く場合は、BEMをCSS用に使いやすくしたMindBEMdingという書き方を採用している。最初にこれを知ったときは「こんな汚い記述の仕方は使いたくない」と思ってたんだけど、すっかり慣れて、今ではその明快さにちょっと心酔しかけているほど。 BEMの方法論とMindBEMdingのルールについてはそれぞれの文書を読んでもらうとして、それらをひっくるめて大雑把に説明すると、BEMとはBlock、Element、Modifierの頭文字を取ったもので、構成する要素をそのどれかに当てはめて命名していく方法。どの場合でも必ずBlockもしくはそのModifierがルートにあり、その中に、所属するElementもしくはそのModifierが含まれる構成になる。 Block - 構成のルートとな
skpn.com - skpn リソースおよび情報
skpn.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、skpn.comが全てとなります。あなたがお探しの内容が見つかることを願っています！
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
