こんにちわ、エンジニアの井原です。 どの会社も同じだとは思いますが、自社サービスをフルスクラッチしていた最初のころというのは突貫で作っている部分が少なからずあると思います。 弊社もそういった部分が多々あり、特にフロントエンドは手付かずな状態でした。 この混沌としたフロントエンドに漠然とした不安はあるものの、ルールが全くないため全員が同じ思いになってなく、何をもって悪いと言えるのかといった状態になっていました。 そのため、何が悪いのか、どうしたらいいのかという方針作りからはじめました。 本稿では、方針を作るプロセスとできた方針をいかにまもってもらうかという流れを記載します。 現状を確認する インデント..? styleプロパティ 重複したid 大量のcssファイル ロード目的以外のscriptタグとstyleタグ HTML4のころのタグ invalidなcss etc... あるべき論なルー
CSSを拡張するためのメタ言語として、代表的なものに「SCSS(Sass)」と「LESS」があります。今回、導入を検討するにあたり、両者を比較しました。 結果的には、「SCSS(Sass)」を導入することにしましたが、特に「SCSS(Sass)」を選択する決め手となった点に重点を置きつつ、両者の違いをまとめまてみました。 はじめに Webサイト、Webアプリケーションが大規模になるにつれて、CSSの設計・管理にもリソースを割かれるようになります。CSSのモジュール化、コンポーネント化による再利用性を考えたとき、現状のCSSを取り巻く状況は十分とは言えません。 一つの選択肢としてあがるのが「Blueprint」や「960 Glid System」等のCSSフレームワークの利用ですが、その再利用性と構造・表現の分離度はトレードオフです。 そこで、CSSの利点を活かしつつ、再利用性を高めるために
CSSの保守に便利なcsscombとscss-lintについて説明します。 scss-lint scss-lintは、SCSSのコードから与えた設定に違反している箇所を報告してくれるツールです。jslintやrubocopのSCSS版のようなものです。これをCI等で定期的に実行しておくことで、ルールに違反したコードの蔓延を防ぎます。 csscomb csscombはNode製のツールで、CSSのコードを与えた設定に従って自動で変換してくれるものです。scss-lintを初めて導入するときに利用すれば、大半の警告を自動で修正してくれるでしょう。但しCSSの文法しか解釈できないため、SCSSに適用すると失敗する場合があります。SCSSで書かれたファイルに対して適用してみたところ、@includeなどの文法は受理されるものの、@ifなどの文法を受理できないようです。しかしながら問題となるケースが
補足 つまり、これからSassを使い始めるなら、SCSSの構文（ファイル名 *.scss）で書いた方が良いってことです。 原文ページ http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#syntax 超意訳 Sassには二つの構文があります。一つ目は、SCSS（Sassy CSS）として知られ、このドキュメントを通じて使われている、CSS3の構文を拡張したものです。全ての有効なCSS3スタイルシートは、SCSSファイルとしても有効です。加えて、SCSSは多くのCSSハックと、IEの古いフィルタ構文などのブラウザ固有の構文が使えます。この構文は、以下で説明するSassの機能で拡張されています。SCSSの構文で書かれたファイルは、.scssの拡張子を持ちます。 二つ目は古い構文で、インデント構文（単に“Sass”とも言われます）と
CSSを拡張したメタ言語であるSass、そしてその別文法として定義されたSCSSについて、960.gsなどのCSSフレームワークと絡めて、Sass (主にSCSS)の良さを解説する。 CSSフレームワーク Sass Sassy CSS aka SCSS SCSSでCSSフレームワーク 2カラムレイアウトの作成 clearfixやReset CSSの組み込み カラム幅の変更 カラムの入れ替え SCSSで完結することの意義 まとめ 最後に CSSフレームワーク 960.gsやBlueprint、BlueTripなどCSSフレームワークと呼ばれるものは色々ある。フレームワークと名乗るだけのことはあって、それらの生産性はとても高い。テンプレートで適切にクラス名やIDを埋め込むだけなので、複雑怪奇なCSSコーディングを意識することなく誰でも簡潔にきれいなカラム・レイアウトを作成できる。 HTML 4
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
