۱۱ نکته برای شروع کار با CSS مدرن

از زمان پیدایش CSS در اواخر دهه ۱۹۹۰، این زبان به‌شدت گسترش یافته است. حالا CSS یک فناوری بالغ و قدرتمند است که توسط مرورگرهای دسکتاپ و موبایل به‌خوبی پشتیبانی می‌شود — اما چیزهای زیادی برای یادگیری وجود دارد. چه از تحولات اخیر عقب مانده باشید، چه تازه بخواهید CSS را یاد بگیرید، این چک‌لیست می‌تواند کمک‌تان کند؛ با نکات کاربردی، توصیه‌های کلی، و منابع باکیفیت.

۱. اول مطمئن شوید که HTML را بلد هستید

اولین چیزی که باید قبل از شروع یادگیری CSS بدانید، HTML است. شاید بدیهی به نظر برسد، اما مفاهیم مهمی وجود دارد که قبل از ورود به دنیای استایل‌دهی باید آن‌ها را یاد بگیرید.

در مسیر یادگیری‌تان، بر جدا بودن معنا (HTML) از سبک (CSS) تأکید خواهد شد. مطمئن شوید که از نشانه‌گذاری تمیز و درست استفاده می‌کنید و تگ‌های HTML قدیمی مربوط به ظاهر مثل <b> را کنار بگذارید.

مستندات HTML در سایت Mozilla فوق‌العاده است (همان‌طور که همه منابعش در مورد پلتفرم وب عالی هستند)، پس اگر در HTML مطمئن نیستید، از آنجا شروع کنید.

۲. با اصول اولیه CSS شروع کنید

در سایت Mozilla بمانید و وارد مقدمه CSS آن‌ها شوید.

در این مرحله، دو نکته کلیدی وجود دارد که باید یاد بگیرید: چطور CSS بنویسید و چطور آن را به فایل HTML خودتان متصل کنید. مستندات Mozilla با یک مقدمه ساده از CSS شروع می‌شود و مثالی ارائه می‌دهد:

حتی اگر نتوانید CSS بنویسید، احتمالاً می‌توانید متوجه شوید که این قطعه کد چه کاری انجام می‌دهد: این کد عناصر h1 را قرمز می‌کند و اندازه فونت خاصی را تنظیم می‌کند.

مقاله “Getting started with CSS” از Mozilla بخش دوم معما را توضیح می‌دهد و نحوه اعمال CSS مانند کد بالا را به فایل‌های HTML شما شرح می‌دهد. استایل‌شیت‌های داخلی احتمالاً سریع‌ترین و آسان‌ترین راه برای شروع هستند، اما استایل‌شیت‌های خارجی مزایای زیادی دارند، بنابراین بهتر است هر دو را امتحان کنید.

۳. بازی کنید

با اینکه بازی‌های زیادی برای کمک به یادگیری CSS وجود دارند، بیشتر آن‌ها تکنیک‌های پیشرفته‌تری مثل چیدمان شبکه (grid layout) را پوشش می‌دهند. CSS Diner برای مبتدیان مناسب‌تر است و باید به شما کمک کند تا انتخاب‌کننده‌های CSS (selectors) را که بخش‌های خاصی از سند شما را برای استایل‌دهی شناسایی می‌کنند، درک کنید. مثال بالا یک انتخاب‌کننده ساده “h1” را نشان می‌دهد، اما می‌توانند بسیار پیچیده‌تر شوند:

a#selected > .icon,
.box h2 + p {
    font-weight: bold;
}

CSS Speedrun یک تست خوب برای مهارت‌های انتخاب‌کننده (selector) شما است، اگرچه—همانطور که از اسمش پیداست—می‌تواند تجربه‌ای پر استرس باشد!

۴. از ابزارهای توسعه‌دهنده Chrome/Safari/Firefox استفاده کنید

پس از اینکه مبانی را یاد گرفتید، آماده‌اید تا استایل‌شیت‌های خود را بنویسید. با این حال، می‌توانید مستقیماً در مرورگر خود شروع به آزمایش CSS کنید و نیازی به باز کردن ویرایشگر متن و دستکاری فایل‌ها نخواهید داشت.

تصویری از یک جوان که از لپ‌تاپ استفاده می‌کند، با مرورگر در پس‌زمینه و ابزار بازدیدکننده المان (Element Inspector) باز است.

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

علاوه بر این، می‌توانید از پنل Styles (استایل‌ها) برای ویرایش هر CSS موجود — یا حتی ایجاد استایل‌های جدید — استفاده کنید و نتایج را به‌صورت لحظه‌ای (real time) مشاهده کنید.

