Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه ۸) : Single Declaration و استفاده از عملگرها

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

در جلسه قبل در مورد قرار دادن Media Query و Vendor Prefix، نکاتی رو بیان کردیم. در این جلسه قصد داریم نکات دیگه رو در اختیارتون قرار بدیم. در این جلسه در مورد قواعد با یک ویژگی تنها و استفاده از عملگرها در Less و Sass نکاتی رو خدمتتون عرض میکنیم.

قواعد با یک ویژگی تنها

فرض کنید که شما میخاید برای المنتهای خودتون فقط یک ویژگی قرار بدین. برای اینکار بصورت زیر عمل میکنید:

.span1 {
	width: 60px;
}
.span2 {
	width: 140px;
}
.span3 {
	width: 220px;
}

همونطور که میبینید، برای هر کلاس، فقط یک ویژگی رو قرار دادیم و تعریف کردیم. برای موارد این چنینی، بهتره که برای راحتی کار و همچنین خوانایی بیشتر و راحتی در ویرایش کدها، تبها و Space‌های اضافی رو پاک کنید و اونا رو بشکل زیر در بیارید:

.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

در بقیه حالات و در مواردی که بیش از یک مورد قرار داره، حتما اونا رو درون خطهای جداگانه قرار دهید. مثال زیر رو در نظر بگیرید:

.sprite { display: inline-block; width: 16px; height: 15px; background-image: url(../img/sprite.png); }
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

این کار درست نیس و باید هر ویژگی رو درون یک خط قرار بدین. بصورت زیر:

.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

هدف اصلی این کار Error Detection یا پیدا کردن خطا و اشکال در کدها هست. مثلا فرض کنید که کدهاتون رو با یک ابزار تست میکنید و اون ابزار میگه که در خط ۱۸۳ یه مشکل قرار داده شده. اگر هر ویژگی و تعریف رو درون خط جداگانه قرار بدید، به راحتی میتونین خطا رو پیدا کرده و رفع کنید.

استفاده از عملگرها در Less و Sass

فرض کنید که شما میخاید از عملگرها درون Less یا Sass استفاده کنید. در اینجا مثلا میخایم یک متغیر رو درون عدد ۲ ضرب کنیم و درون مقدار یک ویژگی قرارش بدیم. برای اینکار میشه بصورت زیر عمل کرد:

.element {
  margin: 10px 0 @variable*2 10px;
}

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

.element {
  margin: 10px 0 (@variable * 2) 10px;
}

با اینکار خوانایی کدهاتون بالا میره و بهتر میتونین در دفعات بعدی کدهاتون رو تحلیل کنید و تغییرات مورد نظرتون رو درون اون ایجاد کنید.

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

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

یا علی

Source

چه امتیازی به این مقاله می دید؟











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

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

نظر دهید

پاسخ دهید

Logo
بازیابی رمز عبور
مقایسه موارد
  • کل (0)
مقایسه
0