Чистый код: почему основы HTML/CSS по-прежнему важны

За мой 15-летний опыт веб-разработки я работал с различными компаниями, от корпоративного уровня до стартапов, и на этом пути я работал со многими, многими коллегами-разработчиками программного обеспечения. Одной из самых распространенных и важных проблем, с которыми я сталкивался в своих проектах, была неспособность написать чистый и простой для понимания код .

Даже лучшие разработчики из первоклассных компаний не всегда следуют лучшим практикам и пишут код, который можно очистить и оптимизировать.

Последствия беспорядочного и грязного кода

Процитирую старую, но все еще актуальную запись в блоге, в которой обсуждаются принципы чистого кода:

Исходный код сродни финансовому долгу. Предположим, вы хотите купить дом, чтобы жить в нем. У большинства людей нет финансовых средств, чтобы заплатить наличными за дом, поэтому вместо этого вы берете ипотечный кредит. Но ипотека сама по себе не очень хорошая вещь. Это ответственность. Вы должны платить проценты по долгу каждый месяц…

Так и в веб-разработке. Код имеет текущие расходы. Вы должны понять это, вы должны поддерживать его, вы должны адаптировать его к новым целям с течением времени. Чем больше у вас кода, тем больше будут текущие расходы. В наших интересах иметь как можно меньше исходного кода, но при этом иметь возможность достигать наших бизнес-целей.

Но не будем останавливаться на абстрактном. В этой статье будут рассмотрены основные принципы чистого кода, различные методы, используемые для организации кода, а также способы сделать его более удобным в сопровождении, масштабируемом и легко отлаживаемом.

Качественный код начинается с базового стиля кода, расширяясь до лучших практик при написании больших приложений на HTML/CSS с множеством повторно используемых блоков, и мы также обсудим соглашения об именах для повышения неявной читабельности, а также сторонние фреймворки и их лучшие практики.

К тому времени, когда вы закончите читать это, вы должны иметь хорошее представление об основах качественного кода и о том, как упростить поддержку и расширение вашего кода HTML и CSS.

Основы стиля кода

Давайте начнем с основ хорошего кода HTML и CSS: валидность W3C, соглашения об именах, файловая структура и так далее.

Помните о структуре с первого дня.

Если вы собираетесь разрабатывать большое приложение, вам нужно позаботиться о файловой структуре. Это может, а точнее должно выглядеть так:

Используйте валидаторы для проверки кода.

Старайтесь всегда использовать валидаторы HTML и CSS.

Плохой код:

 <figure> <div> <img src="demo.jpg" alt=""> <figcaption> <h2>Hello world</h2> </figcaption> </div> </figure> <picture> <source src="demo.webp" type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <header> <summary>Expand details</summary> </header> <p>All content goes here</p> </details>

 p { font: 400 inherit/1.125 serif; }

Хороший код:

 <figure> <img src="demo.jpg" alt=""> <!-- figcaption should be child of element figure element, not div --> <figcaption> <h2>Hello world</h2> </figcaption> </figure> <picture> <!-- source should have srcset attribute --> <source type="image/webp"> <img src="demo.jpg" alt=""> </picture> <details> <!-- summary is not allowed as child of header --> <summary>Expand details</summary> <p>All content goes here</p> </details>

 p { font-weight: 400; font-size: inherit; line-height: 1.125; font-family: serif; }

Используйте альтернативный текст в тегах <img> для соблюдения принципов чистого кода.

Этот атрибут играет жизненно важную роль для SEO, поисковых систем, поисковых роботов, программ чтения с экрана и т. д.

Плохой код:

 <img src="demo.jpg">

Хороший код:

 <img src="demo.jpg" alt="This is placeholder of the image">

Используйте кебаб-кейс (спинно-кейс).

Для имен попробуйте использовать kebab-case ( spinal-case ), а не camelCase или under_score . Используйте under_score только при использовании BEM, хотя, если вы используете Bootstrap, лучше соблюдать последовательность и использовать - в качестве разделителя.