این ابزارها در هر مرورگر کمی متفاوت عمل می‌کنند، اما همگی می‌توانند به تقویت یادگیری شما کمک کنند. مرورگر Chrome پشتیبانی عالی از تکمیل خودکار (auto-complete) دارد و هنگام نوشتن، هم نام ویژگی‌ها (property names) و هم مقادیر مجاز آن‌ها را پیشنهاد می‌دهد.

با کمی آزمایش، می‌توانید با ویژگی‌های مختلف آشنا شوید و برای درک بهتر، از طریق لینک‌های مستقیم به مستندات MDN (شبکه توسعه‌دهندگان موزیلا) اطلاعات بیشتری درباره آن‌ها کسب کنید.

۵. از یک ویرایشگر آنلاین استفاده کنید

قبل از اینکه سراغ ویرایشگر متن بروید، یک روش دیگر برای تمرین مهارت‌های CSS شما وجود دارد که نیازی به کار با فایل‌های محلی ندارد. چندین وب‌اپلیکیشن مانند CodePen یا JSFiddle وجود دارند.

این ابزارها شبیه همان بازی‌هایی هستند که قبلاً دیدید، فقط بدون قسمت بازی! آن‌ها جعبه‌هایی برای وارد کردن کد HTML و CSS فراهم می‌کنند و همزمان پیش‌نمایشی از نتیجه نهایی را نمایش می‌دهند.

این روش ساده و سریع به شما امکان می‌دهد تا با آزمون و خطا، کدنویسی را تمرین کرده و بلافاصله نتیجه را ببینید.

نکته: در حالی که این ابزارها معمولاً بخشی برای جاوااسکریپت (JavaScript) هم دارند تا مهارت‌های کدنویسی خود را در آن به کار بگیرید، استفاده از آن کاملاً اختیاری است. شما می‌توانید به راحتی بخش‌های “JS” یا “JavaScript” را نادیده بگیرید و فقط روی HTML و CSS تمرکز کنید.

این ویرایشگرهای آنلاین امکانات مفیدی مانند برجسته‌سازی نحوی (syntax highlighting) و فرمت‌بندی کد دارند. به عنوان مثال، JSFiddle دارای گزارش خطای خوبی است که به شما کمک می‌کند مقادیر نادرست CSS را سریع‌تر شناسایی کنید. همچنین امکان ذخیره‌سازی کارتان برای استفاده‌های بعدی وجود دارد، و هر زمان که بخواهید می‌توانید HTML یا CSS خود را کپی کرده و در فایل محلی پروژه‌تان بچسبانید.

۶. از بهترین منابع مرجع استفاده کنید

همان‌طور که تا اینجا دیدید، بسیاری از منابع به MDN ارجاع داده‌اند. مستندات MDN (شبکه توسعه‌دهندگان موزیلا) یکی از جامع‌ترین و با کیفیت‌ترین منابع برای اطلاعات در مورد پلتفرم وب است. هر زمان که با مشکلی در CSS برخورد کردید یا خواستید چیزی را دقیق‌تر یاد بگیرید، MDN باید اولین جایی باشد که به سراغش می‌روید.

هشدار: ممکن است هنگام جست‌وجوی موضوعات مربوط به CSS یا سایر مباحث مرتبط با وب، با سایت W3Schools مواجه شوید. نام این سایت ممکن است این تصور را ایجاد کند که به W3C (سازمان تعیین‌کننده استانداردهای فناوری‌های وب) وابسته است، اما در واقع چنین نیست؛ W3Schools مجموعه‌ای از مستندات است که توسط یک طرف ثالث تهیه شده است.
اگرچه کیفیت محتوای این سایت در سال‌های اخیر بهتر شده، اما همچنان کامل و بی‌نقص نیست، و به همین دلیل MDN یک منبع بسیار قابل‌اعتمادتر و دقیق‌تر به شمار می‌آید.

در MDN حجم عظیمی از مطالب مربوط به CSS وجود دارد؛ از آموزش‌های مرحله‌به‌مرحله گرفته تا تست‌های تعاملی. تمامی جنبه‌های CSS در این منبع پوشش داده شده‌اند، از جمله سلکتورها، مدل جعبه‌ای (Box Model)، رنگ‌ها و رفع اشکال. برای هر ویژگی (property) در CSS، یک صفحه مرجع اختصاصی وجود دارد که تقریباً همه اطلاعاتی را که لازم دارید در اختیارتان می‌گذارد.

