タグ

2015年7月8日のブックマーク (3件)

  • SMACSSによるCSSの設計 | 前編 ベースとレイアウト

    はじめに SMACSSとは、Scalable and Modular Architecture for CSSの略語で、「スマックス」と読みます。 SMACSSはCSSの設計手法のひとつで、CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴的な手法です。 SMACSSの考え方 CSSのカテゴライズ SMACSSでは、CSSのルールを次の5つのカテゴリに分類しています。 ベース:要素そのもののデフォルトスタイル レイアウト:ページをエリアごとに分割 モジュール:再利用可能なパーツ 状態(ステート):レイアウトやモジュールの特定の状態を示す テーマ:サイトのルック&フィールを定義 それぞれの具体的な解説は、以降で行います。 SMACSSで設計する目的 書籍『Scalable and Modular Architecture for CSS(日

    SMACSSによるCSSの設計 | 前編 ベースとレイアウト
  • 脱カオスなCSSのために実践している7つの事 - Toro_Unit

    突然ですが、CSSってカオスですよね。 CSSはすべてを命名で統制をとる紳士協定 #frontrend — (╯°□°)╯︵ uɐʇoɔod (@pocotan001) 2014, 6月 21 まぁそうですよねー。紳士協定とはうまいこと言ったもんです。言語仕様としてどうしようもない。全部グローバル。JavaScriptとかでやったらまずクソコードって言われるやつです。 そうはいっても、レスポンシブだとかでどんどん肥大化していく一方なので、何とかしないと身の破滅です。 とりあえず結論として、FLOCSSやれば良いんじゃないですかね。と言ってしまうのもあれなので、とりあえず実行している事を箇条書きで。 とりあえず何かしら公開されているCSS設計思想を取り入れる。 何かしら入れましょう。SMACSSでもMCSSでもFLOCSSでもモジュール組みでも、とりあえずなんでも良いかと思います。大事なのは

    脱カオスなCSSのために実践している7つの事 - Toro_Unit
  • CSSコーディングで泣かないためのSassの基礎知識と10の利点

    CSSコーディングで泣かないためのSassの基礎知識と10の利点:爆捗! WordPressテーマ作成ショートカット(3)(1/3 ページ) 連載では、CMSのスタンダードでもある「WordPress」のテーマ作成を、Dreamweaverをメインに用いてさまざまなモダンな技術を組み合わせながら爆発的に捗(はかど)らせる方法を解説していく。今回は、現場におけるCSSコーディングの3つの問題点、Sassの概要と主な10の機能、SASS記法とSCSS記法の違いなどを紹介。 連載「爆捗! WordPressテーマ作成ショートカット」では、初回の「Dreamweaverで始めるWordPressサイト構築の基礎知識」で、「Adobe Dreamweaver CC」(以下、Dreamweaver)でWordPressのテーマをカスタマイズできるようにする環境構築や設定を行い、前回の「WordPr

    CSSコーディングで泣かないためのSassの基礎知識と10の利点