Фронтенд-разбор
92 subscribers
1 photo
8 links
Принципы, наблюдения и советы по ХТМЛ-верстке и фронтенд-разработке
Download Telegram
to view and join the conversation
Запилил совет о том, как форматировать ХТМЛ и ЦСС.
Одна из самых частых ошибок верстки – ограничивать контейнер с текстом со всех сторон. Так делать нельзя. Ограничивать можно либо ширину, либо высоту, но не все сразу. Текст как вода – несжимаем, но текуч. Если текста вдруг окажется больше, чем рассчитывалось, он не вместится в отведенное ему место – произойдет взрыв с непредсказуемыми результатами.

Ситуации, когда текста больше, чем думал дизайнер, нужно предвидеть на этапе проектирования макета. Хороший дизайнер подумает об этом, а хороший разработчик спросит.
Еще один параметр текста, о котором всегда нужно помнить – максимальная ширина полосы набора. Ширина полосы набора - функция от кегля и шрифта. Чем меньше кегль, тем больше символов вмещается в строку, тем меньше должна быть ширина текста, чтобы строка не была слишком длинной и неудобной для чтения.

Отсюда вытекает правило – всегда ограничивать максимальную ширину текста у элементов, которые содержат в себе больше одной строки текста. Обычно, большие блоки текста верстаются элементами общего назначения, вроде h1, p, blockquote и других. Поэтому, это первые кандидаты для добавления max-width:

p {
font-size: 18px;
line-height: 24px;
max-width: 420px;
}


Если задан кегль, нужно задать и ограничение ширины
Что почитать о ЦСС-гриде
Можно начать с основной статьи на моем любимом МДН. Слева есть целый список статей для углубления в тему. Если прочитать их все, можно стать джедаем грида.

А на css-tricks.com есть две самые полные шпаргалки по смежным технологиям: флексбоксу и гриду.

#почитать
А в чем разница между флексбоксом и гридом?
Флексбоксом можно разложить элементы только по одной оси координат, а гридом — по двум.
Во что обернуть текст
В зависимости от контекста, блоки текста нужно оборачивать в разные элементы. Например, тело статьи на странице состоит из абзацев, их нужно оборачивать в элементы p.

Если текст представляет собой подпись к картинке, использовать p тоже допустимо. А во что оборачивать число и подпись к числу в фактоиде, например? Число — не абзац, подпись к ней тоже не очень тянет на абзац. Во что оборачивать какую-нибудь отдельностоящую надпись на банере?

Чтобы каждый раз не отвечать на подобные вопросы, я придумал правило: если текст предполагает определенное значение, форматирование или переносы, то нужно обернуть в div или span. Если блок текста имеет произвольное содержимое, не форматируется переносами и текуч, то это абзац, нужно оборачивать в p.

Примеры фиксированного текста
- Значение в таблице
- Имя загруженной картинки под плашкой с изображением
- Код ошибки в модальном окне
- Дата публикации статьи

Примеры текучего текста
- Текст статьи
- Описание промо-акции на банере
- Сноска с пояснением сбоку от основного текста статьи
- Краткое описание товара в интернет-магазине

P.S. Элементы списка уже обернуты в li, им не нужна дополнительная обертка, если только у вас не список в списке, но это отдельная история.
В ХТМЛ все пробелы, символы переноса строки и символ табуляции схлопываются в один пробел. Если вы напишете <p>текст текст текст</p>, то на выходе получите «текст текст текст». Побочный эффект этой особенности — если у вас в коде идет несколько строчных элементов подряд, то все переносы строки превратятся в пробелы:

<div>
<span>Какой-то</span>
<span>текст</span>
</div>


Какой-то текст

Не очень интуитивное поведение. Например, если у вас стоит картинка img, а после нее идет подпись, завернутая в div, то между ними появится пробел, потому что img — строчный элемент. Отсюда принцип:

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

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

