Приемы верстки для улучшения качества проектов

Многие frontend и fullstack разработчики не находят удовольствие в написании CSS-кода, и на это есть несколько причин:

1. Непредсказуемость результата: Часто разработчики не могут добиться нужного визуального эффекта с помощью CSS.
2. Сложность кода: Простые визуальные изменения могут требовать правок в большом количестве CSS-свойств.
3. Неочевидность правил: Некоторые CSS-правила сложны для понимания. Например, чтобы увидеть изменения, внесенные в псевдоэлемент, необходимо задать свойство content.
4. Отсутствие стандартов: Нет единого стандарта для именования классов, использования ID, уровней вложенности и применения методологий, таких как BEM или SMACSS.
5. Постоянное развитие: CSS постоянно развивается, и некоторые свойства становятся популярными, в то время как другие выходят из употребления.
6. Кроссбраузерная совместимость: Один и тот же код может отображаться по-разному в разных браузерах, что требует дополнительного тестирования.

Несмотря на эти сложности, мне нравится работать с CSS. Когда я контролирую CSS-код, он не может контролировать меня.

Опыт использования Bootstrap 4

Недавно я создавал сайт с использованием Bootstrap 4 и начал применять рекомендуемые разработчиками этого фреймворка подходы к управлению отступами. Вот почему это оказалось полезным:

• Удобство: Для работы нужно знать всего несколько классов.
• Адаптивность: Выравнивание элементов происходит в соответствии с адаптивной сеткой.
• Гибкость: Отступы учитывают наличие брейкпойнтов и не нарушают верстку.
• Читаемость кода: Код остается чистым и легко читаемым.
• Целостность UI: Общая концепция пользовательского интерфейса не нарушается.
• Удобство управления: Отступами можно управлять, изменяя всего один файл.

Именование классов в Bootstrap 4

Bootstrap 4 предоставляет удобную систему классов для управления отступами. Вот основные правила именования:

• Свойство (property): m — margin, p — padding.
• Стороны (sides): t — top, b — bottom, l — left, r — right, x — горизонтальные отступы, y — вертикальные отступы. Параметр можно оставить пустым, если отступ одинаков для всех сторон.
• Размер (size): 0 — удаляет отступ, 1 — 0.25 единицы измерения, 2 — 0.5, 3 — 1, 4 — 1.5, 5 — 3. Можно задать отрицательные отступы, добавив префикс n.

Пример использования классов:

<div class="container">
<h2 class="mb-3">Bootstrap 4: Responsive Utility Classes</h2>
<h4 class="mt-5">Mark up Elements</h4>
<div class="row">
<div class="col-sm-4">
<b>Initial</b>
<h2>Title</h2>
<p>Paragraph text</p>
</div>
<div class="col-sm-4">
<b>Expand bottom</b>
<h2 class="mb-4">Title</h2>
<p>Paragraph text</p>
</div>
<div class="col-sm-4">
<b>Shrink bottom</b>
<h2 class="mb-0">Title</h2>
<p>Paragraph text</p>
</div>
</div>
</div>