Плохой код:

 <section class="section_featured_Listing"> <h1 class="largeTitle">H1 title</h1> </section>

Хороший код:

 <section class="section-featured-listing"> <h1 class="large-title">H1 title</h1> </section>

kebab-case более удобочитаем, чем camelCase и under_score .

Используйте осмысленные имена, понятные любому, пусть они будут короткими.

Имена классов должны выглядеть как .noun-adjective .

Попробуйте использовать общие имена классов вместо того, чтобы писать имена, специфичные для содержимого. Это делает код более читаемым

Плохой код:

 <div class="team-wrapper"> <button class="large-button-green"></button> <p class="greenText-john-smith-description"></p> <div class="white-bg"></div> </div>

Хороший код:

 <div class="section-team"> <button class="btn-lg btn-success"></button> <p class="text-success"></p> <div class="bg-white"></div> </div>

Не пишите атрибуты типа для таблиц стилей и скриптов в HTML5.

Они не требуются в HTML5, но требуются стандартами W3C в HTML4/XHTML.

Плохой код:

 <link type="text/css" rel="stylesheet" href="../styles.css"> <script type="text/javascript" src="..//main.js"></script>

Хороший код:

 <link rel="stylesheet" href="styles.css"> <script src="app.js"></script>

При необходимости используйте определенные классы.

Сделайте селектор CSS более конкретным и выберите нужные элементы; постарайтесь не упоминать их родителей, если в этом нет необходимости. Это позволит коду рендериться быстрее и устранит любые препятствия в управлении в будущем.

Плохой код:

 section aside h1 span { margin-left: 25%; }

Хороший код:

 .left-offset { margin-left: 25%; }

Хотя применение класса к целевому элементу может создать больше кода в HTML, это позволит коду отображаться быстрее и устранит любые препятствия управления.

Добавьте класс к родительскому элементу, если вы хотите придать другой стиль тому же блоку.

Если вам нужно использовать один и тот же блок, но с другим стилем, постарайтесь сохранить HTML как можно нетронутым. Просто добавьте один класс к родительскому элементу и примените все новые стили к дочерним элементам этого класса в CSS.

