آموزش CSS مبتدی : سازماندهی CSS شما
همانطور که شروع به کار روی استایلشیتهای بزرگتر و پروژههای بزرگ میکنید، متوجه خواهید شد که نگهداری از یک فایل CSS بزرگ میتواند چالش برانگیز باشد. در این مقاله، نگاهی مختصر به برخی از بهترین شیوهها برای نوشتن CSS شما خواهیم داشت تا نگهداری از آن آسان شود، و برخی از راهحلهایی را که توسط دیگران برای کمک به بهبود نگهداری استفاده میشود، بررسی خواهیم کرد.
آیا پروژه شما راهنمای سبک کدنویسی دارد؟
اگر با یک تیم روی یک پروژه موجود کار میکنید، اولین چیزی که باید بررسی کنید این است که آیا پروژه یک راهنمای سبک موجود برای CSS دارد یا خیر. راهنمای سبک تیم همیشه باید بر ترجیحات شخصی شما غلبه کند. اغلب روش درست یا غلطی برای انجام کارها وجود ندارد، اما ثبات مهم است.
اگر قرار است قوانین پروژه را تعیین کنید یا به تنهایی کار میکنید، مهمترین کاری که باید انجام دهید این است که همه چیز را منسجم نگه دارید. انسجام را میتوان به روشهای مختلفی اعمال کرد، مانند استفاده از قراردادهای نامگذاری یکسان برای کلاسها، انتخاب یک روش برای توصیف رنگ یا حفظ قالببندی منسجم. (به عنوان مثال، آیا از تب یا فاصله برای تورفتگی کد خود استفاده خواهید کرد؟ اگر فاصله، چند فاصله؟)
داشتن مجموعهای از قوانین که همیشه از آنها پیروی میکنید، میزان بار ذهنی مورد نیاز هنگام نوشتن CSS را کاهش میدهد، زیرا برخی از تصمیمات از قبل گرفته شدهاند.
قالببندی CSS قابل خواندن
چند روش برای قالببندی CSS وجود دارد. برخی از توسعهدهندگان تمام قوانین را در یک خط قرار میدهند، مانند این:
توسعهدهندگان دیگر ترجیح میدهند همه چیز را در یک خط جدید بنویسند:
CSS اهمیتی نمیدهد که از کدام یک استفاده کنید. ما شخصاً دریافتهایم که اگر هر جفت ویژگی و مقدار در یک خط جدید قرار گیرند، خوانایی بیشتری خواهد داشت.
اضافه کردن کامنت به CSS به هر توسعهدهندهی آیندهای کمک میکند تا با فایل CSS شما کار کند، و همچنین وقتی بعد از یک استراحت به پروژه برمیگردید، به شما نیز کمک خواهد کرد.
یک نکته خوب این است که بین بخشهای منطقی در فایل استایل خود، یک بلوک از توضیحات نیز اضافه کنید تا به شما در یافتن سریع بخشهای مختلف هنگام مرور آن کمک کند، یا حتی چیزی برای جستجو در اختیارتان قرار دهد تا مستقیماً به آن بخش از CSS بروید. اگر از رشتهای استفاده میکنید که در کد ظاهر نمیشود، میتوانید با جستجوی آن از بخشی به بخش دیگر بروید - در زیر ما از || استفاده کردهایم.
لازم نیست تک تک موارد موجود در CSS خود را کامنت کنید، زیرا بسیاری از آنها خود گویای همه چیز خواهند بود. مواردی که باید کامنت بگذارید مواردی هستند که به دلیلی خاص در آنها تصمیم خاصی گرفتهاید.
ممکن است از یک ویژگی CSS به روشی خاص برای دور زدن ناسازگاریهای مرورگرهای قدیمی استفاده کرده باشید، به عنوان مثال:
شاید شما برای رسیدن به چیزی، یک آموزش را دنبال کردهاید و CSS آن خیلی واضح یا قابل تشخیص نیست. در این صورت، میتوانید URL آموزش را به نظرات اضافه کنید. وقتی حدود یک سال دیگر به این پروژه برگردید و به طور مبهم به یاد بیاورید که یک آموزش عالی در مورد آن چیز وجود داشته است، اما نمیتوانید به یاد بیاورید که از کجا آمده است، از خودتان تشکر خواهید کرد.
بخشهای منطقی را در فایل استایل خود ایجاد کنید
ایده خوبی است که تمام استایلهای رایج را ابتدا در استایلشیت قرار دهید. این به معنی تمام استایلهایی است که به طور کلی اعمال میشوند، مگر اینکه کار خاصی با آن عنصر انجام دهید. معمولاً قوانینی برای موارد زیر تنظیم خواهید کرد:
body
p
h1، h2، h3، h4، h5
ul و ol
ویژگیهای جدول
لینکها
در این بخش از استایلشیت، استایل پیشفرض را برای نوع موجود در سایت ارائه میدهیم و یک استایل پیشفرض برای جداول داده و لیستها و غیره تنظیم میکنیم.
بعد از این بخش، میتوانیم چند کلاس کاربردی تعریف کنیم، برای مثال، کلاسی که سبک پیشفرض لیست را برای لیستهایی که قرار است به عنوان آیتمهای flex یا به روش دیگری نمایش دهیم، حذف میکند. اگر چند انتخاب سبکبندی دارید که میدانید میخواهید روی عناصر مختلف زیادی اعمال کنید، میتوانید آنها را در این بخش قرار دهید.
سپس میتوانیم هر چیزی را که در کل سایت استفاده میشود اضافه کنیم. این موارد میتواند شامل طرحبندی اولیه صفحه، هدر، استایل ناوبری و غیره باشد.
در نهایت، CSS را برای موارد خاص، بر اساس زمینه، صفحه یا حتی مؤلفهای که در آن استفاده میشوند، لحاظ خواهیم کرد.
با مرتب کردن موارد به این روش، حداقل ایدهای داریم که در کدام بخش از استایلشیت به دنبال چیزی خواهیم گشت که میخواهیم تغییر دهیم.
از انتخابگرهای بیش از حد خاص خودداری کنید
اگر انتخابگرهای بسیار خاصی ایجاد کنید، اغلب متوجه خواهید شد که برای اعمال همان قوانین به عنصر دیگر، باید بخشهایی از CSS خود را کپی کنید. برای مثال، ممکن است چیزی شبیه به انتخابگر زیر داشته باشید که قانون را به با کلاس box درون با کلاس main اعمال میکند.
اگر میخواستید همین قوانین را روی چیزی خارج از main یا چیزی غیر از اعمال کنید، باید یک انتخابگر دیگر به این قوانین اضافه کنید یا یک مجموعه قوانین کاملاً جدید ایجاد کنید. در عوض، میتوانید از انتخابگر کلاس box برای اعمال قانون خود روی هر عنصری که کلاس box را دارد استفاده کنید:
مواقعی وجود خواهد داشت که دقیقتر کردن چیزی منطقی به نظر میرسد؛ با این حال، این معمولاً یک استثنا خواهد بود و نه یک رویه معمول.
استایلشیتهای بزرگ را به چندین استایلشیت کوچکتر تقسیم کنید
در مواردی که برای بخشهای مجزای سایت، استایلهای بسیار متفاوتی دارید، ممکن است بخواهید یک استایلشیت داشته باشید که شامل تمام قوانین سراسری و همچنین چند استایلشیت کوچکتر باشد که شامل قوانین خاص مورد نیاز برای آن بخشها باشند. میتوانید از یک صفحه به چندین استایلشیت لینک دهید و قوانین عادی آبشاری اعمال میشوند، به این صورت که قوانین موجود در استایلشیتهایی که بعداً لینک شدهاند، پس از قوانین موجود در استایلشیتهایی که قبلاً لینک شدهاند، قرار میگیرند.
به عنوان مثال، ممکن است یک فروشگاه آنلاین به عنوان بخشی از سایت داشته باشیم که مقدار زیادی CSS فقط برای استایلبندی لیست محصولات و فرمهای مورد نیاز فروشگاه استفاده میشود. منطقی است که این موارد را در یک استایلشیت متفاوت داشته باشیم که فقط در صفحات فروشگاه به آنها لینک داده شده باشد.
این میتواند سازماندهی CSS شما را آسانتر کند و همچنین به این معنی است که اگر چندین نفر روی CSS کار میکنند، موقعیتهای کمتری خواهید داشت که دو نفر نیاز داشته باشند همزمان روی یک استایلشیت کار کنند و منجر به تداخل در کنترل منبع شوند.
ابزارهای دیگری که میتوانند کمک کنند
خود CSS سازماندهی داخلی زیادی ندارد؛ بنابراین، سطح ثبات در CSS شما تا حد زیادی به خودتان بستگی دارد. جامعه وب ابزارها و رویکردهای مختلفی را توسعه داده است که میتواند به شما در مدیریت پروژههای بزرگتر CSS کمک کند. از آنجایی که احتمالاً هنگام کار با افراد دیگر با این ابزارها مواجه میشوید و از آنجایی که آنها اغلب به طور کلی مفید هستند، ما یک راهنمای کوتاه برای برخی از آنها ارائه دادهایم.
به جای اینکه نیاز به تدوین قوانین خودتان برای نوشتن CSS داشته باشید، میتوانید از اتخاذ یکی از رویکردهایی که قبلاً توسط جامعه طراحی و در پروژههای زیادی آزمایش شدهاند، بهرهمند شوید. این روشها اساساً راهنماهای کدنویسی CSS هستند که رویکردی بسیار ساختارمند برای نوشتن و سازماندهی CSS اتخاذ میکنند. معمولاً آنها تمایل دارند CSS را طولانیتر از زمانی که هر انتخابگر را برای مجموعهای از قوانین سفارشی برای آن پروژه نوشته و بهینه کردهاید، ارائه دهند.
با این حال، با اتخاذ یکی از آنها، ساختار زیادی به دست میآورید. از آنجایی که بسیاری از این سیستمها به طور گسترده استفاده میشوند، سایر توسعهدهندگان به احتمال زیاد رویکردی را که شما استفاده میکنید درک میکنند و میتوانند CSS خود را به همان روش بنویسند، به جای اینکه مجبور باشند روش شخصی خود را از ابتدا تدوین کنند.
بیشتر رویکردهایی که با آنها مواجه خواهید شد، تا حدودی مدیون مفهوم CSS شیءگرا (OOCSS) هستند، رویکردی که توسط نیکول سالیوان محبوب شده است. ایده اصلی OOCSS این است که CSS خود را به اشیاء قابل استفاده مجدد تقسیم کنید، که میتوانند در هر جایی از سایت شما که نیاز دارید استفاده شوند. مثال استاندارد OOCSS الگویی است که به عنوان شیء رسانهای توصیف میشود. این الگویی است که در یک طرف آن یک تصویر، ویدیو یا عنصر دیگر با اندازه ثابت و در طرف دیگر محتوای انعطافپذیر قرار دارد. این الگویی است که در همه وبسایتها برای نظرات، فهرستها و غیره میبینیم.
اگر از رویکرد OOCSS استفاده نمیکنید، میتوانید برای مکانهای مختلفی که این الگو استفاده میشود، یک CSS سفارشی ایجاد کنید، به عنوان مثال، با ایجاد دو کلاس، یکی به نام comment با مجموعهای از قوانین برای اجزای تشکیلدهنده، و دیگری به نام list-item با تقریباً همان قوانین کلاس comment به جز برخی تفاوتهای کوچک. تفاوتهای بین این دو مؤلفه این است که list-item دارای حاشیه پایینی است و تصاویر در نظرات دارای حاشیه هستند در حالی که تصاویر list-item این حاشیه را ندارند.
در OOCSS، شما یک الگو به نام media ایجاد میکنید که تمام CSS مشترک هر دو الگو را دارد - یک کلاس پایه برای چیزهایی که عموماً شکل شیء media هستند. سپس یک کلاس اضافی برای مقابله با آن تفاوتهای کوچک اضافه میکنیم و به این ترتیب آن سبکبندی را به روشهای خاصی گسترش میدهیم.
در HTML شما، برای نوشتن کامنت باید هر دو کلاس media و comment اعمال شوند:
آیتم لیست، رسانه و آیتم لیست را اعمال خواهد کرد:
کاری که نیکول سالیوان در توصیف و ترویج این رویکرد انجام داد، به این معنی است که حتی افرادی که امروزه به طور دقیق از رویکرد OOCSS پیروی نمیکنند، عموماً از CSS به این روش استفاده مجدد میکنند - این به عنوان یک روش خوب برای رویکرد کلی به مسائل، وارد درک ما شده است.
BEM مخفف Block Element Modifier است. در BEM، یک بلوک یک موجودیت مستقل مانند یک دکمه، منو یا لوگو است. یک عنصر چیزی شبیه به یک آیتم لیست یا یک عنوان است که به بلوکی که در آن قرار دارد، گره خورده است. یک اصلاحکننده، یک پرچم روی یک بلوک یا عنصر است که سبک یا رفتار را تغییر میدهد. شما میتوانید کدی را که از BEM استفاده میکند، به دلیل استفاده گسترده از خط تیره و زیرخط در کلاسهای CSS تشخیص دهید. به عنوان مثال، به کلاسهای اعمال شده بر روی این HTML از صفحه مربوط به قراردادهای نامگذاری BEM نگاه کنید:
کلاسهای اضافی مشابه کلاسهای استفاده شده در مثال OOCSS هستند؛ با این حال، آنها از قراردادهای نامگذاری سختگیرانه BEM استفاده میکنند.
BEM به طور گسترده در پروژههای وب بزرگتر استفاده میشود و بسیاری از افراد CSS خود را به این روش مینویسند. احتمالاً حتی در آموزشها با مثالهایی مواجه خواهید شد که از سینتکس BEM استفاده میکنند، بدون اینکه ذکر شود چرا CSS به این شکل ساختار یافته است.
برای اطلاعات بیشتر در مورد این سیستم BEM 101 به ترفندهای CSS مراجعه کنید.
تعداد زیادی از این سیستمها در حال استفاده هستند. از دیگر رویکردهای محبوب میتوان به معماری مقیاسپذیر و ماژولار برای CSS ( SMACSS ) که توسط جاناتان اسنوک ایجاد شده، ITCSS از هری رابرتز و Atomizer CSS (ACSS) که در ابتدا توسط یاهو ایجاد شده است، اشاره کرد. اگر به پروژهای برخوردید که از یکی از این رویکردها استفاده میکند، مزیت آن این است که میتوانید مقالات و راهنماهای زیادی را جستجو و پیدا کنید تا به شما در درک نحوه کدنویسی به همان سبک کمک کنند.
عیب استفاده از چنین سیستمی این است که میتوانند بیش از حد پیچیده به نظر برسند، به خصوص برای پروژههای کوچکتر.
راه دیگر برای سازماندهی CSS، استفاده از برخی ابزارهای موجود برای توسعهدهندگان front-end است که به شما امکان میدهد رویکردی کمی برنامهریزیشدهتر برای نوشتن CSS داشته باشید. تعدادی ابزار وجود دارد که ما آنها را پیشپردازندهها و پسپردازندهها مینامیم. پیشپردازنده فایلهای خام شما را اجرا میکند و آنها را به یک stylesheet تبدیل میکند، در حالی که پسپردازنده، stylesheet نهایی شما را میگیرد و کاری روی آن انجام میدهد - شاید برای بهینهسازی آن به منظور بارگذاری سریعتر.
استفاده از هر یک از این ابزارها مستلزم آن است که محیط توسعه شما بتواند اسکریپتهایی را که پیشپردازش و پسپردازش را انجام میدهند، اجرا کند. بسیاری از ویرایشگرهای کد میتوانند این کار را برای شما انجام دهند، یا میتوانید ابزارهای خط فرمان را برای کمک نصب کنید.
محبوبترین پیشپردازنده Sass است. این یک آموزش Sass نیست، بنابراین به طور خلاصه چند مورد از کارهایی را که Sass میتواند انجام دهد توضیح میدهم که از نظر سازماندهی واقعاً مفید هستند، حتی اگر از هیچ یک از ویژگیهای دیگر Sass استفاده نکنید. اگر میخواهید اطلاعات بیشتری در مورد Sass کسب کنید، با مقاله اصول اولیه Sass شروع کنید، سپس به سراغ سایر مستندات آنها بروید.
CSS اکنون دارای ویژگیهای سفارشی بومی است که این ویژگی را به طور فزایندهای کماهمیتتر میکند. با این حال، یکی از دلایلی که ممکن است از Sass استفاده کنید این است که بتوانید تمام رنگها و فونتهای استفاده شده در یک پروژه را به عنوان تنظیمات تعریف کنید، سپس از آن متغیر در سراسر پروژه استفاده کنید. این بدان معناست که اگر متوجه شدید که از سایه آبی اشتباه استفاده کردهاید، فقط باید آن را در یک مکان تغییر دهید.
اگر مانند خط اول زیر، متغیری به نام ایجاد کنیم، میتوانیم از آن در هر کجای صفحه سبک که به آن رنگ نیاز دارد، استفاده کنیم.
پس از کامپایل شدن به CSS، در نهایت CSS زیر را در فایل استایل نهایی خواهید داشت.
کامپایل کردن استایلشیتهای کامپوننت
در بالا اشاره کردم که یک راه برای سازماندهی CSS، تقسیم کردن stylesheetها به stylesheetهای کوچکتر است. هنگام استفاده از Sass میتوانید این کار را به سطح دیگری ببرید و تعداد زیادی stylesheet بسیار کوچک داشته باشید - حتی تا جایی که برای هر کامپوننت یک stylesheet جداگانه داشته باشید. با استفاده از قابلیتهای موجود در Sass (partials)، همه اینها میتوانند در یک یا تعداد کمی stylesheet کامپایل شوند تا در واقع به وبسایت شما لینک شوند.
بنابراین، برای مثال، با partials، میتوانید چندین فایل style را در یک دایرکتوری داشته باشید، مثلاً و غیره. سپس میتوانید از قانون در Sass برای بارگذاری آنها در stylesheetهای دیگر استفاده کنید:
اگر تمام بخشهای فایل، همانطور که در بالا اشاره شد، در یک فایل فهرست بارگذاری شوند، میتوانید کل آن دایرکتوری را به طور همزمان در یک فایل سبک دیگر بارگذاری کنید:
یک راه ساده برای امتحان کردن Sass استفاده از CodePen است - میتوانید Sass را برای CSS خود در تنظیمات یک Pen فعال کنید و CodePen سپس تجزیهکننده Sass را برای شما اجرا میکند تا بتوانید صفحه وب حاصل را با CSS معمولی اعمال شده مشاهده کنید. گاهی اوقات متوجه خواهید شد که آموزشهای CSS در دموهای CodePen خود از Sass به جای CSS ساده استفاده کردهاند، بنابراین دانستن کمی در مورد آن مفید است.
