30 مورد از بهترین تکنیک‌های CSS برای مبتدیان

CSS ابزاری است که تقریبا همه توسعه‌دهندگان از آن استفاده می‌کنند. با اینکه ما گاهی اوقات ویژگی‌های آن را بدیهی می‌دانیم، اما بسیار قدرتمند است و دارای تفاوت‌های ظریفی است که می‌تواند به طرح‌های ما کمک کند یا حتی بالعکس به آنها آسیب برساند. در اینجا 30 مورد از بهترین تکنیک‌ها را ذکر کرده‌ایم که باعث می‌شود CSS بهتری بنویسید و از انجام برخی اشتباهات اجتناب کنید.

1. افزایش خوانایی

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

2. بالا بردن سازگاری

پس از خوانایی کد، اطمینان حاصل کنید که CSS سازگار است. بدین ترتیب می‌توانید از نام‌های بامعنی برای کلاس‌های خود بهره بگیرید. به عنوان مثال من از caption-right. برای شناورسازی تصاویری استفاده می‌کنم که دارای یک عنوان در سمت راست هستند.

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

3. کار با فریمورک‌ها

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

بسیاری از طراحان فریمورک خاص خود را دارند که به مرور زمان آن را ایجاد کرده‌اند، این نیز ایده خوبی است که به حفظ ثبات و سازگاری پروژه‌ها کمک می‌کند.

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

 4. استفاده از ریست

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

برای مثال MeyerWeb یک ریست کلاسیک است و Normalize.css نیز نمونه محبوب دیگری است.

5. سازماندهی Stylesheet توسط یک ساختار از بالا به پایین

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

1. کلاس‌های عمومی (body،a ،p ، h1 و …)
2. #header
3. #nav-menu
4. #main-content

همچنین اگر بخش‌های مختلف وب سایت را در stylesheet با کامنت مشخص کنید، به شما بسیار کمک می‌کند.

/****** main content *********/

styles go here...

/****** footer *********/

styles go here...

6. ترکیب عناصر

بعضی اوقات عناصر موجود در stylesheet یک ویژگی یکسان را استایل‌دهی می‌کنند. پس بهتر است به جای بازنویسی کد قبلی، آنها را با یکدیگر ترکیب کنیم. به عنوان مثال عناصر h1 ، h2 و h3 ممکن است همگی فونت و رنگ مشابهی داشته باشند:

h1, h2, h3 {font-family: tahoma, color: #333}

بنابراین به جای اینکه ویژگی‌های آنها را جداگانه بنویسیم، همه را در یک خط استایل می‌دهیم.

7. ابتدا HTML را ایجاد کنید

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

8. استفاده از کلاس‌های چندگانه

گاهی اوقات افزودن چندین کلاس به یک عنصر مفید خواهد بود. فرض می‌کنیم شما یک box دارید که می‌خواهید شناور شود و از قبل هم یک کلاس .right در CSS خود دارید که همه چیز را به سمت راست می‌برد. پس به سادگی می‌توانید یک کلاس اضافی وارد کنید، مانند این:

<div class="box right"></div>

همچنین هر تعداد کلاس که بخواهید می‌توانید به آن اضافه کنید (با یک فاصله از هم جدا شوند).

توجه: هنگام استفاده از id‌ها و نام‌های کلاس مانند "left" و "right" بسیار مراقب باشید. سعی کنید فقط برای موارد ضروری آنها را به کار ببرید. اما چرا؟ بیایید تصور کنیم که در وسط کار تصمیم می‌گیرید باکس مورد نظر را به سمت چپ شناور کنید. در این حالت باید به HTML خود برگردید و نام کلاس را تغییر دهید که کاملا غیر منطقی است. پس به یاد داشته باشید HTML برای نشانه گذاری و ساختاربندی محتوا است و CSS برای استایل‌دهی و نحوه چیدمان و نمایش آنها.

9. از Doctype درست استفاده کنید

تعریف doctype تا حد زیادی بر اعتبار یا عدم اعتبارسنجی نشانه گذاری و CSS شما تأثیر می‌گذارد. در واقع کل ظاهر وب سایت شما بسته به نوع داک تایپی که تعریف می‌کنید می‌تواند تغییر کند.

بدین ترتیب هنگام ایجاد صفحات HTML5 می‌توانید به سادگی از <!DOCTYPE html> استفاده کنید.

10. مختصرنویسی

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

#crayon {
    margin-left:    5px;
    margin-right:   7px;
    margin-top: 8px;
}

بدین منظور می‌توانید آنها را در یک خط ترکیب کنید، مانند این:

#crayon {
    margin: 8px 7px 0px 5px; 
}

11. کامنت گذاری را فراموش نکنید

درست مانند هر زبان دیگری بهتر است کد خود را در بخش‌هایی کامنت کنید. برای این کار کافی است /* را در پشت کامنت و */ را برای بستن آن اضافه کنید، مانند زیر:

