8 кращих практик написання чистого HTML-коду

Ви коли-небудь переглядали свій HTML і замислювалися ...

Я пишу хороший код ?!

Це виглядає досить професійно? Я все роблю правильно? Чи так виглядає чистий HTML-код?

Ці питання є нормальними і хорошими, особливо якщо ви не хочете писати безладний, нестриманий, неохайний код спагетті, який виглядає так:

Написання чистого коду має бути однією з найбільших проблем, оскільки більшість веб-сторінок представлені через HTML. Ви не хочете псувати основи свого сайту. Це просто неправильно і незручно.

Тут ви знайдете 8 чудових практик забути про ці сумніви та написати правильний HTML-код, який вразить усіх, хто його прочитає.

1. Дайте f ** k

Серйозно. Найголовніше, що вам потрібно написати хороший код, - це ваше бажання робити все правильно. Написати чистий HTML-код легко, але вам потрібно дбати і приділяти багато уваги.

«Чистий код - це код, який пише хтось, хто дбає» - Майкл Перо

Ваш код відображає свого типу розробника. Ви можете сказати, чи хтось захоплений кодуванням, чи він не дає f ** k, просто прочитавши кілька рядків його HTML-коду. Не випадково ледачі непрофесіонали - це ті, хто пише поганий і неорганізований код.

2. Відступ

Відступний код легше читати, простіше зрозуміти, легше змінювати та легше обслуговувати. Просто погляньте, як важко зрозуміти відносини батько-дитина між елементами, коли код не відведений правильно:

Неправильний HTML-код:
  
 
    
  
Кращий HTML-код:
  
    
                  
  

Скільки пробілів слід використовувати для відступу? Багато людей кажуть 4 пробіли, багато інших кажуть 2, і майже кожен ненавидить вкладки.

Моя порада? Не думайте про це, не дуже важливо використовувати певне значення простору. Що насправді важливо, це…

3. Просто будьте послідовними

Написання чистого HTML-коду не завжди полягає у виборі передового досвіду та униканні поганих. Багато разів ви можете використовувати різні підходи, щоб написати один і той же рядок коду.

Наприклад:

  • Ви можете використовувати тире або підкреслення для ідентифікаторів та класів
  • Можна використовувати аргумент одинарної або подвійної цитати
  • Можна відступати з 2 або 4 пробілами

Просто будьте послідовними. Коли ви знайдете конкретну практику, яка вам подобається, дотримуйтесь її і використовуйте її всюди. Невідповідність робить ваш код надзвичайно заплутаним для вас і для бідної душі, яка має його читати.

4. Винищити "Дивіт"

"Дивіт" - кумедна назва поширеної проблеми в HTML. Ми часто зловживаємо дівами, головним чином тому, що хочемо обернути та націлити всі елементи для стилізації в CSS. Тоді ми маємо вічний список дівок, які абсолютно непотрібні:

Неправильний HTML-код:
  
Заголовок
  
Підзаголовок
  
Вміст публікації
  
    
          
  • Елемент 1
  •       
  • Елемент 2
  •     
  
Кращий HTML-код:
  

Заголовок

  

Підзаголовок

  

Опублікувати вміст

  
        
  • Елемент 1
  •     
  • Елемент 2
  •   

Так само, як письменники редагують чернетки багато разів під час написання, ви повинні постійно переробляти або переписувати свій HTML. Зменшіть кількість дівок та очистіть свій код, видаливши всі непотрібні елементи.

5. Уникайте коментарів

HTML не є мовою програмування, коментарі не потрібні, оскільки розмітка HTML дуже зрозуміла. Якщо ви багато коментуєте свій HTML, вам слід переглянути посилання на елементи HTML.

"Не коментуйте поганий код. Перепишіть це. ”- Брайан В. Керніган

Ваш код не буде простішим для розуміння лише тому, що ви додаєте коментарі скрізь. Ви можете використовувати їх, щоб зробити речі більш чіткими (наприклад, щоб показати, що ви закриваєте роздільник після багатьох рядків коду). Але не коментуйте явні речі або код, який погано написаний.

6. Клас = "ясно-ім'я"

Що означає class = “wpr”?

Ширина абзацу? WordPress? Whopper ?! Чистий HTML-код не повинен виглядати як гра-дрібниця.

Використовуйте значущі імена для своїх ідентифікаторів та класів. Вони повинні бути короткими, описовими та представляти лише одне поняття. Це зробить ваш HTML зрозумілішим, а процес стилізації - простішим.

Ви не думаєте, що було б краще, якщо б ви назвали свій клас "обгорткою" замість "wpr"?

7. Використовуйте пробіли

Багато людей пишуть розбитий код без використання пробілів. Результат? Це як читати книгу без розділових знаків або абзаців:

Пекло:
<ніхто>

Таблиця

Дані 1 Дані 2
Калькутація Помаранчевий
Кращий код:
<ніхто>

Таблиця

<таблиця>
  
     Дані 1 
     Дані 2 
  
  
     Калькутта 
     Помаранчевий 
  

Використовуйте пробіли: відступ, порожні рядки, розриви рядків. Інші люди (включаючи вас) повинні мати можливість читати ваш код у майбутньому, не боліючи головою. Добре мінімізувати ваші файли, щоб зменшити їх ПІСЛЯ ви написали чистий HTML-код.

8. Скопіюйте з кращого

Найкращі художники світу навчилися своїй майстерності, тиражуючи роботу людей, якими вони захоплювались. Ви можете використовувати ту саму стратегію для написання чистого HTML-коду (що також є досить творчим процесом). Найпростіший спосіб навчитися писати красивий чистий код - це просто: прочитати гарний чистий код і потім повторити його.

«Ті, хто не хоче нічого наслідувати, нічого не виробляють. "- Сальвадор Далі

Ти можеш:

  • Досліджуйте проекти з відкритим кодом. Однією з причин їх існування є те, що ми можемо вчитися та вдосконалюватись, дивлячись на роботу один з одним.
  • Читайте блоги та статті, які навчають вас найкращим методам кодування.
  • Пройдіть курси для розробників Udemy. Виберіть ті, які мають дивовижні відгуки.

Ви виявите, що не існує остаточного правильного способу робити речі ... але ви також виявите, що існує велика різниця між чистим і брудним HTML-кодом.

І ви не хочете, щоб ваш код виглядав як повний безлад, правда? ;)

*** Вам сподобалось це? Будь ласка, дайте мені кілька хлопців, щоб інші могли відкрити цю статтю ***