Допустим, у вас есть класс .wrapper, задающий все нужные отступы этажу. Это первая функция элемента:

.wrapper {
max-width: 1400px;
min-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}


Чтобы растянуть этаж на всю ширину, нужен модификатор к существующему классу .wrapper. Это вторая функция элемента, связанная с первой (сама по себе она не имеет смысла), их можно объединить в одном элементе:

.wide {
max-width: none;
padding-left: 0;
padding-right: 0;
}


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

.banner {
...
padding: 20px 40px;
...
}


Итоговая разметка:

<div class="wrapper wide">
<div class="banner">Мегаскидки!</div>
</div>


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

Пример с банером не универсальный, в каждом случае нужно смотреть по ситуации, но принцип стоит всегда держать в голове.
display: inline-block устарел для раскладки элементов
Раньше элементы на странице раскладывали флоатами или таблицами. А еще существует display: inline-block (d:ib). Им очень удобно верстать однородные элементы, ссылки в ряд, списки и прочие мелкие форматы. Если вкратце, то d:ib делает так, чтобы блочный элемент вел себя с соседями как строчный.

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

Выравнивание легко сделать флексом, с помощью align-items: center. Оба текста отцентруются, при этом базовые линии не будут совпадать. Чтобы выравнять подпись и значение по базовой линии, есть align-items: baseline, но это сдвинет весь блок с текстом к верху плашки.

Чтобы выравнять оба текста по базовой линии, но при этом визуально поставить весь блок по центру плашки, нужно добавить еще одну обертку и дать ей align-items: center, а внутренней обертке align-items: baseline.
Кстати, у канала есть чат, но почему-то он не подключается к сообщениям автоматически ¯\_(ツ)_/¯

https://t.me/f_r_chat
Как называть классы в ЦСС

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

Непонятные и непоследновательные названия классов - одна из самых частых ошибок студентов Школ бюро.

Между тем, системное именование классов – фактически обязательное условие, чтобы ваш сайт можно было масштабировать. Это фундамент.
Devroad
На днях я запустил образовательный проект-эксперимент Devroad - это каталог ссылок на различные статьи и материалы для разработчиков, и тех кто хочет ими стать. Сами ссылки на материалы лежат в открытом репозитории, чтобы кто угодно мог добавлять новые материалы.

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

Репозиторий материалов с описанием, как и что контрибьютить:
https://github.com/colomolo/devroad-data

Есть что добавить в копилку? Буду рад! А вы появитесь на главной, как почетный контрибьютор проекта.
Почему не стоит использовать атрибут id для стилизации элементов
Максимализм
Чем надежнее вы хотите сделать верстку, тем более максималистично нужно относиться к ее ограничениям и требованиям.

Несколько примеров:
1. В макете есть абзац текста. Что будет, если он будет в пять раз длиннее? А что, если будет не один абзац, а пятнадцать?

2. У страницы задана фиксированная ширина 1100 пикселей. А что будет с содержимым, если взять и изменить ширину до любой другой?

3. В макете есть три одинаковые колонки с изображениями одинаковых размеров. Что будет, если туда попадут изображения любых произвольных размеров? Что, если некоторые изображения будут с прозрачным фоном, а некоторые с непрозрачным?

И так далее. Так можно докапываться до любого элемента страницы. Если на вопрос «А что будет, если?» следует ответ «Ничего страшного», то вы двигаетесь в правильном направлении.
Типовые решения в вёрстке. Как сверстать плашку с текстом и фоном

Совет Мазурского:
https://bureau.ru/soviet/210311
position: absolute — всегда частный случай
Студенты Школ бюро часто делают ошибку и задают position: absolute (p:a) элементам общего назначения, например p.

Это ошибка. position: absolute (fixed, sticky) могут быть только у специфичных элементов с классами. Потому что абсолютное позиционирование — всегда частный случай, кроме некоторых очень редких ситуаций.