هر صفحه مرجع مربوط به ویژگی‌های CSS در MDN شامل توضیحاتی درباره مقادیر مختلف آن ویژگی، مثال‌هایی از نحوه استفاده، و همچنین یک جدول سازگاری مرورگرها است. این جدول بسیار مهم است، زیرا کمک می‌کند ویژگی‌هایی را که به‌خوبی پشتیبانی می‌شوند از آن‌هایی که هنوز آزمایشی هستند و فقط در برخی مرورگرها کار می‌کنند، تشخیص دهید.

نکته: اگر به دنبال یک جایگزین معتبر هستید، منابع CSS در وب‌سایت W3C نیز منابع رسمی و معتبر هستند. اما توجه داشته باشید که این منابع برای مبتدی‌ها چندان مناسب نیستند و بهتر است فقط زمانی به آن‌ها رجوع کنید که اطلاعات موجود در MDN را به‌خوبی مطالعه کرده باشید.

۷. به‌روز بمانید

با وجود اینکه CSS یک فناوری بالغ و پایدار است، اما همچنان در حال تحول است. اعضای سازمان‌های مختلف به‌طور مداوم پیشنهادهایی برای تغییرات، اصلاحات و افزودن ویژگی‌های جدید ارائه می‌دهند.

به‌عنوان یک طراح، چالش شما اغلب فراتر از «چگونه انجام دادن کاری» است و بیشتر بر این متمرکز می‌شود که «چه کارهایی می‌توان انجام داد». مثلاً می‌دانید چگونه رنگ متن را تغییر دهید، اما آیا می‌دانید می‌توان خط بیرونی آن را تغییر داد؟ یا به‌جای یک رنگ ساده، از گرادیان استفاده کرد؟

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

وب‌سایت CSS-Tricks یکی از بهترین منابع برای اخبار به‌روز و تخصصی CSS است. این سایت مقالاتی درباره همه جنبه‌های CSS منتشر می‌کند و دارای منابع مرجع فوق‌العاده‌ای نیز هست، به‌ویژه در زمینه‌هایی مانند Flexbox و Grid.

پادکست CSS یک برنامه فصلی است که اکنون پنج سال از آغاز پخش آن می‌گذرد. دو مجری این برنامه به‌قدری جذاب و حرفه‌ای هستند که می‌توانند وارد جزئیات CSS شوند، بدون اینکه موضوع را خشک یا پیچیده جلوه دهند.

دکتر لئا ورو (Lea Verou)، یکی از متخصصان شناخته‌شده در این صنعت است که به‌طور منظم درباره CSS و پلتفرم وب در شبکه اجتماعی X پست می‌گذارد. جن سیمونز (Jen Simmons)، که در شرکت اپل روی مرورگر Safari کار می‌کند، نیز در Bluesky درباره موضوعات مربوط به CSS مطلب منتشر می‌کند. حساب رسمی گروه کاری CSS (CSS Working Group) نیز از رسمی‌ترین منابع موجود است. هرچند کمتر پست می‌گذارد، اما به‌روزرسانی‌های مربوط به مشخصات فنی و مقالات مهم منتشرشده در w3.org را معرفی می‌کند و دنبال کردن آن، راه بسیار خوبی برای آگاهی از آخرین تغییرات و نوآوری‌ها در CSS است.

۸. کدهای CSS خود را اعتبارسنجی کنید

حالا که شروع به نوشتن چندین فایل استایل کرده‌اید، بهتر است مطمئن شوید که فاقد خطا هستند. خطاهای CSS ممکن است به‌سادگی پنهان بمانند و رفع آن‌ها اغلب دشوار است، بنابراین هر کمکی در این زمینه ارزشمند است.

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

اگر فایل‌های CSS شما بدون خطا باشند، یک پیام تبریک دوستانه به همراه یک نشان (Badge) دریافت خواهید کرد که می‌توانید آن را در صفحات وب خود نمایش دهید تا درستی کدهایتان را تبلیغ کنید. البته امروزه دیگر استفاده از این نشان‌ها رایج نیست، اما اگر بخواهید مهارت خود را در یک وب‌سایت شخصی یا رزومه آنلاین به نمایش بگذارید، مشکلی ندارد.

در صورتی که اشکالاتی در استایل‌های شما وجود داشته باشد، اعتبارسنج پیام‌های خطای دقیقی را نمایش خواهد داد و علت خطاها را توضیح می‌دهد. مانند بسیاری از خطاها، اگر با آن‌ها آشنا نباشید ممکن است درکشان کمی دشوار باشد. بنابراین، ابتدا کدهای مشکل‌دار را به‌دقت بررسی کرده و بعد از شناسایی ایراد، اقدام به اصلاح آن کنید.

