Найти тему

Как верстать сайты быстрее скорости света

Не буду лить воду, приступим

1. Проанализируйте макет сайта. Просмотрите все страницы. Найдите закономерности и запишите их в классы в свой style.css. Если вы нашли 3 вида заголовков, создайте подходящие классы для каждого. Стилизуйте все кнопки и формы. Это очень удобно, в будущем вы будите писать гораздо меньше кода. Например на вашем сайте существует 3 заголовка. Первый основной с font-size: 40px и font-weight: bold. А 2 остальных с font-size: 32px и 24px. Создайте класс .title и 2 модификации к нему изменяющие размер шрифта. Далее вы вместо написания дополнительных стилей просто будите писать примерно так class="title title-min".

1.2. Изучите методологию Блок-элемент--модификатор. БЭМ довольно спорное решение, но я не говорю вам следовать ему. Идеи заложенные в нем помогут вашему коду стать лаконичнее, понятнее и его станет заметно меньше. Данная методология позволила сократить количество строк в style.css примерно в 1.5 раза.

2. Используйте мета-языки. Что это ? Это языки созданные для описания других языков. Звучит не рационально, но какой код для вас выглядит приятнее ?

<div class="wrap">
<ul class="list-wrap">
<li class="item-list">item 1</li>
<li class="item-list">item 2</li>
<li class="item-list">item 3</li>
</ul>
</div>

.wrap
ul.list-wrap
li.item-list item 1
li.item-list item 2
li.item-list item 3

Используя мета-языки вы сможете выстроить четкую иерархию файлов. Вы сможете повторно использовать код гораздо чаще, а с помощью postcss вы и вовсе сможете использовать возможности css-4 до его выхода. Вы узнаете, что такое переменные в css. Поверьте мне, это сокращает процесс разработки в разы. Вот некоторые мета-языки: для html-pug/jade, для css-postcss, less, sass.

3. Не стойте на месте, изучайте новое.

Представьте свою жизни без bootstrap или сеток, flexbox. Без этого нам бы пришлось не сладко. Теперь представьте, что где-то на свете есть технологии настолько-же полезные, но вы о них не знаете. Я вас уверяю такие технологии есть, ИЩИТЕ их. Кто из нас изучил css-grid ? Думаю, мало. А ведь эта штука в разы круче flexbox. Начните двигаться вперед уже сегодня.

Надеюсь эта статья оказалась полезной для вас. Комментируйте, ставьте лайки или даже дизлайки, подписывайтесь.