การจัดรูปแบบ CSS คือกระบวนการเพิ่มการย่อหน้า การขึ้นบรรทัดใหม่ และการเว้นวรรคที่สม่ำเสมอให้กับ Cascading Style Sheets เพื่อให้โค้ดอ่านได้ง่ายสำหรับมนุษย์ เบราว์เซอร์ไม่สนใจช่องว่างใน CSS เลย CSS แบบย่อในบรรทัดเดียวและ stylesheet ที่จัดย่อหน้าอย่างเป็นระเบียบให้ผลการแสดงผลที่เหมือนกันทุกประการ ความแตกต่างอยู่ที่ความสามารถในการอ่าน: CSS ที่จัดรูปแบบแล้วช่วยให้คุณสแกน selector ค้นหาเครื่องหมายเซมิโคลอนที่หายไป และเข้าใจ cascade ได้อย่างรวดเร็ว
CSS formatter (บางครั้งเรียกว่า CSS beautifier หรือ pretty-printer) รับ CSS ที่บีบอัดหรือมีสไตล์ไม่สม่ำเสมอแล้วเขียนใหม่ด้วยการย่อหน้าที่สม่ำเสมอ หนึ่ง declaration ต่อบรรทัด และการวางวงเล็บปีกกาที่สอดคล้องกัน นี่คือการดำเนินการย้อนกลับของการบีบอัด หรือที่เรียกว่า beautification หรือ pretty-printing การบีบอัดลบช่องว่างเพื่อลดขนาดไฟล์ในการใช้งานจริง ส่วนการจัดรูปแบบคืนโครงสร้างเพื่อการพัฒนา การตรวจสอบโค้ด และการบำรุงรักษา codebase
ข้อกำหนด CSS (W3C CSS Syntax Module Level 3) กำหนดไวยากรณ์สำหรับ stylesheet แต่ไม่ได้กำหนดอะไรเกี่ยวกับรูปแบบช่องว่าง กฎการจัดรูปแบบเป็นการตัดสินใจของทีม: tab กับ space, การย่อหน้า 2 space กับ 4 space, รูปแบบวงเล็บปีกกา, บรรทัดว่างระหว่าง rule sets เครื่องมือจัดรูปแบบบังคับใช้รูปแบบที่คุณเลือกอย่างสม่ำเสมอในทุกไฟล์ ทีมส่วนใหญ่บันทึกตัวเลือกนี้ใน .prettierrc หรือไฟล์ .editorconfig
วาง CSS ใดๆ แล้วรับผลลัพธ์ที่จัดย่อหน้าอย่างเหมาะสมในเสี้ยววินาที ไม่ต้องติดตั้ง plugin สำหรับ editor ไม่ต้องเขียนไฟล์การตั้งค่า ไม่ต้องสร้างบัญชี
⚡ จัดรูปแบบทันที
ผลลัพธ์อัปเดตขณะที่คุณพิมพ์หรือวาง คุณได้รับ CSS ที่จัดรูปแบบแล้วทันทีโดยไม่ต้องรอขั้นตอน build หรือรัน CLI command
🔒 ประมวลผลโดยให้ความเป็นส่วนตัวเป็นหลัก
การจัดรูปแบบทั้งหมดทำงานในเบราว์เซอร์ของคุณโดยใช้ JavaScript CSS ของคุณไม่เคยออกจากอุปกรณ์และไม่เคยถูกส่งไปยังเซิร์ฟเวอร์ใดๆ
🎨 การย่อหน้าที่ปรับแต่งได้
เลือกระหว่างการย่อหน้า 2 space, 4 space หรือ tab เพื่อให้ตรงกับสไตล์โค้ดของโปรเจกต์ ผลลัพธ์พร้อมวางลงใน codebase ของคุณได้โดยตรง
📋 ไม่ต้องเข้าสู่ระบบ
เปิดหน้าเว็บ วาง CSS คัดลอกผลลัพธ์ ไม่ต้องสมัครสมาชิก ไม่มีการจำกัดอัตราการใช้งาน ไม่มีฟีเจอร์ที่ต้องปลดล็อก เครื่องมือเต็มรูปแบบพร้อมใช้งานทุกครั้ง
นักพัฒนา Frontend
เมื่อคุณได้รับ CSS ที่บีบอัดจาก vendor library หรือ CDN ให้จัดรูปแบบเพื่ออ่าน selector และเข้าใจว่ามันแทนที่อะไรใน stylesheet ของคุณ
วิศวกร Backend
หน้าเว็บที่ render บนเซิร์ฟเวอร์มักฝัง CSS สำคัญเป็นบรรทัดเดียว การจัดรูปแบบ CSS นั้นช่วยให้ตรวจสอบได้ง่ายขึ้นว่า style ใดถูกรวมอยู่ใน payload HTML เริ่มต้น
DevOps และ CI Pipelines
บังคับใช้การจัดรูปแบบ CSS ที่สม่ำเสมอใน pull requests โดยเปรียบเทียบผลลัพธ์ของ formatter กับไฟล์ที่ commit ไว้ ช่องว่างที่ไม่สม่ำเสมอสร้าง diff ที่รกซึ่งซ่อนการเปลี่ยนแปลงที่แท้จริง
QA และการตรวจสอบข้อบกพร่อง
เมื่อดีบักข้อบกพร่องด้านภาพ ให้จัดรูปแบบ CSS ที่คำนวณแล้วจาก DevTools เพื่อระบุอย่างรวดเร็วว่า property ใดถูกนำไปใช้และตาม specificity ลำดับใด
การโยกย้ายข้อมูล
ระบบจัดการเนื้อหาและตัวสร้างอีเมลเก็บ CSS ในฟิลด์ฐานข้อมูล ซึ่งมักถูกตัดช่องว่างออก การจัดรูปแบบ CSS ที่ดึงออกมาช่วยตรวจสอบก่อนนำเข้าใหม่
การเรียนรู้ CSS
ผู้เรียน CSS สามารถวางตัวอย่างจากบทเรียนหรือคำตอบบน Stack Overflow แล้วดูในรูปแบบที่สม่ำเสมอ ทำให้การซ้อนและ cascade เข้าใจได้ง่ายขึ้น
CSS formatter ส่วนใหญ่ไม่เรียงลำดับ property ใหม่ แต่คู่มือสไตล์หลายฉบับแนะนำให้จัดกลุ่ม property ที่เกี่ยวข้องไว้ด้วยกัน ตารางด้านล่างแสดงรูปแบบการจัดกลุ่มที่ใช้กันทั่วไปโดยเครื่องมืออย่าง Stylelint's order plugin และ CSScomb:
กลุ่ม Property ตัวอย่าง วัตถุประสงค์ Position & Layout position, display, float, clear Defines the element's rendering mode Box Model width, height, margin, padding Controls dimensions and spacing Typography font-size, line-height, color Text styling properties Visual background, border, box-shadow Decorative properties Animation transition, animation, transform Motion and transform effects Misc cursor, overflow, z-index Behavioral and stacking properties
การจัดกลุ่มนี้เป็นรูปแบบที่ตกลงกัน ไม่ใช่ข้อกำหนด CSS เบราว์เซอร์ใช้ declaration ตาม specificity และลำดับในซอร์สโค้ด โดยไม่คำนึงถึงตำแหน่งของ property ภายใน rule block เครื่องมือจัดรูปแบบมุ่งเน้นที่ช่องว่างและการย่อหน้า การเรียงลำดับ property ใหม่เป็นเรื่องของการ lint แยกต่างหากที่จัดการโดยเครื่องมืออย่าง Stylelint
การจัดรูปแบบและการบีบอัดเป็นการดำเนินการย้อนกลับกัน ใช้ในขั้นตอนการพัฒนาที่แตกต่างกัน:
CSS Formatter (เครื่องมือนี้)
เพิ่มการย่อหน้า การขึ้นบรรทัดใหม่ และการเว้นวรรคเพื่อให้ CSS อ่านได้ง่าย ใช้ในระหว่างการพัฒนาและการตรวจสอบโค้ด เพิ่มขนาดไฟล์แต่ไม่มีผลต่อการแสดงผลของเบราว์เซอร์ ผลลัพธ์มีไว้สำหรับมนุษย์
CSS Minifier
ลบช่องว่าง comment และ syntax ที่ซ้ำซ้อนทั้งหมดเพื่อลดขนาดไฟล์ ใช้สำหรับ production builds ผลลัพธ์มีไว้สำหรับเบราว์เซอร์และ CDN ไม่ใช่สำหรับอ่าน
วิธีจัดรูปแบบ CSS ด้วยโปรแกรมในภาษาและสภาพแวดล้อมต่างๆ:
JavaScript (Prettier API) Copy
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" Python (cssbeautifier) Copy
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}" CLI (Prettier) Copy
# 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 (sabberworm/php-css-parser) Copy
<?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;
// } ความแตกต่างระหว่าง CSS formatter และ CSS linter คืออะไร?
CSS formatter เปลี่ยนเฉพาะช่องว่าง: การย่อหน้า การขึ้นบรรทัดใหม่ การเว้นวรรครอบโคลอนและวงเล็บปีกกา ไม่ได้แก้ไข CSS declaration จริงของคุณ CSS linter (เช่น Stylelint) วิเคราะห์โค้ดของคุณเพื่อหาข้อผิดพลาด การปฏิบัติที่ไม่ดี และการละเมิดสไตล์ และอาจแนะนำหรือแก้ไขปัญหาที่เกินกว่าช่องว่าง ทีมส่วนใหญ่ใช้ทั้งคู่: formatter สำหรับการเว้นวรรคที่สม่ำเสมอ linter สำหรับจับข้อผิดพลาด
การจัดรูปแบบ CSS เปลี่ยนการแสดงผลในเบราว์เซอร์หรือไม่?
ไม่ เบราว์เซอร์แยกวิเคราะห์ CSS ตาม W3C CSS Syntax Module ซึ่งถือว่าช่องว่างทั้งหมด (space, tab, newline) เป็น token separator ที่เทียบเท่ากัน การเพิ่มหรือลบช่องว่างระหว่าง declaration, selector หรือค่าไม่มีผลต่อ computed styles ข้อยกเว้นเพียงอย่างเดียวคือช่องว่างภายใน string value เช่น content: "hello world" ซึ่ง formatter รักษาไว้
ควรใช้ช่องว่างกี่ช่องสำหรับการย่อหน้า CSS?
สองรูปแบบที่พบมากที่สุดคือ 2 space และ 4 space คู่มือสไตล์ของ Google และค่าเริ่มต้นของ Prettier ทั้งคู่ใช้ 2 space มาตรฐานการเขียนโค้ด CSS ของ WordPress ใช้ tab ไม่มีความแตกต่างด้านประสิทธิภาพ เลือกรูปแบบที่ทีมของคุณใช้อยู่แล้ว หรือรูปแบบที่โค้ด JavaScript/HTML ที่มีอยู่ใช้ และคงความสม่ำเสมอ
สามารถจัดรูปแบบ SCSS, LESS หรือ CSS preprocessor อื่นๆ ด้วยเครื่องมือนี้ได้ไหม?
เครื่องมือนี้จัดรูปแบบ CSS syntax มาตรฐาน SCSS และ LESS ใช้ไวยากรณ์ส่วนใหญ่เหมือนกับ CSS ดังนั้นโค้ด preprocessor อย่างง่ายมักจัดรูปแบบได้ถูกต้อง อย่างไรก็ตาม โครงสร้างเฉพาะของ SCSS อย่าง @mixin, @include และ nested rule sets อาจไม่ถูกจัดการตามที่คาดหวัง สำหรับ SCSS ให้ใช้ Prettier พร้อม SCSS parser หรือ extension sass-formatter
การจัดรูปแบบ CSS กับ CSS beautification เป็นสิ่งเดียวกันหรือไม่?
ใช่ คำว่า CSS formatter, CSS beautifier และ CSS pretty-printer ล้วนหมายถึงการดำเนินการเดียวกัน: การเพิ่มช่องว่างที่สม่ำเสมอให้กับโค้ด CSS เครื่องมือต่างๆ ใช้ชื่อที่แตกต่างกัน แต่ผลลัพธ์เหมือนกัน: CSS ที่จัดย่อหน้าและอ่านได้ง่าย โดยมีหนึ่ง declaration ต่อบรรทัด
ทำไม CSS ที่จัดรูปแบบแล้วถึงมีจำนวนบรรทัดต่างจากต้นฉบับ?
CSS ที่บีบอัดมักรวม declaration หลายรายการไว้ในบรรทัดเดียวหรือละเว้นการขึ้นบรรทัดใหม่ระหว่าง rule sets เครื่องมือจัดรูปแบบเพิ่มการขึ้นบรรทัดใหม่หลังแต่ละ declaration และบรรทัดว่างระหว่าง rule sets ซึ่งเพิ่มจำนวนบรรทัด เนื้อหา CSS จริง (selector, property, ค่า) ไม่เปลี่ยนแปลง
ควร commit CSS ที่จัดรูปแบบแล้วหรือที่บีบอัดแล้วลงใน version control?
ให้ commit CSS ที่จัดรูปแบบแล้ว การ diff ของ version control ใช้บรรทัดเป็นหน่วย ดังนั้น CSS ที่มีหนึ่ง declaration ต่อบรรทัดสร้าง diff ที่สะอาดและตรวจสอบได้ง่าย CSS ที่บีบอัดสร้าง diff บรรทัดเดียวที่ไม่สามารถตรวจสอบได้ รัน minification เป็นขั้นตอน build ไม่ใช่เป็นรูปแบบซอร์สโค้ด เครื่องมืออย่าง PostCSS, cssnano หรือ CSS plugin ของ bundler จัดการ minification สำหรับ production โดยอัตโนมัติ