Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه ۴) : Attribute Order و Boolean Attributes

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

در جلسه قبل در مورد IE Mode و Encoding و Includes صحبت کردیم و این جلسه میخایم مطالب رو جلو ببریم.

Attribute Order یا ترتیب ویژگی ها

همونطور که میدونید هر المنت HTML ویژگی‌های مربوط به خودشو داره و هر ویژگی کار خاصی رو انجام میده. برای خوانایی بیشتر کدها باید ویژگی‌ها رو به ترتیب بنویسیم. اولویت ویژگی‌ها بصورت زیر هست:

  • class
  • id و name
  • data-*
  • src و for و type و href و value
  • title و alt
  • role و aria-*

class و id به دلیل کاربرد و اهمیت زیاد دارای اولویت بیشتری نسبت به بقیه ویژگی‌ها هستن. مثلا اگر یک لینک رو در نظر بگیریم، ترتیب ویژگی‌های اون بصورت زیر هست:


  Example link

میبینید که در ابتدا class و بعد از اون ویژگی‌های id و data-toggle و href رو قرار دادیم. این کار باعث خوانایی بهتر کدها میشه و یک قالب کلی به کدهاتون میده که بهتر میتونین با کدها ارتباط برقرار کنید. مثلا ترتیب قرارگیری برای یک input رو در نظر بگیرید:

میبینید که در ابتدا class رو وارد کردیم و بعد از اون نوع input رو وارد کردیم. برای المنت تصویر یا img هم بصورت زیر هست:

...

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

Boolean Attributes یا ویژگی‌های true و false

همونطور که میدونید ویژگی هایی Boolean مقداری براشون قرار داده نمیشه. در XHTML شما مجبورید که برای ویژگی‌های Boolean مقدار رو مشخص کنید ولی در HTML5 چنین چیزی وجود ندارد و نیاز به قرار دادن مقدار نیست. مثلا کد زیر رو در نظر بگیرید:

همونطور که میبینید برای ویژگی disabled مقداری رو قرار ندادیم. با اینکار المنت input رو disable یا غیرفعال کردیم. برای مطالعه بیشتر میتونین به این لینک مراجعه کنید. بخشی از گفتهای این لینک بصورت زیر هست:

اگر یک ویژگی از نوع Boolean برای یک المنت وجود داشته باشه، به معنای اینه که مقدار اون ویژگی true هست و اگر اون ویژگی وجود نداشته باشه، به معنای اینه که مقدار اون ویژگی false هست.

بصورت خلاصه نیازی نیست که درون HTML5 برای ویژگی‌های المنتهاتون، مقداری رو قرار بدین.

Reducing Markup یا کاهش دادن کدها

تا جایی که ممکنه زمانی که دارید کدهای HTML رو مینویسید، المنتهای parent یا والد غیر ضروری رو قرار ندید. بعضی اوقات ممکنه این کار وقت گیر باشه و لازم باشه که تعدادی کد رو تغییر بدین ولی نتیجه نهایی کدهای کمتر HTML خواهد بود. کدهای زیر رو در نظر بگیرید:


  Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه 4) : Attribute Order و Boolean Attributes

همونطور که میبینید یک span غیرضروری برای img در نظر گرفتیم و کلاس avatar رو برای اون قرار دادیم. ما میتونیم کلاس مورد نظر رو برای img قرار بدیم و اون رو بصورت زیر در بیاریم:

Code Guide یا راهنمای کدنویسی HTML و CSS (جلسه 4) : Attribute Order و Boolean Attributes

حالا میتونیم به کمک کدهای CSS کار مورد نظرمون رو انجام بدیم.

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

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

یا علی

Source

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











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

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

نظر دهید

پاسخ دهید

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