Написання хорошого коду

9 червня 2022 р.951

Для написання HTML і CSS багато чого слід вивчити — різні елементи, атрибути, властивості, значення тощо. Основною метою кожного уроку до цього моменту було пояснення цих різних компонентів HTML і CSS, сподіваючись допомогти вам зрозуміти базові основи обох мов. Цей урок робить крок назад і дивиться на абстрактнішу картину HTML і CSS.

Більш точно, цей урок присвячений передовій практики написання коду на HTML і CSS. Описані методи служать як загальний каркас для написання HTML і CSS. Вони застосовуються в кожному уроці і про них завжди слід пам'ятати під час програмування.

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

Методи написання HTML

Набір передових практик призначений для збереження коду простим і добре організованим. Основні методи HTML не відрізняються, їх метою є написання розмітки, добре структурованої і сумісної зі стандартами. Описані тут рекомендації пропонують коротке введення в методи написання HTML і список ні в якому разі не вичерпується ними. для виконання та відображення з різним ступенем точності. Успішне відображення, однак, не означає, що наш код є семантично правильним або гарантує, що код сумісний зі стандартами. Крім того, поганий код непередбачуваний і ви не можете бути впевнені, що отримаєте під час відображення. Ми повинні бути уважними при написанні HTML — у вкладеннях закривати всі елементи правильно, використовувати ідентифікатори та класи належним чином і завжди перевіряти наш код.

Наступний код містить кілька помилок, у тому числі використовує значення intro для атрибута id кілька разів, тоді як він має бути унікальним значенням, елементи <p> та <strong> закриваються в неправильному порядку першому абзаці, а елемент <р > у другому абзаці не закривається взагалі.

Поганий код

<code data-language="html"><p id="intro">Новинки в меню сьогодні включають <strong>карамельний яблучний сидр та ранкові млинці</p>.< /strong> <p id="intro">Карамельний яблучний сидр смачний.

Хороший код

<code data-language="html"><p class="intro">Новинки в меню сьогодні включають <strong>карамельний яблучний сидр та ранкові млинці</strong>.</p> <p class="intro">Карамельний яблучний сидр смачний.</p>

Використання семантичних елементів

Бібліотека елементів у HTML є досить великою, складається з більш ніж 100 елементів, доступних для застосування. Вирішити, які елементи використовувати для опису різного вмісту може бути складно, але ці елементи є основою семантики. Ми повинні досліджувати і перевіряти ще раз свій код і переконатися що використовуємо відповідні семантичні елементи. Люди будуть дякувати нам у довгостроковій перспективі за створення більш доступного сайту, а ваш HTML буде незрівнянно легше стилізувати. Якщо ви не впевнені у своєму коді, знайдіть друга, який вам допоможе і виконає рутинний огляд коду.

Нижче в HTML не використовуються відповідні елементи заголовка та абзацу, натомість застосовуються безглузді елементи стилізації та групування вмісту.

Поганий код

<code data-language="html"><span class="heading"><strong> ;З поверненням</span></strong> <br><br> Пройшов деякий час. Чим ви займалися? <br><br>

Хороший код

<code data-language="html"> <h1>З поверненням</h1> <p>Минуло деякий час. Чим ви займалися?</p>

Використовуйте правильну структуру документа

Як згадувалося раніше, HTML є прощаючою мовою, отже, сторінки будуть відображатися без використання доктайп або елементів <html>, <head> та <body> . Без доктайпу та цих структурних елементів, сторінки не відображатимуться правильно в будь-якому браузері.

Ми завжди повинні бути впевнені, що використовуємо правильну структуру документа, зокрема доктайп та елементи < ;html>, <head> та <body>. Це робить наші сторінки сумісними зі стандартами та повністю семантичними та гарантує, що вони будуть відображатися як нам потрібно.

Поганий код

<code data-language="html"><html> <h1>Привіт, мир!</h1> <p>Це веб-сторінка.</p>
</html>

Хороший код

<code data-language="html"><! DOCTYPE html>
<html>
<head>
<title>Привіт, світ</title>
</head>
<body> <h1>Привіт, мир!</h1> <p>Це веб-сторінка.</p>
</body>
</html>

