Toza HTML kodini yozish uchun 8 ta eng yaxshi amaliyot

Hech qachon HTMLga qaraganmisiz va qiziqtirganmisiz ...

Yaxshi kod yozyapmanmi ?!

Bu etarlicha professional ko'rinadimi? To'g'ri ish qilyapmanmi? HTML kod qanday toza ko'rinishga ega?

Ushbu savollarga javob berish odatiy va yaxshi, ayniqsa siz chalkash, bema'ni, shilimshiq va spagetti kodlarini yozishni istamasangiz:

Toza kodni yozish sizning eng katta tashvishingiz bo'lishi kerak, chunki veb-sahifalarning aksariyati HTML orqali taqdim etiladi. Siz saytingiz poydevorini chalkashtirmoqchi emassiz. Bu shunchaki noto'g'ri va xijolatli.

Bu erda siz ushbu shubhalarni unutish va toza HTML-ni yozish uchun 8 ta ajoyib amaliyotni topasiz, bu uni o'qiganlarning barchasini hayratda qoldiradi.

1. f ** k ni bering

Jiddiy ravishda. Sizga yaxshi kod yozishingiz kerak bo'lgan eng muhim narsa bu ishni to'g'ri bajarish istagi. Toza HTML kodini yozish oson, ammo siz unga g'amxo'rlik qilishingiz va ko'p e'tibor berishingiz kerak.

"Toza kod - bu g'amxo'rlik qiladigan kishi tomonidan yozilgan kod" - Maykl Feathers

Sizning kodingiz sizning ishlab chiqaruvchingiz turini aks ettiradi. Kimdir kodlash ishtiyoqi borligini yoki HTML kodning bir nechta satrlarini o'qib, f ** k bermasligini bilishingiz mumkin. Yomon va tartibsiz kod yozadigan dangasa kasbiy odamlar bo'lishi tasodif emas.

2. Shrift

Kiritilgan kodni o'qish oson, tushunish oson, o'zgartirish oson va saqlash osonroq. Kod to'g'ri kiritilmagan bo'lsa, elementlar orasidagi ota-ona-bola munosabatlarini tushunish qanchalik qiyinligini ko'rib chiqing:

HTML kodi noto‘g‘ri:
  
 
    
  
HTML kodi yaxshiroq:
  
    
                  
  

Belgilash uchun qancha bo'sh joydan foydalanish kerak? Ko'p odamlar 4 bo'shliqni aytadilar, boshqalari esa 2 ni aytadilar va deyarli hamma yorliqlardan nafratlanadi.

Mening maslahatim? Buni o'ylamang, ma'lum bir kosmik qiymatdan foydalanish unchalik muhim emas. Eng muhimi, bu ...

3. Faqat izchil bo'ling

Toza HTML kodini yozish har doim ham yaxshi usullarni tanlash va yomonlaridan qochish haqida emas. Xuddi shu kodni yozish uchun siz ko'p marta turli xil yondashuvlardan foydalanishingiz mumkin.

Misol uchun:

  • Siz identifikator va sinflar uchun tire yoki pastki chiziqdan foydalanishingiz mumkin
  • Bitta kotirovka yoki ikki tirnoqli argumentlardan foydalanishingiz mumkin
  • Siz 2 yoki 4 bo'sh joy qoldirishingiz mumkin

Faqat izchil bo'ling. Sizga yoqadigan ma'lum bir amaliyotni topsangiz, unga yopishib oling va hamma joyda foydalaning. Noma'lumlik sizning kodingizni siz uchun va uni o'qishi kerak bo'lgan kambag'al odam uchun juda chalkash qiladi.

4. Divitni tugatish

"Divit" - bu HTML uchun keng tarqalgan muammoning kulgili nomi. Biz ko'pincha divlarni haddan tashqari oshirib yuboramiz, chunki biz CSS-da styling uchun barcha elementlarni yig'ishni va mo'ljal olishni xohlaymiz. Keyin biz keraksiz divlarning abadiy ro'yxatiga ega bo'lamiz:

HTML kodi noto‘g‘ri:
  
Sarlavha
  
Taglavha
  
Xabarning tarkibi
  
    
          
  • 1-element
  •       
  • 2-element
  •     
  
HTML kodi yaxshiroq:
  

sarlavha

  

Taglavha

  

Xabarlarni yuborish

  
        
  • 1-element
  •     
  • 2-element
  •   

