Поясните пожалуйста критерий "Д13. Файл стилей представлен в двух вариантах: с форматированием и минимизированный, к странице подключён минимизированный"
CSS-правила пишутся достаточно размашисто
.title {
font-size: 14px;
line-height: 21px;
}
Человеку с таким кодом работать удобно, а вот браузеру стилистика ни к чему. И стилистикой можно пожертвовать в угоду минификации. Минификация - это процесс удаления всего лишнего кода - пробелов и других символов. После минификации наш пример превращается в
.title{font-size:14px;line-height:21px}
Нам с таким кодом взаимодействовать сложно, но он и не для нас сделан, а для браузера. Также такой код весит гораздо меньше. Поэтому мы работаем форматированной версией, а браузеру отдаём минимизированную.
Для минификации можно использовать онлайн-минификатор, например
Нормалайз - это сборник рецептов для улучшения кроссбраузерности стилей по умолчанию. Призван привести, визуально, разметку к одному виду во всех браузерах. Он это делает хорошо, но всегда нужно дорабатывать и полностью полагаться на normalize.css нельзя. Обязательно зайдите внутрь файла и попробуйте прочитать всё, что в нём написано. Также помните, что нормалайз нужно подключать правильно, до ваших стилей.
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
Многим, но вы скорее всего имели ввиду псевдоэлементы.
Различий на самом деле не много. В span
вы можете положить много текстового контента, а в псевдоэлементы не получится сделать какую структуру, кроме как один span
К макетам на самом деле ни один из этих терминов не подходит, а вот к вёрстке да.
Адаптивный - это значит, что ваша разметка и стили буду подстраиваться под устройство - смартфон, планшет, ноутбук, и т.д.
Кроссбраузерный - сайт выглядит идентивно во различных браузерах - Firefox, Safari, Chrome, и т.д.
Да, можно, но так редко кто делает. Для этого используют относительные единицы измерения vw
.
vw
- vieport width, те самые единицы, которые работают относительно отображаемой области экрана.
.title {
font-size: 1vw;
}
Повторюсь, так редко кто делает, так как шрифт увеличивается в зависимости от ширины экрана и может так получится, что он станет очень большой и регулировать его гораздо сложнее.
Нет.
В целом вы можете приставить себе этакий бинарный класс. Например, .active
если он есть на элементе, то сделать что-то дополнительное.
.title {
font-size: 14px;
}
.title.active {
font-size: 48px;
}
Плохим считается разнородный CSS. Обычно таким CSS-код становится, когда в команде не договорились о стандартах кодирования и все пишут как угодно.
.title {
font-size: 14px;
line-height: 24px
}
.b-title {
line-height: 24px;
font-size: 14px;
}
Именование разное. Сортировка свойств разная. В целом, как только один кусок css-кода стилистически становится не похож на кусок сss-кода рядом, то этот код становится плохим.
Обычно в командах уже есть правила форматирования кода. Также есть много инструментов автоматизации, чтобы приводить код в единообразный вид с остальной командой. И поэтому таких проблем в современной вёрстке практически нет.
Строчные.
От такой записи проблем куда больше, чем полезности. Ведь такой свойство с !important
куда сложнее переопределить.
!important
- стараются избегать, а если без него никак, то ещё несколько раз думают как сделать без него.
Что делать, если normalize.css конфликтует с моими стилями сайта? Столкнулась с тем, что задаю размер шрифта для h1 21 px, но применяется значение 2em из normalize. Не нашла другого выхода, как закомментировать это правило в нормалайзе. Правильно ли так делать?
Обычно селеторы нормалайза достаточно просто переопределить. Ведь у нормалайза они со слабой специфичность. В вашей примере нужно было указать новое правило
h1 {
font-size: 21px;
}
Если у вас не получилось, значит вы не правильно подключили нормалайз. Его нужно подключить до вашего стилевого файла
<link rel="stylesheets" src="nomalize.css">
<link rel="stylesheets" src="style"> /*ваши стили*/
Как сохранить непрозрачность outline при фокусировке на элемент, которому задано свойство opacity меньше 1?