فرمت‌کننده CSS

قالب‌بندی CSS چیست؟

قالب‌بندی CSS فرآیند افزودن تورفتگی، شکست خط، و فاصله‌گذاری یکنواخت به استایل‌شیت‌ها است تا کد برای انسان خوانا باشد. مرورگرها فضای خالی در CSS را کاملاً نادیده می‌گیرند. یک CSS فشرده‌شده در یک خط و یک استایل‌شیت تورفتگی‌دار، رندر یکسانی تولید می‌کنند. تفاوت در خوانایی است: CSS قالب‌بندی‌شده به شما امکان می‌دهد سلکتورها را اسکن کنید، سمی‌کالن‌های گمشده را بیابید، و آبشار را در یک نگاه درک کنید.

یک قالب‌بند CSS (که گاهی زیباساز CSS یا pretty-printer هم نامیده می‌شود) CSS فشرده یا ناهماهنگ را می‌گیرد و آن را با تورفتگی یکنواخت، یک اعلان در هر خط، و قرارگیری یکسان آکولادها بازنویسی می‌کند. این عملیات معکوس کوچک‌سازی است که به آن زیباسازی یا pretty-printing نیز می‌گویند. در حالی که کوچک‌سازی فضای خالی را برای کاهش حجم فایل در محیط تولید حذف می‌کند، قالب‌بندی ساختار را برای توسعه، بازبینی کد، و نگهداری کدبیس بازمی‌گرداند.

مشخصات CSS (W3C CSS Syntax Module Level 3) دستور زبان استایل‌شیت‌ها را تعریف می‌کند، اما هیچ‌چیزی درباره قراردادهای فضای خالی نمی‌گوید. قوانین قالب‌بندی یک تصمیم تیمی است: تب در مقابل فاصله، تورفتگی ۲ یا ۴ فاصله‌ای، سبک آکولاد، خطوط خالی بین مجموعه‌قوانین. یک قالب‌بند هر قراردادی را که انتخاب کنید به‌طور یکنواخت در تمام فایل‌ها اعمال می‌کند. اکثر تیم‌ها انتخاب خود را در فایل .prettierrc یا .editorconfig مستند می‌کنند.

چرا از این قالب‌بند CSS استفاده کنیم؟

هر CSS دلخواهی را پیست کنید و در میلی‌ثانیه خروجی با تورفتگی مناسب دریافت کنید. نیازی به نصب افزونه ویرایشگر، نوشتن فایل‌های پیکربندی، یا ایجاد حساب کاربری نیست.

موارد استفاده قالب‌بند CSS

مرجع ترتیب ویژگی‌های CSS

اکثر قالب‌بندهای CSS ویژگی‌ها را مرتب نمی‌کنند. اما بسیاری از راهنماهای سبک توصیه می‌کنند ویژگی‌های مرتبط را با هم گروه‌بندی کنید. جدول زیر یک قرارداد رایج گروه‌بندی را که توسط ابزارهایی مانند افزونه order از Stylelint و CSScomb استفاده می‌شود نشان می‌دهد:

این گروه‌بندی یک قرارداد است، نه یک الزام CSS. مرورگرها اعلان‌ها را بر اساس ویژگی‌مندی و ترتیب منبع اعمال می‌کنند، بدون توجه به موقعیت ویژگی در داخل یک بلوک قانون. یک قالب‌بند بر فضای خالی و تورفتگی تمرکز دارد؛ مرتب‌سازی مجدد ویژگی‌ها یک دغدغه لینتینگ جداگانه است که توسط ابزارهایی مانند Stylelint مدیریت می‌شود.

قالب‌بندی CSS در مقابل کوچک‌سازی CSS

قالب‌بندی و کوچک‌سازی عملیات معکوس هستند که در مراحل مختلف توسعه اعمال می‌شوند:

مثال‌های کد

نحوه قالب‌بندی CSS به‌صورت برنامه‌نویسی در زبان‌ها و محیط‌های مختلف:

import * as prettier from 'prettier'

const ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

const formatted = await prettier.format(ugly, {
  parser: 'css',
  tabWidth: 2,
  singleQuote: true,
})
// → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}\n"

import cssbeautifier

ugly = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}'

opts = cssbeautifier.default_options()
opts.indent_size = 2

formatted = cssbeautifier.beautify(ugly, opts)
# → "body {\n  margin: 0;\n  padding: 0;\n}\n\nh1 {\n  font-size: 2rem;\n  color: #333;\n}"

# Format a single file in place
npx prettier --write styles.css

# Format all CSS files in a directory
npx prettier --write "src/**/*.css"

# Check formatting without modifying files
npx prettier --check "src/**/*.css"

# Pipe minified CSS through stdin
echo "body{margin:0;padding:0}" | npx prettier --parser css

<?php
// composer require sabberworm/php-css-parser
require 'vendor/autoload.php';

use Sabberworm\CSS\Parser;
use Sabberworm\CSS\OutputFormat;

$input = 'body{margin:0;padding:0}h1{font-size:2rem;color:#333}';

$document = (new Parser($input))->parse();
echo $document->render(OutputFormat::createPretty());
// → body {
//     margin: 0;
//     padding: 0;
//   }
//   h1 {
//     font-size: 2rem;
//     color: #333;
//   }

سؤالات متداول