مدیریت CSS به خصوص برای هر سایتی با اندازه معقول می تواند دشوار باشد. با این پیش پردازنده کمک بگیرید.
بیایید بگوییم که شما در مورد یک ویژگی CSS واقعا جالب، مانند تودرتو، یاد می گیرید. اما وقتی جلو می‌روید و آن را امتحان می‌کنید، متوجه می‌شوید که پشتیبانی وحشتناک است و سال‌ها طول می‌کشد تا در نهایت بتوانید از آن استفاده کنید. این یک مشکل بزرگ در CSS تا زمان معرفی پیش پردازنده هایی مانند PostCSS بود.
بیاموزید که چگونه PostCSS به شما امکان می دهد امروز و در طول توسعه از CSS مدرن و آینده استفاده کنید. شما دقیقاً خواهید فهمید که PostCSS چیست، چگونه می توانید از آن استفاده کنید و بهترین راه برای استفاده از ویژگی های آن چیست.
راه اندازی پروژه
به یک پوشه خالی بروید، یک فایل به نام index.html ایجاد کنید و علامت HTML زیر را در فایل اضافه کنید:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<p>Paragraph</p>
<div>Div</div>
</body>
</html>
این سند HTML یک پاراگراف و عنصر
body p {
color: orange;
}
body div {
color: blue;
}
body {
display: grid;
}
این CSS به رنگ هر دو عنصر در صفحه استایل می دهد و یک طرح بندی شبکه ای ایجاد می کند. اکثر مرورگرها از نحو معمولی CSS مانند این پشتیبانی می کنند. اما زمانی که به نحو جدیدتر فکر می کنید، باید PostCSS را وارد کنید.
ایجاد یک پروژه Node.js و نصب PostCSS
به زبان ساده، PostCSS به شما امکان می دهد CSS مدرن را به چیزی تبدیل کنید که اکثر مرورگرها می توانند آن را درک کنند. فرآیندی که معمولاً به عنوان ترانسپایلینگ شناخته می شود. اگر می‌خواهید ویژگی‌های CSS جدید، آزمایشی یا غیراستاندارد را در کد خود امتحان کنید که مرورگرهای اصلی ممکن است از آن پشتیبانی نکنند، این عالی است.
PostCSS همچنین یک اکوسیستم غنی از افزونه‌های جاوا اسکریپت را ارائه می‌کند که می‌توانید برای فعال کردن ویژگی‌های خاصی مانند کوچک‌سازی CSS، پشتیبانی از رنگ و پشتیبانی از پرده، نصب کنید.
برای استفاده از PostCSS، اولین کاری که باید انجام دهید این است که یک پروژه جدید Node.js را مقداردهی کنید:
npm init -y
این دستور یک فایل package.json ایجاد می کند که حاوی مقادیر پیش فرض برنامه شما است.
بعد، هم PostCSS و هم PostCSS CLI را نصب کنید. بسته دوم به شما امکان می دهد PostCSS را از خط فرمان اجرا کنید:
npm i --save-dev postcss postcss-cli
پرچم –save-dev هر دو بسته npm را به عنوان وابستگی به توسعه نصب می کند. شما فقط می خواهید از PostCSS و افزونه های آن برای پردازش کد CSS در طول توسعه استفاده کنید.
برای شروع استفاده از PostCSS از طریق رابط خط فرمان، به فایل package.json خود بروید و دستور ساده build:css را برای ترجمه با PostCSS ایجاد کنید:
"scripts": {
"build:css": "postcss src/styles.css --dir dest -w"
}
این دستور CSS خالی شما را می گیرد (ذخیره شده در src/styles.css)، کد را tranpile می کند و سپس آن را در پوشه dest خروجی می دهد. اجرای دستور npm build:css این پوشه را ایجاد می کند و آن را با فایل styles.css حاوی کدهای قابل خواندن توسط مرورگر پر می کند.
هنگامی که CSS خود را به HTML وارد می‌کنید، مطمئن شوید که از پوشه مقصدی که در آن CSS خود را کامپایل می‌کنید، وارد می‌کنید و نه از پوشه منبعی که PostCSS از آن کامپایل می‌کند. این، در مورد ما، پوشه dist است، نه پوشه src.
اگر وب سایت خود را در مرورگر باز کنید، خواهید دید که سایت همچنان به CSS دسترسی دارد. هر زمان که تغییری در فایل منبع ایجاد کنید، PostCSS کد را دوباره کامپایل می کند و تغییرات در صفحه وب منعکس می شود.
استفاده از پلاگین های PostCSS
صدها پلاگین PostCSS برای اضافه کردن پیشوندها، لینتینگ، پشتیبانی از نحو جدید و ده ها ویژگی دیگر به PostCSS وجود دارد. پس از نصب یک پلاگین PostCSS، آن را در داخل فایل postcss.config.js فعال می کنید – یک فایل جاوا اسکریپت که می توانید از آن برای تنظیم تمام تنظیمات برای PostCSS استفاده کنید.
پلاگین cssnano PostCSS را با دستور زیر نصب کنید:
npm i --save-dev cssnano
یک بار دیگر، شما فقط باید این وابستگی ها را به عنوان وابستگی های توسعه دهنده ذخیره کنید. دلیل آن این است که همه اینها در حین توسعه اتفاق می افتد. بعد از اینکه سایت را به مرحله تولید رساندید، به PostCSS یا هیچ یک از افزونه های آن نیاز ندارید.
برای استفاده از افزونه cssnano که به تازگی نصب شده است، باید کد زیر را در فایل postcss.config.js اضافه کنید:
const cssnano = require("cssnano")
module.exports = {
plugins: [
cssnano({
preset: 'defaults'
})
]
}
حالا اگر به ترمینال برگردید و دستور ساخت را دوباره اجرا کنید، CSS خروجی را کوچک می‌کند (یعنی کد را تا حد امکان کوچک می‌کند). بنابراین وقتی به سایتی که برای تولید آماده است فشار بیاورید، CSS شما تا حد امکان کوچک می شود.
استفاده از ویژگی های مدرن مانند Nesting
فرض کنید می خواهید از نحو تودرتو در شیوه نامه خود استفاده کنید، بنابراین بلوک پاراگراف در src/styles.css را با این جایگزین کنید:
body {
& p {
color: orange;
}
}
این کد مانند نسخه کد استارت شما است. اما این یک خطا ایجاد می کند زیرا نحو بسیار جدید است و اکثر مرورگرهای وب از آن پشتیبانی نمی کنند. با نصب افزونه postcss-preset-env می توانید پشتیبانی از این نحو را با PostCSS فعال کنید.
این افزونه مجموعه ای از پلاگین های مختلف را برای مدیریت CSS بر اساس مرحله آن گردآوری می کند. مرحله 0 ویژگی های فوق تجربی را نشان می دهد که ممکن است حتی به CSS هم نرسد. در حالی که مرحله 4 برای ویژگی های زبانی است که قبلاً بخشی از مشخصات CSS هستند.
به‌طور پیش‌فرض، present-env از ویژگی‌های مرحله ۲ استفاده می‌کند (که به احتمال زیاد آن را به CSS تبدیل می‌کند). اما می توانید مرحله را به هر چیزی که می خواهید در فایل پیکربندی تغییر دهید.
برای نصب افزونه دستور زیر را اجرا کنید:
npm i --save-dev postcss-preset-env
سپس در فایل postcss.config.js خود، باید افزونه را وارد کرده و آن را ثبت کنید:
const cssnano = require("cssnano")
const postcssPresetEnv = require("postcss-preset-env")
module.exports = {
plugins: [
cssnano({
preset: 'defaults'
}),
postcssPresetEnv({ stage: 1})
]
}
شما فقط باید از مرحله کد CSS جدیدی که قصد استفاده از آن را دارید عبور کنید. در این مورد، فرض می‌کنیم که ویژگی تودرتو در مرحله 1 است. وقتی دستور ساخت را دوباره اجرا می‌کنید و مرورگر را بررسی می‌کنید، می‌بینید که کد تودرتو را در CSS استانداردی که مرورگر می‌تواند درک کند، کامپایل کرده است.
استفاده از PostCSS با Frameworks
پیکربندی PostCSS به صورت دستی ممکن است کمی دردسرساز باشد. به همین دلیل است که تقریباً همه فریم ورک‌های مدرن با ابزارهای بسته‌بندی (مانند Vite، Snowpack و Parcel) همراه هستند و این ابزارها از PostCSS داخلی پشتیبانی خواهند کرد. و حتی اگر این کار را نکنند، فرآیند اضافه کردن پشتیبانی PostCSS فوق العاده آسان است.
همیشه به یاد داشته باشید که Vite و اکثر باندلرهای دیگر از سیستم ماژول ES6 استفاده می کنند نه CommonJS. برای حل این مشکل، باید از دستور import به جای ()require در فایل postcssconfig.js خود استفاده کنید:
import cssnano from "cssnano"
// Configuration code goes here
تا زمانی که پلاگین ها را نصب کرده باشید، همه چیز به خوبی کار می کند.
درباره SaSS بیشتر بیاموزید
PostCSS تنها یکی از ده ها پیش پردازنده CSS در حال حاضر موجود است. یکی از آنها SaSS است که مخفف شیوه نامه های نحوی عالی است.
یادگیری استفاده از یک پیش پردازنده اصلی دیگر می تواند به عنوان یک توسعه دهنده CSS مفید باشد.