Yozuvchilar o'z yozuvlarini yozish jarayonida ko'p marotaba tahrir qilgani kabi, siz doimiy ravishda HTML-ni qayta ishlab chiqishingiz yoki qayta yozishingiz kerak. Bo'linmalar sonini kamaytiring va barcha keraksiz elementlarni o'chirib, kodingizni tozalang.

5. Sharhlardan saqlaning

HTML dasturlash tili emas, sharhlar kerak emas, chunki HTML-ni belgilash juda ham tushunarli. Agar siz o'zingizning HTML-ga ko'p izoh berayotganingizni sezsangiz, HTML elementlari havolasini ko'rib chiqishingiz kerak.

"Yomon kodni sharhlamang. Qayta yozing. ”Brayan V. Kernigan

Sizning kodingizni tushunish oson bo'lmaydi, chunki siz hamma joyda sharhlar qo'shasiz. Siz ulardan narsalarni ravshanroq qilish uchun foydalanishingiz mumkin (masalan, ko'p qatorli kodlardan keyin diviziyani yopayotganingizni ko'rsatish uchun). Ammo aniq yoki noto'g'ri yozilgan narsalarni sharhlamang.

6. Sinf = "aniq nom"

Sinf = "wpr" nimani anglatadi?

Kenglik paragrafi? WordPress? Whopper ?! Toza HTML kodi oddiy o'yinga o'xshamasligi kerak.

Sizning identifikatorlaringiz va sinflaringiz uchun muhim ismlardan foydalaning. Ular qisqa, tavsifli va faqat bitta tushunchani anglatishi kerak. Bu sizning HTMLingizni aniqroq qiladi va styling jarayonini osonlashtiradi.

O'zingizning sinfingizni "wpr" o'rniga "o'rash" deb nomlasangiz yaxshi bo'larmidi?

7. bo‘sh joydan foydalaning

Ko'p odamlar, bo'sh joylardan foydalanmasdan, sindirilgan kodni yozadilar. Natija? Tinish va paragraflarsiz kitob o'qish kabi:

Jahannam:

jadvali

tikish jadvali <<> 1-ma'lumotlar 2-ma'lumotlar CalcuttaO'zgarishni boshqarish
Yaxshiroq kod:

Jadval


  
    
    
  
  
    
    
  
1-ma'lumotlar 2-ma'lumotlar
Kalkutta apelsin

Bo'sh joydan foydalaning: ustun, bo'sh chiziqlar, chiziqlar. Boshqa odamlar (shu qatorda siz ham) kelajakda boshingizni og'ritmasdan kodingizni o'qiy olishlari kerak. Toza o'qiladigan HTML kodini yozganingizdan keyin fayllaringizni kichraytirishi yaxshi.

8. Eng yaxshisidan nusxa oling

Dunyoning eng yaxshi rassomlari o'zlarining hunarmandchiligini ular qoyil qolgan odamlarning asarlarini ko'paytirish orqali bilib olishdi. Toza HTML kodini yozish uchun xuddi shu strategiyadan foydalanishingiz mumkin (bu ham juda ijodiy jarayon). Chiroyli toza kodni qanday yozishni o'rganishning eng oson usuli oddiy: chiroyli toza kodni o'qing va keyin uni takrorlang.

“Hech narsaga taqlid qilishni istamaganlar hech narsa ishlab chiqarmaydilar. "- Salvador Dali

Siz .. qila olasiz; siz ... mumkin:

  • Ochiq kodli loyihalarni o'rganing. Ularning mavjud bo'lishining sabablaridan biri, shuning uchun biz hammamiz bir-birimizga qarab ishlashni o'rganishimiz va yaxshilashimiz mumkin.
  • Kodlashning eng yaxshi usullarini o'rgatadigan bloglar va maqolalarni o'qing.
  • Udemy dasturchilarini tayyorlash kurslarini o'ting. Ajablanarli sharhlarga ega bo'lganlarni tanlang.

Siz biron bir narsani qilishning aniq to'g'ri yo'li yo'qligini topasiz ... ammo toza va iflos HTML kodlari o'rtasida katta farq borligini ham bilib olasiz.

Sizning kodingiz to'liq tartibsizlik kabi ko'rinishini xohlamaysiz, shunday emasmi? ;)

*** Sizga bu yoqdimi? Iltimos, boshqalar bu maqolani bilib olishlari uchun menga bir nechta qarsaklar bering.