Зберігайте синтаксис організованим

При зростанні сторінок керувати HTML стає непростим завданням. На щастя, є кілька простих правил, які можуть допомогти зберегти наш синтаксис чистим та організованим. До них належать такі:

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

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

Поганий код

<code data-language="html"><Aside> <h3>Чикаго</h3> <H5 HIDDEN='HIDDEN'>Місто в Іллінойсі</H5> <img src=chicago.jpg alt="Чикаго, третє за кількістю жителів місто у Сполучених Штатах" /> <ul> <li>234 квадратних миль</li> <li>2.715 мільйонів людей</li>
</ul>
</ASIDE>

Хороший код

<code data-language="html"><aside> ; <h3>Чикаго</h3> <h5 hidden>Місто в Іллінойсі</h5> <img src="chicago.jpg" alt="Чикаго, третє за кількістю жителів місто у Сполучених Штатах"> <ul> <li>234 квадратних миль</li> <li>2.715 мільйонів людей</li>
</ul>
</aside>

Використовуйте практичні значення ідентифікаторів та класів

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

Нижче HTML передбачається, що попередження буде червоним. Однак, коли стиль попередження зміниться на помаранчевий, ім'я класу red втратить сенс і, швидше за все, призведе до плутанини.

Поганий код

<code data-language="html"><p class="red">Помилка! Спробуйте ще раз.</p>

Хороший код

<code data-language="html"><p class="alert">Помилка! Спробуйте ще раз.</p>

Використовуйте альтернативний текст для зображень

Зображення завжди повинні включати атрибут alt . Екранні рідери та інше програмне забезпечення покладаються на атрибут alt, щоб забезпечити контекст для зображень.

Значення атрибуту alt Повинне описувати, що містить зображення. Якщо зображення не містить нічого актуального, атрибут alt, як і раніше, має бути включений, але при цьому його значення має бути порожнім, щоб екранні рідери його ігнорували, а не читали ім'я графічного файлу.

Крім того, якщо зображення не несе важливого сенсу, можливо, наприклад, як частина інтерфейсу користувача, воно при можливості має бути включене в CSS як фонове зображення, а не як елемент <img>.

Поганий код

<code data-language="html"><img src="puppy.jpg">

Хороший код

<code data-language="html"><img src="puppy.jpg" alt="Красиве щеня дворняги">

Відокремлюйте вміст від стилю

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

Поганий код

<code data-language="html"><p style="color: #393; font-size: 24px;">Дякую!</p>

Хороший код

<code data-language="html"><p class="alert-success">Дякую!</p>

Уникайте зайвих <div>

При написанні HTML легко захопитися, додавши елемент <div> тут, елемент <div> там, для побудови будь-яких необхідних стилів. Хоча це працює і додає зовсім небагато наворотів на сторінку, в результаті ми не впевнені, що кожен елемент <div> робить.

Нам слід зробити все, щоб зберегти код невеликим і скоротити розмітку, пов'язуючи кілька стилів в одному елементі, за можливості. Крім того, ми повинні використовувати відповідні структурні елементи HTML5.

Поганий код

<code data-language="html">< ;div class="container"> <div class="article"> <div class="headline">Заголовки по всьому світу</div>
</div>
</div>

Хороший код

<code data-language="html"><div class="container"> <article> <h1>Заголовки по всьому світу</h1>
</article>
</div>

Постійно реорганізуйте код

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

Методи написання CSS

Подібно HTML, методи написання CSS зосереджені на збереженні коду простим і добре організованим. CSS також містить додаткові принципи, пов'язані з деякими тонкощами мови.

Організація коду через коментарі

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

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

Поганий код

header { ... } 
article { ... } 
.btn { ... }

Хороший код

/* Основний заголовок */
header { ... } 
/* Вибрана стаття */
article { ... } 
/* Кнопки */
.btn { ... }

Пишіть CSS за допомогою кількох рядків і пробілів

При написанні CSS важливо помістити кожен селектор та опис правил на новому рядку. Потім усередині кожного селектора ми хочемо зробити відступ описів.

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

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

Поганий код