/* Here's how you comment CSS */

12. تفاوت بین عناصر block و inline را درک کنید

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

در زیر لیستی از عناصری که معمولا inline هستند آورده شده است:

span, a, strong, em, img, br, input, abbr, acronym

و همینطور عناصر block:

div, h1...h6, p, ul, li, table, blockquote, pre, form

13. خصوصیت‌ها را به صورت حروف الفبا بنویسید

با اینکه این مورد یک نکته غیرضروری است، اما می‌تواند برای اسکن سریع مفید باشد.

#cotton-candy {
    color: #fff;
    float: left;
    font-weight:
    height: 200px;
    margin: 0;
    padding: 0;
    width: 150px;
}

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

14. بهره گیری از فشرده سازهای CSS

CSS Compressorها با حذف خطوط اضافه، فضاهای خالی، فاصله‌ها و همچنین ترکیب عناصر به کاهش حجم فایل CSS کمک می‌کنند. این امر می‌تواند حجم فایل را تا حد زیادی کاهش دهد و بارگذاری در مرورگر را سرعت می‌بخشد. CSS Minifier و HTML Compressor دو ابزار آنلاین عالی هستند که می‌توانند کدهای CSS را کوچک کنند.

لازم به ذکر است فشرده سازی CSS می‌تواند باعث افزایش عملکرد شود، اما مقداری از خوانایی کد از بین می‌رود.

15. استفاده از کلاس‌های عمومی

دیده‌اید گاها استایل‌های خاصی وجود دارد که بارها و بارها از آنها استفاده می‌کنید. اما به جای افزودن آن استایل خاص به هر id، می‌توانید کلاس‌های عمومی ایجاد کرده و آنها را به idها یا سایر کلاس‌های CSS (با استفاده از نکته شماره 8) اضافه کنید.

به عنوان مثال، من در طرح‌های خودم از float: right و float: left استفاده می‌کنم. بنابراین به سادگی کلاس‌های left. و right. را به stylesheet خود اضافه می‌کنم و آن را به عناصر ارجاع می‌دهم.

.left {float:left}
.right {float:right}
<div id="coolbox" class="left">...</div>

به این ترتیب دیگر لازم نیست دائما float را اضافه نمایید.

16. استفاده از margin: 0 auto برای وسط قرار دادن عناصر در صفحه

بسیاری از مبتدیان CSS فکر می‌کنند که به سادگی می‌توان از float: center به منظور وسط قرار دادن عناصر block-level استفاده کرد. اما به همین راحتی نیست، برای وسط قرار دادن div، پاراگراف یا سایر عناصر در صفحه باید از روش زیر استفاده کنید:

margin: 0 auto; // top, bottom - and left, right values, respectively.

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

17. فقط از div استفاده نکنید

در مبتدیان رایج است که هر عنصر را درون یک div به همراه id یا کلاس قرار می‌دهند و سپس یک استایل برای آن ایجاد می‌کنند.

<div class="header-text"><h1>Header Text</h1></div>

گاهی اوقات ممکن است ایجاد استایل‌های منحصر به فرد مانند مثال بالا آسان به نظر برسد، اما با این کار شما کد خود را شلوغ می‌کنید. در حالی که این می‌توانست به خوبی کد زیر باشد:

<h1>Header Text</h1>

پس به راحتی می‌توانید به جای div والد، ​​یک استایل به h1 اضافه کنید.

18. بهره گیری از Browser Developer Tools

مرورگرهای وب مدرن برخی ابزارهای پیشرفته دارند که برای هر توسعه‌دهنده وب ضروری است. این ابزارهای توسعه اکنون بخشی از همه مرورگرهای اصلی از جمله کروم، فایرفاکس، سافاری و اج هستند. در میان بسیاری از ویژگی‌هایی که به همراه ابزارهای توسعه‌دهنده (مانند دیباگینگ جاوااسکریپت، اینسپکت HTML و مشاهده خطاها) وجود دارد، می توانید CSS را در حالت بصری به صورت real-time بررسی، اصلاح و ویرایش کنید.

19. استفاده کمتر از هک

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

20- استفاده کمتر از پوزیشن Absolute

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

21. استفاده از Text-transform

text-transform یک ویژگی CSS بسیار مفید است که به شما امکان می‌دهد نحوه قالب بندی متن در سایت خود را استاندارد کنید. به عنوان مثال اگر می‌خواهید چند هدر ایجاد کنید که فقط حروف کوچک داشته باشند، کافی است مقدار lowercase را به خصوصیت text-transform در استایل هدر اضافه کنید:

text-transform: lowercase;

اکنون همه حروف هدر به صورت پیش فرض کوچک می‌شوند. text-transform به شما اجازه می‌دهد متن خود را (حرف اول بزرگ، همه حروف بزرگ یا همه حروف کوچک) با یک ویژگی ساده تغییر دهید.

