CSSプリプロセッサは、一度にCSSコードを書く作業を大いに促進しました。 しかし、ある意味では、それらはすべて不完全であり、作業に重大な欠陥がありました。 したがって、PostCSSポストプロセッサがプリプロセッサを置き換えました。
これは、CSSの操作を簡単にする非常に強力なツールです。 ポストプロセッサは、今日TwitterやGoogleなどの大企業ですでに使用されています。 さらに、Bootstapの開発者によると、CSSフレームワークの5番目のバージョンもPostCSSで作成される可能性が高いとのことです。
ここの多くは、おそらく簡単な処理にすでに慣れているでしょう。 誰かが既にすべてのプロジェクトでPostCSSを積極的に使用しています。誰かがそれを使い始める予定です。
フロントエンドWeb開発の分野で作業をスピードアップするために、私はgenerator-alchemistと呼ばれる独自のYeomanジェネレータを作成しました。 彼とインターネットサイトの開発プロセスについては、この記事で説明します。
構図
ヒスイ
Jadeテンプレートエンジンの使用はオプションです。 インストール中にYeomanジェネレーターを使用すると、新しいプロジェクトでJadeを使用するかどうかを選択できます。
インストール後、/ src / jade /フォルダーにJadeコードを書き込むと、自動的にHTMLにコンパイルされます。
HTML
HTMLヒント
Jadeをコンパイルした後、HTMLファイルは/ src / html /フォルダーに置かれます。W3Cはコードを検証し、/ dist /フォルダーに移動します。 Jadeを使用していない場合は、/ src / html /フォルダーにHTMLコードを記述します。
CSS
初期CSSファイルには、いくつかの基本的なものが含まれています。
CSSを正規化する
グリッドシステム
<div class="container"> <div class="row"> <div class="col-8"> Content block </div> <div class="col-4"> Right sidebar </div> </div> </div>
Postcss
そして、ここから楽しみが始まります。 プロジェクトのアセンブリには、CSSを迅速かつ効率的に記述できる多数のPostCSSプラグインが含まれています。 以下は私が使用するプラグインのリストです。
Clearfix
Clearfix属性を追加して、フローティング要素をクリアします。
それは：
.foo { clear: fix; } .bar { clear: fix-legacy; }
次のようになりました：
.foo:after{ content: ''; display: table; clear: both; } .bar { clear: fix-legacy; } .bar:before, .bar:after { content: ''; display: table; } .bar:after { clear: both; } .bar { zoom: 1; }
カラーショート
色名の略語を許可します。
それは：
.hello { border-bottom: 1px solid rgb(200); background: #20; color: #f; box-shadow: 0 1px 5px rgba(0, 0.5); }
次のようになりました：
.hello { border-bottom: 1px solid rgb(200, 200, 200); background: #202020; color: #fff; box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); }
CSS Mqpacker
メディアクエリをグループ化し、CSSドキュメントの最後に配置します。
CSS Nano
本番用にCSSコードを縮小するための非常に強力なツール。
CSS Next
今日、CSS-4のパワーを使用できます。
この記事で CSS Next機能について読むことができます。
コメントを破棄
CSSコードからすべてのコメントを削除します。 以前は、CSS Nanoプラグインはこのタスクの素晴らしい仕事をしていましたが、PostCSSをバージョン5.0.xに更新した後、この機能は動作しなくなりました。 開発者がすぐにこの問題を修正することを願っています
フォーカス
以下を追加します：focus疑似要素：すべてのセレクター：ホバーが使用されます。
それは：
.button:hover { background: red; }
次のようになりました：
.button:hover, .button:focus { background: red; }
Precss
CSSの操作でSass構文を使用できます：ネスト、変数など。 PreCSSのすべての機能の詳細については、プラグインのページをご覧ください。
それは：
$blue: #056ef0; $column: 200px; header { background: $blue; width: $column; h1 { font-size: 18px; } }
次のようになりました：
header { background: #056ef0; width: 200px; } header h1 { font-size: 18px; }
Pxtorem
pxからremとemを生成するプラグイン。
それは：
p { font-size: 16px; }
次のようになりました：
p { font-size: 1rem; }
ショート
CSSコードの記述を減らすことができるもう1つの強力なPostCSSプラグイン。
それは：
.section { margin: 40px; text: bold center uppercase dimgrey 1.25em 1.5 .05em; } .section.inset { margin: * auto; }
次のようになりました：
.section { margin: 40px; color: dimgrey; font-weight: bold; text-align: center; text-transform: uppercase; font-size: 1.25em; line-height: 1.5; letter-spacing: .05em; } .section.inset { margin-right: auto; margin-left: auto; }
大きさ
要素の幅と高さを示すCSSサイズプロパティを追加します。
それは：
.two { size: 20px 10px; } .one { size: 10px; }
次のようになりました：
.two { width: 20px; height: 10px; } .one { width: 10px; height: 10px; }
Javascript
ユージフィー
/ src / js /フォルダーにあるJavaScriptコードを縮小し、縮小したファイルを/ dist / js /フォルダーに送信します。
画像
Imagemin
/ src / images /フォルダーにある画像を縮小し、/ dist / images /フォルダーに送信します。
サーバー
Gulp.jsの起動と同時に、BrowserSyncを使用してローカルサーバーを起動します。
http://localhost:3000
設置
ジェネレーターをインストールする前に、コンピューターにインストールする必要があります。
上記のすべてがすでにインストールされている場合は、ターミナルで次のコマンドを実行して、ジェネレーターをグローバルにインストールします。
$ sudo npm install -g generator-alchemist
次に、ジェネレーターを将来のプロジェクトのフォルダーに初期化します。
$ yo alchemist
以上です。 プロジェクトの作業を開始するために必要なすべてのファイルがインストールされます。 Gulpを実行するだけです。
$ gulp
Jade / HTMLコードをフォルダーに書き込みます/ src / jade /または/ src / html /
/ src / css /フォルダーにCSSコードを記述します
/ src / js /フォルダーにJavaScriptコードを記述します
/ src / images /フォルダに画像を入れてください
そして、すべてのファイルは自動的に最適化され、/ dist /フォルダーに公開されて本番になります。
ご清聴ありがとうございました！
github.com/azat-io/generator-alchemist