CSS ফরম্যাটিং কী?

CSS ফরম্যাটিং হলো Cascading Style Sheets-এ সামঞ্জস্যপূর্ণ ইন্ডেন্টেশন, লাইন ব্রেক এবং স্পেসিং যোগ করার প্রক্রিয়া, যাতে কোডটি মানুষের পড়ার উপযোগী হয়। ব্রাউজার CSS-এর হোয়াইটস্পেস সম্পূর্ণ উপেক্ষা করে। একটি মিনিফাইড এক-লাইনার এবং সুন্দরভাবে ইন্ডেন্ট করা স্টাইলশিট একই রেন্ডারিং তৈরি করে। পার্থক্যটি পাঠযোগ্যতায়: ফরম্যাট করা CSS আপনাকে সিলেক্টর স্ক্যান করতে, অনুপস্থিত সেমিকোলন খুঁজে পেতে এবং এক নজরে ক্যাসকেড বুঝতে সাহায্য করে।

একটি CSS ফরম্যাটার (কখনো CSS বিউটিফায়ার বা প্রিটি-প্রিন্টারও বলা হয়) সংকুচিত বা অসামঞ্জস্যপূর্ণভাবে লেখা CSS নিয়ে অভিন্ন ইন্ডেন্টেশন, প্রতি লাইনে একটি ডিক্লারেশন এবং সামঞ্জস্যপূর্ণ ব্রেস বসানো সহ পুনরায় লিখে দেয়। এটি মিনিফিকেশনের বিপরীত অপারেশন, যাকে বিউটিফিকেশন বা প্রিটি-প্রিন্টিংও বলা হয়। মিনিফিকেশন প্রোডাকশনের জন্য ফাইলের আকার কমাতে হোয়াইটস্পেস সরিয়ে দেয়, আর ফরম্যাটিং ডেভেলপমেন্ট, কোড রিভিউ এবং কোডবেস রক্ষণাবেক্ষণের জন্য কাঠামো পুনরুদ্ধার করে।

CSS স্পেসিফিকেশন (W3C CSS Syntax Module Level 3) স্টাইলশিটের ব্যাকরণ নির্ধারণ করে, কিন্তু হোয়াইটস্পেস রীতি সম্পর্কে কিছু বলে না। ফরম্যাটিং নিয়মগুলো দলের সিদ্ধান্ত: ট্যাব বনাম স্পেস, ২-স্পেস বনাম ৪-স্পেস ইন্ডেন্ট, ব্রেস স্টাইল, রুল সেটের মাঝে ফাঁকা লাইন। একটি ফরম্যাটার আপনার বেছে নেওয়া যেকোনো রীতি প্রতিটি ফাইলে সামঞ্জস্যপূর্ণভাবে প্রয়োগ করে। বেশিরভাগ দল তাদের পছন্দ .prettierrc বা .editorconfig ফাইলে নথিভুক্ত করে।

এই CSS ফরম্যাটার কেন ব্যবহার করবেন?

যেকোনো CSS পেস্ট করুন এবং মিলিসেকেন্ডের মধ্যে সঠিকভাবে ইন্ডেন্ট করা আউটপুট পান। ইনস্টল করার মতো কোনো এডিটর প্লাগিন নেই, লিখতে হবে না কোনো কনফিগারেশন ফাইল, তৈরি করতে হবে না কোনো অ্যাকাউন্ট।

⚡

তাৎক্ষণিক ফরম্যাটিং

আপনি টাইপ বা পেস্ট করার সাথে সাথে আউটপুট আপডেট হয়। কোনো বিল্ড স্টেপের জন্য অপেক্ষা বা CLI কমান্ড চালানো ছাড়াই তাৎক্ষণিকভাবে ফরম্যাট করা CSS পাবেন।

🔒

সম্পূর্ণ প্রাইভেট — কোনো সার্ভার নেই

সমস্ত ফরম্যাটিং JavaScript ব্যবহার করে আপনার ব্রাউজারেই স্থানীয়ভাবে চলে। আপনার CSS কখনো আপনার ডিভাইস ছাড়ে না এবং কোনো সার্ভারে পাঠানো হয় না।