a, .btn{background:#aaa;color:#f60;font-size:18px;padding:6px;}

Хороший код

a, .btn { background: #aaa; color: #f60; font-size: 18px; padding: 6px; }

Коментарі та пробіли

Ці дві рекомендації — організація коду через коментарі та використання кількох рядків і пробілів, відноситься не тільки до CSS , але і до HTML або будь-якої іншої мови. Загалом ми повинні тримати наш код організованим та добре документованим. Якщо певна частина коду є складнішою, поясніть, як вона працює і що до неї належить у коментарях. Це допомагає іншим, які працюють з тим самим базовим кодом, а також самому собі, коли ми переглянемо власний код у майбутньому.

Використовуйте відповідні імена класів

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

Поганий код

.Red_Box { ... }

Хороший код

.alert-message { ... }

Вибудовуєте правильні селектори

Селектори CSS можуть вийти з-під контролю, якщо вони не ретельно підтримуються. Селектори легко можуть стати занадто довгими і надто специфічними.

Чим довший селектор і більше включає уточнення, тим вища його специфічність. А чим вища специфічність, тим більша ймовірність, що селектор перерве каскад CSS і викличе небажані проблеми. Ідентифікатори надто конкретні, швидко піднімають специфічність селектора і часто порушують каскад в CSS-файлах. Мінуси ідентифікаторів далеко переважують їх плюси і розумніше їх уникати.

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

Поганий код

# aside #featured ul.news li a { ... } 
#aside #featured ul.news li a em.special { ... }

Хороший код

.news a { ... } 
.news .special { ... }

Використовуйте конкретні класи за потреби

Був час, коли селектор CSS настільки довгий і специфічний, що він більше не несе сенсу. Це створює затримки продуктивності та напруга при керуванні. У цьому випадку рекомендується використовувати одиночний клас. Застосування класу до цільового елемента може створити більше коду в HTML, але дозволить коду відображатися швидше і прибере будь-які перешкоди для керування.

Наприклад, якщо елемент <em> вкладено в <h1> всередині елемента <aside> і все це вкладено в елемент <section>, то селектор може виглядати як aside h1 em. Як тільки елемент <em> переміщається з <h1>, стилі більше не будуть використовуватись. Більш гнучким селектором буде використання класу, такого як text-offset, для елемента <em>.

Поганий код

section aside h1 em { ... }

Хороший код

.text-offset { ... }

Використовуйте скорочені властивості та значення

Однією з особливостей CSS є можливість використовувати скорочені властивості та значення. Більшість властивостей та значення допускають скорочений варіант написання. Як приклад, замість написання чотирьох різних властивостей на основі margin-та їх значень для завдання відступів навколо всіх чотирьох сторін елемента, використовуйте єдину властивість margin, яка встановить значення для всіх чотирьох сторін одночасно . Використання скороченого варіанта дозволяє швидко встановити та визначити стилі.

При цьому, коли вам потрібно встановити одне значення, не слід застосовувати скорочений варіант. Якщо для блоку потрібен лише нижній margin, використовуйте одну властивість margin-bottom. Це гарантує, що інші значення margin не будуть перезаписані і ми можемо легко визначити, до якої сторони використовується margin без особливих когнітивних зусиль.

Поганий код

img { margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 10px; } 
button { padding: 0 0 0 20px; }

Хороший код

img { margin: 5px 10px; } 
button { padding-left: 20px; }

Використовуйте скорочені шістнадцяткові значення кольору

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

Поганий код

.module { background: #DDDDDD; color: #FF6600; }

Хороший код

.module { background: #ddd; color: #f60; }

Залишіть одиниці у нульових значень

Один із способів для простого скорочення кількості CSS при написанні — це видалення одиниць у нульових значень. Незалежно від того, яка одиниця довжини застосовується — пікселі, відсотки, em та ін — нуль завжди нуль. Додавання одиниці не потрібно і не несе жодної додаткової цінності.

Поганий код

div { margin: 20px 0px; letter-spacing: 0%; padding: 0px 5px; }

Хороший код

div { margin: 20px 0; letter-spacing: 0; padding: 0 5px; }

Групування та вирівнювання вендорних префіксів

З CSS3 префікси набули певної популярності, додавши трохи коду в CSS-файли. Робота з додавання префіксів нерідко має сенс при генерації стилів, однак вони повинні зберігатися організовано. Відповідно, з метою написання коду, який легко читати та змінювати, краще групувати та зрушувати окремі префікси так, щоб імена властивостей розташовувалися вертикально, як і їх значення.

Залежно від того, де розташований вендорний префікс — властивість або значення, вирівнювання може змінюватися. Наприклад, наступний хороший код зберігає властивості background вирівняними вліво, у той час як функції linear-gradient() з префіксами зсунуті так, щоб їх значення підганяли по вертикалі. Потім властивості box-sizing з префіксами зсунуті так, щоб усі вони підганялися по вертикалі.

Як завжди, мета — зробити стилі простіше для читання та редагування.

Поганий код

div { background:-webkit-linear-gradient(#a1d3b0, #f6f1d3); background:-moz-linear-gradient(#a1d3b0, #f6f1d3); background: linear-gradient(#a1d3b0, #f6f1d3);-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; }

Хороший код

div { background:-webkit-linear-gradient(#a1d3b0, #f6f1d3); background:-moz-linear-gradient(#a1d3b0, #f6f1d3); background: linear-gradient(#a1d3b0, #f6f1d3);-webkit-box-sizing: border-box;-moz-box-sizing: border-box; box-sizing: border-box; }

Вендорні префікси

При використанні префіксів ми повинні переконатися, що помістили версію властивості або значення без префіксу в кінець, після всіх версій із префіксом. Це гарантує, що браузери, які підтримують версію без префікса, відобразять цей стиль відповідно до його розміщення в каскаді, читаючи стилі з верхньої частини файлу до низу. відходять від використання префіксів. З часом це стане менше турбувати, проте, в даний час ми радимо перевірити ще раз, які стилі вимагають префікса і тримати ці префікси організовано.

Модульність стилів для повторного використання

CSS побудований на тому, що дозволяє повторно використати стилі, зокрема, за допомогою класів. З цієї причини, стилі, призначені класу, повинні бути модульними і доступними для обміну між елементами при необхідності. варіантом. Однак, ті ж самі стилі можуть застосовуватися до розділу майбутніх подій. Клас news не підходить у цьому випадку. Клас feat-box мав би більше сенсу і може бути широко використаний по всьому сайту.

Поганий код

 <code data-language="css">.news { background: #eee; border: 1px solid #ccc; border-radius: 6px; } 
.events { background: #eee; border: 1px solid #ccc; border-radius: 6px; }

Хороший код

.feat-box { background: #eee; border: 1px solid #ccc; border-radius: 6px; }

Резюме

Сподіваюся, принципи написання красивих HTML і CSS стають зрозумілішими. Хоча кожна мова містить свої власні складнощі, більшість з цих методів може бути поділено між двома мовами як і з багатьма іншими мовами програмування. ми також маємо зробити все можливе, щоб навчити команду цим технікам. У свою чергу, у команди можуть бути цінні пропозиції та методи, які ми повинні дотримуватися.

Щоб виділити деякі головні теми цього уроку, наші HTML і CSS завжди повинні:

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

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

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

Ресурси та посилання

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

HTML та CSS

Mozilla Developer Network на Mozilla
Opera.Dev на Opera
HTML та CSS Tutorials на HTML Dog
DocHub — Миттєвий пошук документації
Pears — Основні шаблони розмітки та стилю

Дизайн для натхнення

Фреймворки та посібники зі стилів

Іконки

Helveticons на Goodbye Horses
Ion Icons від Ben Sperry
Social Network Icon Pack на Rogie King
Fugue Icons на Yusuke Kamiyamane
famfamfa m Icons від Mark James
Pictos від Drew Wilson
Picons
The Noun Project

Різне

COLOURlovers — Тенденції кольору та палітри
ColorHexa — Енциклопедія кольори
Modernizr — Бібліотека виявлення фіч на JavaScript
jQuery — Наворочена JavaScript-бібліотека
Google Hosted Libraries — Мережа розподілу контенту для бібліотек JavaScript
Copy Paste Character — Копіювання «прихованих» символів

Див. також

Автор та редактори

Автор: Шей Хоу

Остання зміна : 11.08.2018

Редактори: Влад Мержевич