22. برای پنهان کردن h1 از Margin منفی استفاده نکنید

غالبا افراد از یک تصویر برای متن هدر خود استفاده می‌کنند و سپس به آن display: none یا یک مارجین منفی به منظور پنهان کردن از صفحه می‌دهند. مت کاتس - رئیس سابق تیم وب اسپم گوگل - رسما اعلام کرده است که این روش مناسبی نیست، زیرا ممکن است گوگل آن را اسپم (هرزنامه) در نظر بگیرد.

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

23. اعتبارسنجی CSS و XHTML

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

24. Rem و Em در مقابل Pixel

همیشه در مورد اینکه کدام واحد اندازه گیری (پیکسل یا em و rem) برای تعیین اندازه فونت استفاده شود، بحث‌های زیادی وجود داشته است. پیکسل‌ها یک روش ثابت برای تعریف اندازه فونت هستند، اما em با اندازه‌های مختلف مرورگر و دستگاه‌های تلفن همراه مقیاس پذیرتر است. با ظهور انواع مختلف مرورگر وب (لپ تاپ، تلفن همراه و ...)، em و rem به طور پیش فرض برای اندازه فونت‌ها به منظور تبدیل شدن به بزرگترین شکل ممکن انعطاف پذیرتر هستند.

25. Listها را دست کم نگیرید

لیست‌ها راهی عالی برای نمایش داده‌ها در قالبی ساختار یافته هستند و استایل آنها به راحتی قابل تغییر است. به لطف خصوصیت display دیگر لازم نیست از لیست فقط به عنوان یک ویژگی متنی استفاده کنید. لیست‌ها همچنین برای ایجاد منوهای ناوبری و مواردی از این دست بسیار عالی هستند.

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

26. اجتناب از سلکتورهای اضافی

به راحتی می‌توان یک سری سلکتور اضافی را به CSS خود افزود، اما این کار stylesheet را به هم ریخته می‌کند. یکی از نمونه‌های متداول استفاده از سلکتورهای اضافی، لیست‌ها هستند.

body #container .someclass ul li {....}

در این مورد، فقط someclass li. بسیار خوب کار می‌کند.

.someclass li {...}

توجه: افزودن سلکتورهای اضافی نظم و ترتیبی را به همراه نخواهد داشت، اما CSS شما را تا جایی که ممکن است ساده و تمیز نگه می‌دارد.

27. به کارگیری Margin و Padding برای همه عناصر

مرورگرهای مدرن از نظر نحوه نمایش عناصر تقریبا مشابه عمل می‌کنند، اما مرورگرهای قدیمی تمایل دارند عناصر را متفاوت نشان دهند. به عنوان مثال Internet Explorer عناصر خاصی را متفاوت از Firefox یا Chrome ارائه می‌دهد و همچنین نسخه‌های مختلف Internet Explorer هم متفاوت از یکدیگر هستند.

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

* {margin:0; padding:0;}

در حال حاضر همه عناصر دارای پدینگ و مارجین 0 هستند، مگر اینکه با استایل دیگری در stylesheet تعریف شده باشند.

28. استفاده از چندین Stylesheet

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

به عنوان مثال ممکن است یک برنامه نظرسنجی داشته باشید که دارای مجموعه‌ای از استایل‌های منحصر به فرد است. به جای قرار دادن استایل‌های نظرسنجی در stylesheet اصلی، می‌توانید poll.css را فقط برای صفحاتی که نظرسنجی دارند، ایجاد کنید.

با این حال مطمئن شوید که تعداد درخواست‌های HTTP در حال انجام را حتما در نظر بگیرید. بسیاری از طراحان ترجیح می‌دهند چندین stylesheet را توسعه داده و سپس آنها را در یک فایل ترکیب کنند. این امر تعداد درخواست‌های HTTP را به یک مورد کاهش می‌دهد. همچنین کل فایل در سیستم کاربر کش می‌شود.

29. هنگام دیباگ کردن ابتدا تگ‌های بسته را بررسی کنید

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

30. سعی کنید از Flexbox و Grid Layout به جای Float استفاده کنید

در گذشته استفاده از float برای ایجاد هر نوع چیدمانی بسیار رایج و ضروری بود. اما امروزه floatها مشکلات زیادی به همراه دارند. در عوض می‌توانید از ماژول‌های طرح بندی قوی‌تری به نام Flexbox و Grid Layout استفاده کنید. Flexbox به شما کمک می‌کند تا طرح بندی‌های تک بعدی ایجاد کنید و grid نیز به شما در طرح بندی‌های دو بعدی کمک می‌کند.

یک مورد اضافی: کمتر از !important استفاده کنید

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

یکی از موارد احتمالی برای این مورد، تعیین سبک عناصر شخص ثالث اضافه شده به یک صفحه وب است که در آن نمی‌توانید stylesheet اصلی، ترتیب بارگیری آن و موارد دیگر را تغییر دهید.

منبع