タグ

関連タグで絞り込む (1)

タグの絞り込みを解除

cssとあとで読むに関するchanpon0のブックマーク (2)

  • 【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends

    CSSの設計手法とは、CSSのメンテナンス性や作業効率を向上させるためのHTMLのクラス名の付け方と、CSSのコードの管理方法の考え方のことを言います。命名規則などとも呼ばれたりしますね。 ページ数が少なく、コード量もそこまで多くないような場合はあまり気にする必要はありませんが、大きなプロジェクトになるとCSSの設計手法を取り入れることで様々なメリットがあります。 今回は、CSSの設計手法に関する基と、3つの人気のCSSの設計手法をご紹介したいと思います。 メンテナンス性が向上する CSSの設計手法を正しく取り入れることによって、全体的に管理の行き届いたコードを記述することができ、メンテナンス性が向上します。 逆に、煩雑になってしまったコードではスタイルの優先順位が複雑になってしまっていたり、!importantが随所で登場してしまっているようなコードのことで、一度コードが崩壊してしまう

    【CSS設計手法】BEM、OOCSS、SMACSSの違いと特徴のまとめ | Web Design Trends
  • エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita

    WHAT CSSには詳細度(Specificity)という概念があります. 詳細度は、どのプロパティ値が最もある要素に関係があり、適用されるかをブラウザが決定する手段です。 詳細度 - CSS | MDN 簡単に言うと,「スタイルが重複したとき,どのスタイルを優先するか」の優先度を定量評価したものになります. 詳細度はa, b, cのようなカタチで表されます. 細かい説明するのは面倒なので,ざっくりと以下にリストアップします. 全称セレクタ: a=0, b=0, c=0 * 要素,擬似要素: a=0, b=0, c=1 li, ::before, ::first-line, etc. クラス,擬似クラス,属性: a=0, b=1, c=0 .classname, :first-child, [type=password], etc. id: a=1, b=0, c=0 #idname あと

    エンジニアはもう一度CSSとちゃんと向き合ってみよう - 詳細度編 - Qiita
  • 1