15 の優れた CSS ソリューションとツールを共有する_html/css_WEB-ITnose

CSS コードは、特に大規模なプロジェクトでは管理が難しい場合があります。 スタイルはグローバル スコープで記述され、複雑なセレクターを通じて特定のページ要素を指します。冗長性、肥大化、メンテナンスはフロントエンド開発者にとって悪夢となる可能性があります。幸いなことに、開発者がこの状況を克服するのに役立ついくつかの CSS ツールがあります。ここでは、CSS コードを管理するための 15 の優れた CSS ツールのコレクションを共有します。

1. Ballon.css

Balloon.css を使用すると、純粋な CSS を使用して簡単なツールチップを作成できます。また、疑似要素が既に含まれている場合には、JavaScript は必要ありません。要素上で使用すると、ツールチップがそれらと競合し、潜在的なバグが発生します。

2. Hugo

Hugo は、Go で書かれた静的 HTML および CSS ウェブサイトジェネレーターであり、Hugo の速度、使いやすさ、構成のしやすさを考慮して最適化されています。 Hugo は、コンテンツとテンプレートを含むディレクトリを作成し、それらを完全な HTML Web サイトにレンダリングします。Hugo は、メタデータのフロントマターを含む Markdown ファイルに依存します。また、これは、共有ホストや他のシステムでも実行できます。特権アカウントをお持ちください。

3. Atomizer Web

Atomizer は、プロジェクトで実際に使用している Atomic クラスから Atomic スタイルシートを動的に生成するか、スタイルを事前宣言するためのツールです。 Atomizer は独自の CSS を持たず、お気に入りのタスク ランナーとうまく統合します。4. Repaintless

Repaintless.css はアニメーションのみで構成される軽量のアニメーション ライブラリです。正しく使用すると、Web サイトのリフローや再描画が発生しないライブラリのアイデアは、アニメーションと FLIP テクニックに関する Paul Lewis の講演を見て思いつきました。基本的なアイデアは、アニメーション中にトランジションを適用するのではなく、要素からトランジションを削除することです。これにより、アニメーションが開始されるまでのわずかな遅延が軽減され、非常にスムーズに感じられます。コンセプトをよりよく理解するには、このブログ投稿を読むか、少なくとも次の投稿からの引用を読むことができます。保守可能で、慣用的で、適切に構造化された BEM スタイルの .scss ソース コードを作成するための mixins。Ruby Gem、NPM モジュールとして、または Bower 経由でインストールできます。

6. Stellar は、役立つ LESS ライブラリです。 Web アプリをスキャフォールディングします。使い方は簡単で、ほとんどの最新ブラウザでサポートされています。

7. StringBean

他のフレームワークが使用する従来の 12 ポイント システムではなく、24 ポイント システムに基づく非常に軽量なレスポンシブ CSS フレームワークです。場合によっては、特に 4K などの高解像度画面では、12 では少なすぎることがあります。4K では String Bean が真価を発揮し、開発者は画面をより細かく制御できるようになります。サイト上のコンテンツの幅、特に高解像度での幅 (HD および UHD (2K、3K、4K、およびそれ以上) を考えてください)。

8. Min

Min は、わずか 995 バイトの非常に小さな CSS フレームワークです。優れたブラウザーサポートとセマンティックマークアップを備えています。Min は非常に軽量であり、Bootstrap のような特定のデザインを規定するものではありません。デフォルトのルールは非常に少なく、特異性レベルが低いため、簡単にオーバーライドできます。このカスタマイズ機能により、Yet Another Bootstrap Site 現象を回避できます。

9. Voxel.css

Voxel.css は、すべての画像タイプをサポートしており、GPU アクセラレーションと CSS3 トランジションを備えています。

10.

Timelined は完全にカスタマイズ可能な CSS 専用の垂直タイムラインです。

11. Colorfilter

Colofilter.css を使用すると、CSS を使用して写真に簡単にダブルトーン フィルターを追加できます。クールな効果ですが、すべてのブラウザで機能するわけではないので、ミッションクリティカルな用途には使用しないようにしてください。

12. UnMQ

UnMQ は、ハードウェアに一致するルールを保持しながら、CSS からメディア クエリを削除します。コード化されたビューポートは、IE8 などの古いデスクトップ ブラウザー用の CSS を出力するのに役立ちます。

13. Utlity Open Type

Utility OpenType は、高度な文字体裁機能を作成するためのシンプルな CSS ユーティリティ クラスを提供します。大文字と小文字を区別するフォームなど。

14. Flexbox.help

Flexbox.help を使用すると、Flexbox の最適な使用方法を理解するための優れたサンドボックスです。

15. CSSketch は Sketch 3 に CSS サポートを追加し、ワークフローを高速化します。スタイルシートをデザインに添付するだけで、色や影をすばやく変更したり、デザインをレイアウトしたりできます。