- Каждый браузер устанавливает свои значения стилей по умолчанию для различных HTML-элементов. С помощью CSS Reset или Normalize мы можем организовать общие стили для обеспечения кроссбраузерности. Поэтому хорошей практикой будет использование CSS Reset или Normalize.
- Семантические элементы HTML5 четко описываютсвой смысл или назначение как для браузеров,
так и для веб-разработчиков.
Примеры семантических элементов:
<header><nav><article><section><footer>и др. В качестве примера не семантических элементов можно привести теги<div>и<span>. Они ничего не говорят о характере их контента.
- CSS flexbox (Flexible Box Layout Module) — модуль макета гибкого контейнера, представляет собой способ компоновки элементов. С помощью Flexbox можно легко выравнивать элементы по горизонтали и по вертикали, менять направление и порядок отображение элементов, растягивать блоки на всю высоту родителя или прибивать их к нижнему краю.
Посматривайте на Caniuse
- В разных браузерах по-прежнему наблюдается много несоответствий в совместимости. Используйте caniuse или подобный сервис, чтобы проверить, поддержку используемых Вами свойств и атрибутов в разных бразуерах.
- Валидация CSS-кода может быть не так важна, как валидация HTML-кода. Используйте валидатор для проверки, он скажет Вам, совершили ли Вы какие-либо ошибки, предупредит Вас о Ваших промахах и даст общие рекомендации по улучшению кода.
- Корпорация Microsoft заявила о прекращении поддержки старых версий браузера Internet Explorer с 12 января 2016 года. В дальнейшем поддержка будет предлагаться лишь для Internet Explorer 11. Вероятно скоро Microsoft и вовсе перестанет поддерживать Internet Explorer в пользу Microsoft Edge. Не стоит тратить время и идти на жертвы ради поддержки Internet Explorer менее 11 версии.
- Существует много споров о том, какие значения для установки размера элементов и текста использовать, например
em, rem или px. Как обычно, все три варианта имеют право на жизнь и обладают своими плюсами и минусами.
Вероятно нет однозначного ответа, какую из этих единиц использовать, поэтому комбинируйте и эксперементируйте.
Правила хорошего тона и советы для использования каждой из единиц:
- em — значение 1 em относится к font-size родительского элемента. Часто используемый в медиа-запросах, em отлично подходит для адаптивности, но может вызвать путаницу, при конвертации ems в px для каждого элемента (1.25em из 1.4em из 16px =?)
- rem — относительно font-size элемента , rem позволяет легко масштабировать все заголовки и абзацы на странице. Если оставить с его шрифтом по умолчанию и установить все остальное с rem, это отличный подход к управлению доступом
- px — пиксели дают максимальную точность, но не дают масштабирования при использовании в адаптивных проектах. Они надежны, понятны и представляют собой хорошую визуальную связь между значением и фактическим результатом (15 пикселей близко, может быть, всего один пиксель или еще два)
Вернуться назад к структуре классов и именованию