Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه 10) : Class names و Selectors

در این مطلب با ادامه راهنمای کدنویسی HTML و CSS در خدمتتون هستم.

در جلسه قبل در مورد Shorthand Notation یا خلاصه نویسی و Comments یا توضیحات، نکاتی رو بیان کردیم. در این جلسه قصد داریم نکات دیگه رو در اختیارتون قرار بدیم. در این جلسه در مورد Class names یا نامگذاری کلاسها و Selectors یا انتخابگرها نکاتی رو خدمتتون عرض میکنیم.

نکاتی در مورد نامگذاری کلاسها یا Class names

برای نامگذاری کلاسها از حرف کوچک استفاده کنید و اگر خواستید دو کلمه رو از هم جدا کنید از - یا خط فاصله یا dash استفاده کنید و از underscore یا _ استفاده نکنید. همچنین همه حروف رو بهم نچسبونید و اول کلمات اونا رو بزرگ کنید (از روش camelCase استفاده نکنید). مثلا کلاسهایی که بهم مربوط هستن رو میتونین با استفاده از - از هم جدا کنید. مثلا کلاسهای .btn و .btn-danger.

از خلاصه نویسی‌های بیش از اندازه و بی معنی دوری کنید. مثلا btn برای نام کلاس دکمه‌ها مناسب هست ولی کلاس b هیچ معنی رو نمیرسونه.

نامگذاری کلاسهاتون رو سعی کنید کوتاه و مختصر انتخاب کنید. از کلاسهای معنی دار استفاده کنید و ببینید که هدف اون کلاس چیه و متناسب با همون، نام رو مشخص کنید. از این قواعد زمانی که دارید با Less و Sass کار میکنید هم استفاده کنید. مثلا کد زیر رو در نظر بگیرید:

.t { ... }
.red { ... }
.header { ... }

مطابق با مطالبی که در بالا گفته شد، کدهای CSS بالا مطلوب نیستن. کدهای زیر رو در نظر بگیرید:

.tweet { ... }
.important { ... }
.tweet-header { ... }

میبینید که همه قواعد در مورد کد بالا رعایت شده و خیلی بهتر و بهینه‌تر هست.

انتخابگرها یا Selectors

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

از انتخابگرهای چندگانه مثل [class^="..."] تا حد ممکن استفاده نکنید. ای موارد میتونین Browser Performance یا عملکرد مرورگر رو با مشکل مواجه کنن و سرعت رندر شدن سایتتون رو کاهش بدن.

سعی کنید که درون هر Selector یا انتخابگر بیشتر از 3 تا فرزند رو قرار ندید. همچنین زمانی که نیاز داشتید برای یک المنت دامنه ای رو مشخص کنید و استایل متفاوتی داشته باشه، بهتره که نزدیکترین والد اون رو بعنوان Scope یا دامنه در نظر بگیرید. مثلا کد زیر رو در نظر بگیرید:

span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

اولین مشکل اینه که نباید از span استفاده کنیم و بهتره که برای اون یک کلاس قرار بدیم. همچنین مشکل دوم اینه که در خط دوم کلاسهای زیادی رو پشت سر هم درون یک انتخابگر قرار دادیم و نباید بیشتر از 3 تا بشه. همچنین مورد آخر دامنه رعایت نشده. حالا کد زیر رو در نظر بگیرید:

.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

در این کد قواعد مورد نظر رعایت شده و خیلی بهینه‌تر از مورد قبلی هست.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

نویسنده

محمد اسفندیاری

بسیار به طراحی وب علاقمندم و به سرعت در حال یادگیری تمام مباحث پیشرفته هستم و دوست دارم که به دیگران هم یاد بدهم.