🎨

কনফিগারযোগ্য ইন্ডেন্টেশন

আপনার প্রকল্পের কোড স্টাইলের সাথে মেলাতে ২-স্পেস, ৪-স্পেস বা ট্যাব ইন্ডেন্টেশন বেছে নিন। আউটপুট সরাসরি আপনার কোডবেসে পেস্ট করার জন্য প্রস্তুত।

📋

লগইন প্রয়োজন নেই

পৃষ্ঠাটি খুলুন, আপনার CSS পেস্ট করুন, ফলাফল কপি করুন। কোনো সাইন-আপ নেই, কোনো রেট সীমা নেই, কোনো ফিচার গেট নেই। প্রতিটি ভিজিটে পূর্ণ টুলটি পাওয়া যায়।

CSS ফরম্যাটারের ব্যবহারের ক্ষেত্র

ফ্রন্টেন্ড ডেভেলপমেন্ট

কোনো ভেন্ডার লাইব্রেরি বা CDN থেকে মিনিফাইড CSS পেলে, সিলেক্টরগুলো পড়তে এবং এটি আপনার নিজের স্টাইলশিটের কোন অংশ ওভাররাইড করে তা বুঝতে এটি ফরম্যাট করুন।

ব্যাকেন্ড ইঞ্জিনিয়ারিং

সার্ভার-রেন্ডার করা পৃষ্ঠাগুলো প্রায়ই গুরুত্বপূর্ণ CSS একটি একক লাইন হিসেবে ইনলাইন করে। সেই CSS ফরম্যাট করলে প্রাথমিক HTML পেলোডে কোন স্টাইলগুলো অন্তর্ভুক্ত তা পরীক্ষা করা সহজ হয়।

DevOps ও CI পাইপলাইন

ফরম্যাটার আউটপুট কমিট করা ফাইলের সাথে তুলনা করে পুল রিকোয়েস্টে সামঞ্জস্যপূর্ণ CSS ফরম্যাটিং নিশ্চিত করুন। অসামঞ্জস্যপূর্ণ হোয়াইটস্পেস অপ্রয়োজনীয় ডিফ তৈরি করে যা প্রকৃত পরিবর্তনগুলো আড়াল করে দেয়।

QA ও বাগ তদন্ত

কোনো ভিজ্যুয়াল বাগ ডিবাগ করার সময়, DevTools থেকে কম্পিউটেড CSS ফরম্যাট করুন যাতে দ্রুত বোঝা যায় কোন প্রপার্টিগুলো কোন ক্রমে প্রযোজ্য এবং কোন স্পেসিফিসিটিতে।

ডেটা মাইগ্রেশন

কনটেন্ট ম্যানেজমেন্ট সিস্টেম ও ইমেইল বিল্ডাররা ডেটাবেস ফিল্ডে CSS সংরক্ষণ করে, প্রায়ই হোয়াইটস্পেস ছাড়াই। নিষ্কাশিত CSS ফরম্যাট করলে পুনরায় আমদানির আগে এটি যাচাই করতে সাহায্য করে।

CSS শেখা

CSS শিক্ষার্থীরা টিউটোরিয়াল বা Stack Overflow উত্তর থেকে উদাহরণ পেস্ট করে সামঞ্জস্যপূর্ণভাবে ফরম্যাট করা দেখতে পারেন, যা নেস্টিং ও ক্যাসকেড বোঝা সহজ করে।

CSS প্রপার্টি অর্ডারিং রেফারেন্স

বেশিরভাগ CSS ফরম্যাটার প্রপার্টি পুনর্বিন্যাস করে না। কিন্তু অনেক স্টাইল গাইড সম্পর্কিত প্রপার্টিগুলো একসাথে গ্রুপ করার পরামর্শ দেয়। নিচের সারণিটি Stylelint-এর order প্লাগিন এবং CSScomb-এর মতো টুলে ব্যবহৃত একটি সাধারণ গ্রুপিং রীতি দেখায়:

গ্রুপ	উদাহরণ প্রপার্টি	উদ্দেশ্য
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-এর কোনো আবশ্যিকতা নয়। ব্রাউজার একটি রুল ব্লকের মধ্যে প্রপার্টির অবস্থান নির্বিশেষে স্পেসিফিসিটি ও সোর্স অর্ডারের ভিত্তিতে ডিক্লারেশন প্রযোজ্য করে। একটি ফরম্যাটার হোয়াইটস্পেস ও ইন্ডেন্টেশনে মনোযোগ দেয়; প্রপার্টি পুনর্বিন্যাস Stylelint-এর মতো টুল দিয়ে পরিচালিত একটি পৃথক লিন্টিং বিষয়।

CSS ফরম্যাটিং বনাম CSS মিনিফিকেশন

ফরম্যাটিং ও মিনিফিকেশন বিপরীত অপারেশন, ডেভেলপমেন্টের বিভিন্ন পর্যায়ে প্রযোজ্য:

CSS ফরম্যাটার (এই টুল)

CSS পাঠযোগ্য করতে ইন্ডেন্টেশন, লাইন ব্রেক এবং স্পেসিং যোগ করে। ডেভেলপমেন্ট ও কোড রিভিউয়ের সময় ব্যবহৃত হয়। ফাইলের আকার বাড়ায় কিন্তু ব্রাউজার রেন্ডারিংয়ে কোনো প্রভাব নেই। আউটপুটটি মানুষের জন্য।

CSS মিনিফায়ার

ফাইলের আকার কমাতে সমস্ত অপ্রয়োজনীয় হোয়াইটস্পেস, মন্তব্য এবং অপ্রয়োজনীয় সিনট্যাক্স সরিয়ে দেয়। প্রোডাকশন বিল্ডের জন্য ব্যবহৃত হয়। আউটপুটটি ব্রাউজার ও CDN-এর জন্য, পড়ার জন্য নয়।

কোড উদাহরণ

বিভিন্ন ভাষা ও পরিবেশে প্রোগ্রামেটিক্যালি CSS কীভাবে ফরম্যাট করা যায়:

JavaScript (Prettier API)

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)

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)

# 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)

<?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 ফরম্যাটার ও একটি CSS লিন্টারের মধ্যে পার্থক্য কী?

একটি CSS ফরম্যাটার কেবল হোয়াইটস্পেস পরিবর্তন করে: ইন্ডেন্টেশন, লাইন ব্রেক, কোলন ও ব্রেসের চারপাশে স্পেসিং। এটি আপনার প্রকৃত CSS ডিক্লারেশন পরিবর্তন করে না। একটি CSS লিন্টার (যেমন Stylelint) ত্রুটি, খারাপ অভ্যাস এবং স্টাইল লঙ্ঘনের জন্য আপনার কোড বিশ্লেষণ করে এবং হোয়াইটস্পেসের বাইরে সমস্যা সুপারিশ বা স্বয়ংক্রিয়ভাবে ঠিক করতে পারে। দলগুলো সাধারণত উভয় ব্যবহার করে: সামঞ্জস্যপূর্ণ স্পেসিংয়ের জন্য ফরম্যাটার, ভুল ধরার জন্য লিন্টার।

CSS ফরম্যাট করলে কি ব্রাউজারে রেন্ডারিং পরিবর্তন হয়?

না। ব্রাউজার W3C CSS Syntax Module অনুযায়ী CSS পার্স করে, যা সমস্ত হোয়াইটস্পেস (স্পেস, ট্যাব, নিউলাইন) একই ধরনের বিভাজক হিসেবে গণ্য করে। ডিক্লারেশন, সিলেক্টর বা মানের মধ্যে হোয়াইটস্পেস যোগ বা অপসারণ কম্পিউটেড স্টাইলে কোনো প্রভাব ফেলে না। একমাত্র ব্যতিক্রম হলো content: "hello world"-এর মতো স্ট্রিং মানের ভেতরে হোয়াইটস্পেস, যা ফরম্যাটার অপরিবর্তিত রাখে।

