2015 年に推奨される 12 のベスト CSS 開発ツール_html/css_WEB-ITnose

CSS でできることは、Web ページのレイアウト、組版、文字間隔などを変更することですが、新しい CSS3 プロパティとそれぞれのブラウザー プレフィックスに触れると、CSS を書くのは簡単な作業ではありません。とても神経をすり減らしていることがわかるでしょう。ありがたいことに、私たちを支援してくれる優れた開発者からオンラインで入手できる Web アプリケーションが多数あります。

1. Skyline

Skyline は、よく考えられた CSS アーキテクチャを作成するのに役立ち、再利用可能で保守可能なコードベースを開発できます。独自のデザイン システムをサポートするための足場として機能し、BEM 表記を使用して SCSS で記述されたオブジェクト指向 CSS を促進します。各 URL はブックマークレットとして使用されるように設計されています。iframe の読み込みが完了すると、DOM に対してインライン スタイルがチェックされ、未使用のスタイルが見つかります。

3. js/css/html プロジェクト用のビルド ツールです。高次の js/css/html 言語 (CoffeeScript、es6、JSX、Handlebars、Dust、Nunjucks、Stylus、Less、Jade、Twig) からのソース コードを自動的にコンパイルします。 js ファイルをモジュール定義にラップし、js/css/html の依存関係を静的に解決し、すべてのソースをバンドルに連結して (オプションで圧縮して)

4. CSS Burrito

CSS Burrito は組織向けの Sass です。 application.scss、libs、6 つのコア コンポーネント、およびモジュールの 4 つの主要な要素が含まれるテンプレートです。その目的は、プロジェクトをより適切に拡張できるようにコードを整理することです。

5. SpaceBase は Sass ベースのレスポンシブです。 CSS フレームワーク : 多くの CSS フレームワークは、含めてそのままにすることを目的としていますが、spaceBase は、今日のレスポンシブ Web のベスト プラクティスと、あらゆるプロジェクトで使用されるコア コンポーネントを組み合わせて構築できるボイラープレート レイヤーです。サイバースペースへの冒険の出発点と考えてください。

6. コントラスト比

任意の 2 つの有効な CSS カラー間のコントラスト比を計算するツール

7. Penthouse は、高速化のためのクリティカル パス CSS ジェネレーターです。 Web ページのレンダリング。ページに関連する完全な CSS を調べ、ページのスクロールせずに見える範囲のコンテンツをレンダリングするために必要な CSS を提供し、時間とサーバー リソースを節約します。

8. Iconizr

A PHP画像の最適化と Sass 出力をサポートする、SVG 画像を一連の CSS アイコン (SVG および PNG、単一のアイコンおよび/または CSS スプライト) に変換するためのコマンド ライン ツール。 MIT ライセンス .

9. deSVG

deSVG を使用すると、HTML からインライン SVG の肥大化を簡単に削除でき、JavaScript がなくても SVG にアクセスできるようになります。

Strip CSS Comments を使用すると、CSS ファイルからコメントを削除してファイル サイズを削減できます。 gulp/grunt/broccoli プラグインとしても利用できます。

11. SkyBlue は CSS フレームワークです。グリッド、タイポグラフィー、テーブル、フォーム、ボタン、アイコンを提供します。

12. CSS Critic

カスケード スタイル シートの回帰テスト用の軽量ツールである CSS Critic は、提供された参照画像に対して現在のレイアウトを常にチェックします。過去には、レイアウトが壊れた場合 (または単に変更された場合 - CSS 評論家にはわかりません)、テストは失敗します。