۹. بررسی سازگاری با مرورگرها

یکی دیگر از جنبه‌های مهم درستی فایل‌های CSS، سازگاری آن‌ها با مرورگرهای مختلف است. البته این مورد نسبت به گذشته بسیار کمتر مشکل‌ساز شده، اما قابلیت‌های جدید یا آزمایشی در CSS ممکن است هنوز در همه مرورگرها پشتیبانی نشوند. خوشبختانه سایت Can I Use به‌صورت دقیق نشان می‌دهد که کدام ویژگی‌های CSS در کدام مرورگرها کار می‌کنند.

این اطلاعات ممکن است فشرده به نظر برسند، اما به‌گونه‌ای ارائه شده‌اند که به‌راحتی قابل درک هستند. شما باید تصمیم بگیرید که قصد پشتیبانی از کدام مرورگرها را دارید؛ از جمله نسخه قدیمی مرورگر Edge که در گذشته همان Internet Explorer بود، و همچنین تفاوت بین مرورگرهای موبایل و دسکتاپ. خبر خوب این است که اکثر ویژگی‌های CSS اختیاری هستند و شما می‌توانید صفحات خود را طوری طراحی کنید که اگر در مرورگری که از آن ویژگی پشتیبانی نمی‌کند باز شوند، بدون مشکل خاصی و با افت کیفیت قابل‌قبول نمایش داده شوند (اصطلاحاً degrade gracefully).

۱۰. تسلط بر تایپوگرافی در CSS

تایپوگرافی یکی از عناصر مهم در طراحی است، اما تا پیش از ورود فونت‌های CSS، در وب چندان جدی گرفته نمی‌شد. زبان CSS همیشه انعطاف‌پذیر بوده و اجازه می‌دهد با استفاده از «فونت استک» (font stack)، ترتیب اولویت فونت‌هایی که ترجیح می‌دهید استفاده شوند را مشخص کنید، بسته به اینکه در دستگاه کاربر در دسترس باشند یا نه.

اما استفاده از فونت‌های واقعی وب (web fonts) به شما کنترل بیشتری روی تجربه کاربر می‌دهد و این امکان را فراهم می‌کند که حتی اگر کاربر آن فونت خاص را روی دستگاهش نصب نکرده باشد، باز هم بتواند فونت مورد نظر شما را ببیند.

سرویس Google Fonts یکی از بهترین ارائه‌دهندگان فونت‌های رایگان است و مجموعه‌ای بسیار گسترده دارد: در زمان نگارش این مطلب، تقریباً ۲٬۰۰۰ خانواده فونت در این سرویس موجود است.

فونت‌های Google Fonts تنوع بسیار زیادی دارند؛ از وزن‌های مختلف (مثل نازک، معمولی، بولد و …) گرفته تا پشتیبانی از زبان‌های مختلف و حتی فونت‌های آیکونی. بعد از اینکه فونت دلخواهتان را سفارشی‌سازی کردید، فقط کافی است کد تعبیه (embed) را کپی کرده و در فایل HTML خود قرار دهید. البته اگر ترجیح می‌دهید، می‌توانید فایل‌های فونت را دانلود کرده و به‌صورت محلی (local) روی سرور خود میزبانی کنید.

۱۱. یادگیری SCSS

وقتی که به‌خوبی بر CSS مسلط شدید و با تمام اصول و مفاهیم آن آشنا شدید، وقت آن است که یک قدم جلوتر بروید و SCSS را یاد بگیرید. این فرمت، متعلق به زبان Sass است؛ زبانی که با افزودن قابلیت‌های پیشرفته به CSS، آن را بسیار قدرتمندتر و قابل‌مدیریت‌تر در پروژه‌های بزرگ می‌کند.

SCSS دیگر به اندازه گذشته مهم نیست، چرا که بسیاری از ویژگی‌های آن به CSS اضافه شده‌اند. با این حال، SCSS همچنان یک معرفی مفید برای تکنیک‌های پیشرفته‌تر CSS است. شما می‌توانید از فرآیندهای مشابه در پروژه‌های خود برای مدیریت استایل‌ها با استفاده از توابع، میکسین‌ها و ویژگی‌های دیگر استفاده کنید. فریمورک‌های وب مانند Angular به‌طور خاص با SCSS بسیار خوب کار می‌کنند.