Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه ۵) : قواعد دستوری CSS

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

در جلسه قبل در مورد Attribute order و Boolean Attribute صحبت کردیم و این جلسه میخایم مطالب رو جلو ببریم.

JavaScript generated markup یا کدهای HTML ساخته شده با Javascript

ساختن و به وجود آوردن کدهای HTML به وسیله Javascript باعث میشه که سختتر بتونیم کدهای مورد نظر رو پیدا کنیم و همچنین سختتر میتونیم اونا رو ویرایش کنیم. پس تا جایی که ممکنه از اون جلوگیری کنید تا کدی منظم و بهینه‌تر داشته باشید.

موارد مربوط به CSS

Syntax یا قواعد دستوری

همانند کدهای HTML که باید از Soft Tab استفاده میکردیم، اینجا هم باید تورفتگی کدها رو با دو تا Space یا فضای خالی درست کنیم و indentation اونا رو درست کنیم. کد زیر رو در نظر بگیرید:

.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

همونطور که میبینید، کدهایی که درون { قرار گرفتن، نسبت به والد خود، تورفتگی دارند و این تورفتگی ۲ تا Space رو اشغال کرده.

نکته بعدی اینه که زمانی که تعدادی Selector یا انتخابگر رو با کاما یا , از هم جدا میکنید، اونا رو در یک خط نزارید و بهتره هر کدوم رو در خط جدید قرار بدین. پس کد بالا بصورت زیر در میاد:

.selector,
.selector-secondary,
.selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

میبینید که هر انتخابگر درون یک خط مجزا قرار داده شده است و اینکار باعث خوانایی بهتر کدها خواهد شد.

همونطور که میبینید در بالا و قبل از باز شدن } یک فضای خالی یا Space قرار دادیم. شما هم سعی کنید این کار رو همیشه انجام بدین. اینکار هم باعث خوانایی بهتر کدها خواهد شد.

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

هر خط از کدها بهتره که در خط جدیدی تعریف بشن تا اگر کدها مشکلی داشتن، ابزارهای Debugging مشکل رو به ما نشون بدن و ما بتونیم سریعا اون رو حل کنیم. همچنین در آخر هر کد خط یک ; یا Semicolon قرار بدین. آخرین کد هر دستور میتونه ; نداشته باشه ولی اگر قرار ندید، در آینده مستعد مشکل خواهد بود.

همونطور که در کد بالا میبینید، مقداری که برای box-shadow قرار داده شده، دارای کاما یا , هست. بهتره که بعد از این کاما، یک فضای خالی قرار داده بشه.

همونطور که میدونید مقادیر توابع rgb() و rgba() و hsl() و hsla() و … با استفاده از کاما یا , از هم جدا میشن. بهتره که بعد از این موارد Space یا فضای خالی قرار نگیره.

در بعضی از جاها باید یک مقدار رو بصورت اعشاری قرار بدیم. مثلا عدد ۰.۵ یا -۰.۵ رو در نظر بگیرید. بهتره در این موارد که یک ۰ قبل از ممیز وجود داره، اون رو قرار ندیم و اونرو بصورت .۵ یا -.۵ بنویسیم.

زمانی که با رنگها سروکار دارید، تا جایی که میتونین از کد هگز خلاصه نویسی شده استفاده کنید. مثلا بجای #ffffff از #fff استفاده کنید. همچنین هیچوقت از حروف بزرگ مثل #FFF استفاده نکنید و همیشه حروف کوچک رو قرار بدین.

همونطور که میدونید بعشی اوقات باید درون انتخابگرها ” رو قرار بدین، مثل input[type=”text”]. این موارد تنها در بعضی موارد دلخواه هستن و بقیه جاها باید حتما قرار داده بشه. پس بهتره برای ثبات و پایداری بیشتر همیشه ” رو قرار بدین.

هر زمان که برای یک ویژگی مقدار ۰ رو قرار میدین، دیگه لازم نیس که واحد رو برای اون مشخص کنید. پس بهتره بجای margin: 0px; کد margin: 0; رو قرار بدین.

پس کد بالا در نهایت بصورت زیر در میاد:

.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

همچنین در اینجا هم میتونین مطالعه بیشتری داشته باشید.

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

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

یا علی

Source

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











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

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

نظر دهید

پاسخ دهید

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