منسّق CSS

ما هو تنسيق CSS؟

تنسيق CSS هو عملية إضافة مسافات بادئة منتظمة وفواصل أسطر ومسافات إلى أوراق الأنماط المتتالية (Cascading Style Sheets) لجعل الكود مقروءاً للإنسان. تتجاهل المتصفحات المسافات البيضاء في CSS كلياً. فالكود المضغوط في سطر واحد وورقة الأنماط المنسّقة بعناية ينتجان عرضاً متطابقاً. الفارق يكمن في قابلية القراءة: CSS منسّق يتيح لك مسح المحددات ورصد الفاصلة المنقوطة المفقودة وفهم التسلسل بنظرة سريعة.

منسّق CSS (يُسمى أحياناً مجمّل CSS أو CSS prettifier) يأخذ كوداً مضغوطاً أو غير منتظم الأسلوب ويعيد كتابته بمسافات بادئة موحدة وتصريح واحد في كل سطر ووضع متسق للأقواس. هذه العملية عكس الضغط، وتُسمى أيضاً التجميل أو pretty printing. بينما يُزيل الضغط المسافات البيضاء لتقليل حجم الملف في بيئة الإنتاج، يُعيد التنسيق البنية للتطوير ومراجعة الكود وصيانة قاعدة الكود.

تحدد مواصفة CSS (وحدة W3C CSS Syntax Module Level 3) القواعد النحوية لأوراق الأنماط، لكنها لا تقول شيئاً عن اتفاقيات المسافات البيضاء. قواعد التنسيق قرار يتخذه الفريق: مسافات جدولة (tabs) أم مسافات عادية، مسافتان أم أربع مسافات للمسافة البادئة، أسلوب الأقواس، أسطر فارغة بين مجموعات القواعد. يُطبّق المنسّق أيّ اتفاقية تختارها باتساق عبر كل ملف. تُدوّن معظم الفرق خيارها في ملف .prettierrc أو .editorconfig.

لماذا تستخدم هذا المنسّق؟

الصق أي CSS واحصل على مخرجات منسّقة بشكل صحيح في أجزاء من الثانية. بدون إضافات محرر تحتاج تثبيتها، وبدون ملفات إعداد تحتاج كتابتها، وبدون حسابات تحتاج إنشاءها.

حالات استخدام منسّق CSS

مرجع ترتيب خصائص CSS

لا تُعيد معظم منسّقات CSS ترتيب الخصائص. لكن كثيراً من أدلة الأسلوب توصي بتجميع الخصائص ذات الصلة معاً. يعرض الجدول أدناه اتفاقية التجميع الشائعة المستخدمة في أدوات مثل إضافة ترتيب 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;
//   }

الأسئلة الشائعة