ステータス：非推奨

この記事では、サポートされなくなったバージョンのUbuntuについて説明します。 現在Ubuntu12.04を実行しているサーバーを運用している場合は、サポートされているバージョンのUbuntuにアップグレードまたは移行することを強くお勧めします。

理由：
Ubuntu 12.04は2017年4月28日に保守終了（EOL）に達しました and no longer receives security patches or updates. This guide is no longer maintained.

代わりに参照してください：
このガイドは参照として役立つ場合がありますが、他のUbuntuリリースでは機能しない場合があります。 可能な場合は、使用しているUbuntuのバージョン用に作成されたガイドを使用することを強くお勧めします。 ページ上部の検索機能を使用して、より新しいバージョンを見つけることができます。

休憩について

Recess は、Twitterによって開発されたコード品質ツールであり、ガイドラインを適用することで、より優れたcssの作成を支援します。 LESSの上に構築されたRecessは、開発プロセスのリンターとして使用して、コードをクリーンで保守しやすい状態に保つことができます。

このチュートリアルでは、Ubuntu12.04を実行しているVPSにRecessをインストールします。 独自の仮想プライベートサーバーと、Node.jsおよびNPM（Node Packaged Modules）がすでにインストールされている必要があります。 そうでない場合は、このチュートリアルで概説されている手順に従ってセットアップしてください。

インストール

NodeとNPMが仮想サーバーに配置されたら、次のコマンドを実行してRecessをインストールします。

npm install recess -g

今楽しい部分：休憩を使用する

では、このクールなコードヘルパーをどの程度正確に使用しますか？ さて、cssの記述についてはいくつかの標準的なルールがあります。 たとえば、セレクターを過剰に修飾したり、セレクターで#idsを使用したりしないでください。 Recessはその構成にこれらのルールのいくつかを組み込んでおり、cssファイルを実行してそれらをチェックすることができます。

Recessをインストールすると、すぐに使用できる次のルールがあります。

  • noIDs-#fooのようなスタイルIDを’しないでください
  • noJSPrefix-Don ‘ tstyle.js-プレフィックス付きクラス名
  • noOverqualifying -div＃foo.barのようにセレクターを過剰に修飾しないでください’
  • noUnderscores-.my_classなどのクラスに名前を付けるときにアンダースコアを使用しないでください’
  • noUniversalSelectors-ユニバーサルセレクターを使用しないでください*
  • zeroUnits-単位を0pxなどの値0に追加しないでください’
  • strictPropertyOrder -厳密なプロパティの順序を適用します（順序はここで定義されています）

テストするには、簡単なcssファイルを作成し、次のように貼り付けます。

#my-id {
 color:red;
}
.my_bad_class {
 color:red;
}

Save the file and exit. Now run the following command in your terminal:

recess path/to/css/file.css

This command will check your file and report the problems. In our test css file we broke 2 rules, so Recess should flag them. If you want to have it run through all the css files in a folder, run the command like this:

recess path/to/css/folder/*

This will target all css files in that folder.

Now say that for some reason you want to use #ids in your css and don’t want Recess to flag them. You can run the following command:

recess path/to/css/file.css --noIDs false

With this command, you pass an option to set that particular rule to false. You can add even more if you’d like:

recess path/to/css/file.css --noIDs false --noUnderscores false

This will now show you that our test file is perfect since neither of the rules we broke are now flagged.

But let’s say you don’t want to keep passing these options everytime and you want Recess to always take into account that these rules should not be checked against. You need to create a config file called .recessrc. このファイルを配置できるオプションは2つあります。

  • recessコマンドを実行するフォルダーにファイルを配置できます。 この場合、あなたがしなければならないのはオプションなしでコマンドを実行することだけであり、設定が取得されます。
  • recessコマンドを実行した場所とは別のフォルダーに配置します。 この場合、オプションとして設定ファイルへのパスを渡す必要があります。 例：
recess path/to/css/file.css --config=path/to/config/.recessrc

But what do you place inside the file? Well that depends on what you want to rule out. If you want to make sure the noID and noUnderscores rules are not taken into account, you can paste the following:

{
"noIDs": false,
"noUnderscores": false
}

Another cool thing is that you can use Recess to compile the css (or LESS) file and make some automated changes for you. For example, if the order of your properties is not good, you can have Recess compile the file and output to the terminal the css file in the right property order. Just add the – コンパイル option to the command:

recess path/to/css/file.css --compile

It can’t fix all the broken rules but it will normalize whitespace, strip units from 0 values, and reorder the properties. And if you want to automatically save the result of the compilation, you can use the following command:

recess path/to/css/file.css --compile > path/to/css/compiled-file.css

Keep in mind though that whenever you run this command, the results of the Recess compilation of the first css file will replace the contents of the second css file in the command.

I hope you find Recess helpful and a great addition to your frontend development process.

投稿者： Danny