Плохой код:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”another-article”> <h1 class=”other-styling-title”>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } } .another-article { padding-bottom: 30px; border-bottom: 4px solid #ccc; } h1.other-styling-title { font-size: 20px; }

Хороший код:

 <article> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article> <article class=”other-styling”> <h1>Same section with another styles</h1> <p>Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum. </p> … </article>

 article { padding: 10px 15px; h1 { font-size: 32px; color: #ff0000; } &.other-styling { padding-bottom: 30px; border-bottom: 4px solid #ccc; /* you will have less classes */ h1 { font-size: 20px; } } }

Отбросьте единицы от нулевых значений.

Добавление единицы измерения не является обязательным и не дает дополнительной ценности. Нет никакой разницы между 0px, 0em, 0% или любым другим нулевым значением. Единицы не важны, потому что значение по-прежнему равно нулю.

Плохой код:

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

Хороший код:

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

Не пишите border-bottom в CSS, если вы можете добавить тег hr .

Используйте тег hr вместо того, чтобы писать новый селектор и добавлять стили границ в CSS. Это делает код более основанным на разметке, и это то, к чему мы стремимся.

Плохой код:

 <p class="border-bottom">I want this section to have a border.</p> <p>Lorem ipsum</p>

 .border-bottom { border-bottom: 1px solid #000; }

Хороший код:

 <p>I want this section to have a border.</p> <hr> <p>Lorem ipsum</p> // If necessary change hr variable in bootstrap

Используйте селектор A > B.

Очень полезно использовать селектор A > B , который применяет правила только к прямым дочерним элементам, в этом случае вам не придется сбрасывать стили всех других дочерних элементов, которым этот стиль не нужен. Например, это очень полезно при кодировании вложенных меню. Вам не нужно будет переопределять стили подменю.

Плохой код:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul li { list-style-type: none; } li ul li { /* redefine to default value */ list-style-type: disc; }

Хороший код:

 <ul> <li>List 1</li> <li>List 2</li> <li>List 3 <ul> <li>Submenu 1</li> <li>Submenu 2</li> </ul> </li> </ul>

 ul > li { list-style-type: none; }

Как написать чистый HTML

Переходя к HTML, приоритетом будет обеспечение надежного и простого в обслуживании внешнего интерфейса.

Постарайтесь создать внешний интерфейс, максимально основанный на разметке.

Сделайте свой внешний код на основе разметки вместо того, чтобы писать слишком много CSS.

Это поможет поисковым системам и сделает ваш код более читабельным, что потенциально повысит рейтинг поиска и удобство для пользователей.

Плохой код:

 <div class="main-content"> <p class="content-title">Main text title</p> <img src="http://via.placeholder.com/150x150" alt="example"> <p class="image-description">Here is image description</p> </div>

Хороший код:

 <main> <h1>Main text title</h1> <figure> <img src="http://via.placeholder.com/150x150" alt="example"> <figcaption> Here is image description </figcaption> </figure> </main>

Избегайте использования ненужных оболочек в HTML.

Старайтесь не использовать ненужные элементы-оболочки в HTML. Тонны элементов <div> и <span> остались в прошлом. Сохранение гранулярности и линейности позволяет вам получить минимальный код (см. следующий пункт).

Плохой код:

 <section class=”container”> <div class=”row”> <div class=”col-xs-12”> <div class=”inner-wrapper”> <span>Unnecessary br tags</span> </div> </div> </div> </section>

Хороший код:

 <section class=”container”> <p>Unnecessary br tags</p> </section>

Используйте атомарные классы для стилизации.

Не используйте пользовательские цвета или размеры шрифта (если цвет или размер шрифта не предусмотрены фреймворком, просто добавьте свои атомарные классы). Атомарные классы — это простые одноцелевые единицы стиля. Как и встроенные стили, атомарные стили применяют только одно объявление стиля.

Плохой код:

 <h1>Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 h1 { color: red; } section > h1 { color: blue; }

Хороший код:

 <h1 class="text-red">Without using atomic class</h1> <p>Paragraph without atomic class</p> <section> <h1 class="text-blue"> Another h1 text</h1> <p>Paragraph inside div without class</p> </section>

 .text-red { color: red; } .text-blue { color: blue; }

Старайтесь сохранять гранулярные и атомарные классы и использовать их при необходимости. В результате ваш интерфейс станет более основанным на разметке.

Используйте семантические элементы.

Использование семантики обеспечивает лучшую структуру и облегчает чтение кода и содержимого.

Плохой код:

 <span class="heading"><strong>Welcome</strong></span> <span>This is unnecessary br tag.</span>

Хороший код:

 <h1>Welcome</h1> <p>This is unnecessary br tag.</p>

Используйте теги HTML5.

Новые теги дают больше выразительной свободы и стандартизируют общие элементы, что улучшает автоматизированную обработку документов. Вот солидный список всех элементов. Я обнаружил, что многие разработчики всегда используют много тегов <div> и <span> , но сначала проверьте, какие теги логически подходят к вашему контексту:

Плохой код:

 <div class="article-blue"> <div class="article-title-red">HTML 4 title</div> <div class="content"> Semantics <span class="boldtext">are</span> important. </div> </div>

Хороший код:

 <article> <h1>HTML5 title</h1> <p> Semantics <strong>are</strong> important. </p> </article>

Итог: изучите и используйте новые элементы в HTML5. Это стоит усилий!

CSS: чистый код и препроцессоры

Когда дело доходит до CSS, трудно не начать с какого-нибудь неоригинального, но дерзкого совета:

Используйте препроцессор CSS.

Sass — самый зрелый, стабильный и мощный язык расширений CSS профессионального уровня в мире.

Для Sass доступны два синтаксиса. Первый, известный как SCSS (Sassy CSS) и используемый в этом справочнике, является расширением синтаксиса CSS. Второй и более старый синтаксис, известный как синтаксис с отступом (или иногда просто «Sass»), обеспечивает более лаконичный способ написания CSS.

Сгруппируйте свои селекторы: используйте @extend в SASS.

Группируя свои селекторы или используя @extend в SASS, вы должны помочь сохранить свой код СУХИМ (не повторяйтесь).

Плохой код:

 p { font-size: 22px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 41px; color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

Хороший код:

 .font-smoothing { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } p { font-size: 22px; @extend .font-smoothing; } h1 { font-size: 22px; @extend .font-smoothing; }

Используйте единицы rem вместо пикселей в CSS.

Используйте REM для размеров и интервалов, например, размеры шрифта, которые он создает на основе размера font-size корневого элемента <html> . Они также позволяют быстро масштабировать весь проект, изменяя размер корневого шрифта (например, при определенном медиазапросе/размере экрана).

Вы будете писать меньше кода для адаптивных представлений:

Плохой код:

 p { font-size: 22px; padding: 10px; } @media (max-width: 767px) { p { font-size: 16px; padding: 5px; } }

Хороший код:

 html { font-size: 14px; } @media (max-width: 767px) { html { font-size: 12px; } } p { font-size: 1.6rem; padding: 1rem; }

Старайтесь избегать фиксированной высоты или ширины в CSS.

Старайтесь избегать фиксированной высоты или ширины в CSS. Высота может быть сгенерирована за счет наличия внутреннего содержимого + отступов, а ширина может быть определена системой сетки (при необходимости используйте вложенную сетку).

Плохой код:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { height: 130px; }

Хороший код:

 <footer class="text-center"> <h2>Let's Get In Touch!</h2> <hr> <p>Ready to start your next project with us?</p> </footer>

 #footer { padding-top: 23px; padding-bottom: 47px; }

Обязательно используйте родительский элемент только один раз в SCSS.

Когда вы используете препроцессор CSS и планируете написать стиль для любого раздела, обязательно используйте родительский элемент в CSS только один раз и включите все дочерние элементы и медиа-запросы в его скобки. Это позволит вам легко найти и изменить основной родительский элемент в одном месте при внесении изменений в будущем.

Плохой код:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } } @media (max-width: 767px) { .section-parent-class { footer { padding: .5rem; } } }

Хороший код:

 .section-parent-class { position: relative; h2 { color: #ff0; } header { margin: 2rem 1rem; } footer { @media (max-width: 767px) { padding: .5rem; } } }

Прежде чем писать правило CSS, подумайте, какие элементы будут затронуты.

Всегда думайте о том, какие элементы будут затронуты, прежде чем писать какое-либо правило CSS. Если ваши изменения не будут общими, то напишите свои правила таким образом, чтобы они затрагивали только определенный элемент и ничего больше.

Плохой код:

 /* Commonly used class */ .title { color: #008000; }

Хороший код:

 /* Specify it not to affect other titles */ .section-blog .title { color: #008000; }

Попробуйте найти существующие правила и переменные CSS, прежде чем писать новые.

Всегда ищите существующие правила, соответствующие желаемому стилю, как в пользовательском CSS, так и во фреймворке. Только если ничего адекватного нет, приступайте к написанию нового.

Это особенно важно при работе с большими приложениями.

Плохой код:

 .jumbotron { margin-bottom: 20px; }

Хороший код:

 // change $jumbotron-padding from _variables.scss .jumbotron { margin-bottom: $jumbotron-padding; }

Используйте определенные правила.

Если у фона есть одно свойство, мы указываем это свойство, но если у него разные свойства фона, мы можем дать ему одно объявление.

Плохой код:

 .selector { background: #fff; }

Хороший код:

 .selector { /* This way background image will not be overwritten if there is any */ background-color: #fff; }

Используйте сокращенные свойства и значения.

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

Плохой код:

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

Хороший код:

 img { /* Shorthand style */ margin: 5px 10px 25px; } button { /* Don't play with shorthand too much */ padding-left: 20px; }

Используйте em вместо px для высоты строки.

Использование единиц em и px дает нам гибкость в наших проектах и ​​возможность масштабировать элементы вверх и вниз, вместо того, чтобы зацикливаться на фиксированных размерах. Мы можем использовать эту гибкость, чтобы упростить настройку нашего дизайна во время разработки и сделать его более отзывчивым, а также позволить пользователям браузера контролировать общий масштаб сайтов для максимальной читабельности.

Плохой код:

 p { font-size: 12px; line-height: 24px; }

Хороший код:

 p { font-size: 12px; line-height: 2em; /* or just line-height: 2; */ }

Используйте классы Bootstrap как можно больше.

Хотя это правило может применяться к фреймворкам пользовательского интерфейса в целом, я использую Bootstrap в качестве примера, потому что это самая популярная в мире библиотека интерфейсных компонентов.

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

Плохой код:

 <section class="without-bootstrap"> <div class="first-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="second-column">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

 .first-column, .second-column { width: 25%; float: left; padding-left: 15px; padding-right: 15px; } ...

Хороший код:

 <section class="row"> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> <div class="col-md-6">Lorem ipsum dolor sit amet, ut ius delenit facilisis</div> </section>

Настройте свой фреймворк правильно.

Bootstrap полагается на файл variable.scss, который позволяет легко настраивать интерфейс без написания единой строки кода. В противном случае, если вы собираетесь вручную писать все настройки самостоятельно, вам лучше вообще не использовать фреймворк.

Некоторые разработчики избегают изменения variable.scss, полагая, что они все равно смогут обновить Bootstrap до новой версии без особых хлопот, но это может быть утомительной задачей. Даже незначительные обновления требуют, чтобы разработчики прочитали список изменений, просмотрели всю разметку и CSS и вручную перешли на новую версию.

Плохой код:

 navbar { padding: 20px 10px; } .carousel-indicators { li { width: 6px; height: 6px; margin-right: 3px; margin-left: 3px; } }

Хороший код:

 $navbar-padding-y: ($spacer / 2) !default; $navbar-padding-x: $spacer !default; $carousel-indicator-width: 30px !default; $carousel-indicator-height: 3px !default; $carousel-indicator-spacer: 3px !default;

Не перезаписывайте ширину .container .

Старайтесь не перезаписывать ширину .container . Вместо этого попробуйте использовать сетку или просто измените ширину контейнера в _variables.scss . Если вам нужно уменьшить его ширину, просто используйте max-width вместо width. В этом случае .container из Bootstrap останется нетронутым в адаптивных представлениях.

Плохой код:

 .container { @media (min-width: $screen-lg-min) { width: 1300px; } }

Хороший код:

 // change $container-lg from _variables.scss .container { @media (min-width: $screen-lg-min) { width: $container-lg; } }

Используйте классы Bootstrap 4 и пишите меньше CSS.

Начните использовать Bootstrap 4, даже если он находится в стадии бета-тестирования. Он включает в себя множество новых классов, которые помогут вам быстрее создавать макеты, особенно Flexbox и разделители.

Плохой код:

 <div class="flex-ex"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div> <div class="flex-ex flex-reverse"> <div>Flex item 1</div> <div>Flex item 2</div> <div>Flex item 3</div> </div>

 .flex-ex { display: flex; > div { padding: 2px; } &.flex-reverse { flex-direction: row-reverse; } li { list-style: none; padding: .5rem; } }

Хороший код:

 <ul class="list-unstyled list-inline d-flex flex-row"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul> <ul class="list-unstyled list-inline d-flex flex-row-reverse"> <li class="p-2">Flex item 1</li> <li class="p-2">Flex item 2</li> <li class="p-2">Flex item 3</li> </ul>

Теперь мы можем назначить классы элементу, чтобы удалить все границы или некоторые границы.

Плохой код:

 <div class="border-example2 py-5"> <span class="border0"></span> <span class="border-top0"></span> <span class="border-right0"></span> <span class="border-bottom0"></span> <span class="border-left0"></span> </div>

 border-example2 { > span { width: 100px; height: 100px; display: inline-block; margin: .50rem; background-color: #e1e1e1; border: 1px solid; &.border0 { border: none; } &.border-top0 { border-top: none; } &.border-right0 { border-right: none; } &.border-bottom0 { border-bottom: none; } &.border-left0 { border-left: none; } } }

Хороший код:

 <div class="border-example py-5"> <span class="d-inline-block m-2 border-0"></span> <span class="d-inline-block m-2 border-top-0"></span> <span class="d-inline-block m-2 border-right-0"></span> <span class="d-inline-block m-2 border-bottom-0"></span> <span class="d-inline-block m-2 border-left-0"></span> </div>

 .border-example { > span { width: 100px; height: 100px; background-color: #e1e1e1; border: 1px solid; } }

Используйте .col-sm-X , если .col-md-X и .col-lg-X имеют одинаковое значение для X.

Не пишите .col-md-X и .col-lg-X , если .col-sm-X имеет одинаковое значение для X. Например, нет необходимости писать .col-lg-10 , потому что когда мы пишем .col-md-10 , мы автоматически включаем в .col-lg-10 .

Плохой код:

 <ul class="press-list list-inline row"> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-lg-4 col-md-4 col-sm-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Хороший код:

 <ul class="press-list list-inline row"> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-1.png" alt=""></a></li> <li class="col-md-4 col-xs-6"><a href="#"><img class="img-fluid" src="assets/images/press/press-2.png" alt=""></a></li> </ul>

Не используйте .col-xs-12 .

Не используйте .col-xs-12 , потому что если .col-xs-X не назначено, по умолчанию будет .col-xs-12 .

Плохой код:

 <section> <div class="container"> <div class="row"> <div class="col-lg-12 text-center"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> </div> </div> <div class="row text-center"> <div class="col-md-6 col-xs-12"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Хороший код:

 <section class="text-center"> <div class="container"> <h2>Services</h2> <h3 class="text-muted">Lorem ipsum dolor sit amet consectetur.</h3> <div class="row"> <div class="col-md-6"> <h4>E-Commerce</h4> <p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing.</p> </div> </div> </div> </section>

Не используйте reset.css ; вместо этого используйте normalize.css .

Если вы используете Bootstrap, то normalize.css уже включен туда, не нужно включать его дважды.

Следуйте рекомендациям, даже если они не являются лучшей практикой.

Ради согласованности лучше всегда следовать правилам и рекомендациям, с которых вы начали (касаются ли они именования, стиля кода или структуры файла).

Подведение итогов

Я надеюсь, что вы смогли почерпнуть что-то полезное, и что вы будете больше думать о написании минимального кода HTML и CSS с использованием лучших практик.

Для больших компаний довольно сложно поддерживать большие приложения, когда код запутан. И, конечно же, у крупных компаний есть деньги, чтобы платить за хорошее качество. Если вы будете следовать принципам чистого кодирования, вы повысите свои шансы найти хорошую работу. Также стоит упомянуть аспект фриланса: профессионалы, работающие над несколькими проектами, и клиенты должны предоставлять чистый код , который можно быстро передать другим разработчикам.

Я надеюсь перейти к более сложным темам в будущих постах, так как я намерен рассказать об автоматизации процесса кодирования, использовании задач Gulp/Grunt, линтерах, плагинах Editor, инструментах, которые генерируют код, инструментах AI, которые пишут код вместо вас, и других похожие темы.

Надеюсь, это было интересное и познавательное чтение. Удачи в ваших начинаниях по кодированию.

Дальнейшее чтение в блоге Toptal Engineering:

• Как использовать анимацию SVG в CSS