CSS ইন্ডেন্টেশনের জন্য কতটি স্পেস ব্যবহার করা উচিত?

দুটি সবচেয়ে সাধারণ রীতি হলো ২ স্পেস এবং ৪ স্পেস। Google-এর স্টাইল গাইড ও Prettier-এর ডিফল্ট উভয়ই ২ স্পেস ব্যবহার করে। WordPress CSS কোডিং স্ট্যান্ডার্ড ট্যাব ব্যবহার করে। কোনো পারফরম্যান্সের পার্থক্য নেই। আপনার দল ইতিমধ্যে যা ব্যবহার করে, বা আপনার বিদ্যমান JavaScript/HTML কোড যা ব্যবহার করে, তা বেছে নিন এবং সামঞ্জস্য বজায় রাখুন।

এই টুল দিয়ে কি SCSS, LESS বা অন্যান্য CSS প্রিপ্রসেসর ফরম্যাট করা যাবে?

এই টুল স্ট্যান্ডার্ড CSS সিনট্যাক্স ফরম্যাট করে। SCSS ও LESS CSS-এর অধিকাংশ সিনট্যাক্স ভাগ করে, তাই সহজ প্রিপ্রসেসর কোড প্রায়ই সঠিকভাবে ফরম্যাট হয়। তবে SCSS-নির্দিষ্ট গঠন যেমন @mixin, @include এবং নেস্টেড রুল সেট প্রত্যাশিতভাবে পরিচালিত নাও হতে পারে। SCSS-এর জন্য SCSS পার্সার সহ Prettier বা sass-formatter এক্সটেনশন ব্যবহার করুন।

CSS ফরম্যাটিং ও CSS বিউটিফিকেশন কি একই?

হ্যাঁ। CSS ফরম্যাটার, CSS বিউটিফায়ার এবং CSS প্রিটি-প্রিন্টার শব্দগুলো সবই একই অপারেশন বোঝায়: CSS কোডে সামঞ্জস্যপূর্ণ হোয়াইটস্পেস যোগ করা। বিভিন্ন টুল বিভিন্ন নাম ব্যবহার করে, কিন্তু আউটপুট একই: প্রতি লাইনে একটি ডিক্লারেশন সহ ইন্ডেন্টেড, পাঠযোগ্য CSS।

কেন আমার ফরম্যাট করা CSS-এ মূলের চেয়ে বেশি লাইন আছে?

মিনিফাইড বা সংকুচিত CSS প্রায়ই একটি লাইনে একাধিক ডিক্লারেশন রাখে বা রুল সেটের মধ্যে লাইন ব্রেক বাদ দেয়। ফরম্যাটার প্রতিটি ডিক্লারেশনের পরে একটি লাইন ব্রেক এবং রুল সেটের মধ্যে একটি ফাঁকা লাইন যোগ করে, যা লাইন সংখ্যা বাড়িয়ে দেয়। প্রকৃত CSS কন্টেন্ট (সিলেক্টর, প্রপার্টি, মান) অপরিবর্তিত থাকে।

ভার্সন কন্ট্রোলে কি ফরম্যাট করা নাকি মিনিফাইড CSS কমিট করা উচিত?

ফরম্যাট করা CSS কমিট করুন। ভার্সন কন্ট্রোল ডিফ লাইন-ভিত্তিক, তাই প্রতি লাইনে একটি ডিক্লারেশন সহ ফরম্যাট করা CSS পরিষ্কার, পর্যালোচনাযোগ্য ডিফ তৈরি করে। মিনিফাইড CSS একক-লাইন ডিফ তৈরি করে যা পর্যালোচনা করা অসম্ভব। মিনিফিকেশন একটি বিল্ড স্টেপ হিসেবে চালান, সোর্স ফরম্যাট হিসেবে নয়। PostCSS, cssnano বা আপনার বান্ডলারের CSS প্লাগিনের মতো টুলগুলো স্বয়ংক্রিয়ভাবে প্রোডাকশন মিনিফিকেশন পরিচালনা করে।

CSS ফরম্যাটার