illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 113 ۱۰ آذر ۹۵

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

یا علی

Source

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram