-
-
Save nikolai-shabalin/ffc8cc6caefe1bfde199104167632f63 to your computer and use it in GitHub Desktop.
Вопросы по организации стилей
- можно ли использовать глобальные стили для всех списков: ul { list-style: none; margin: 0; padding: 0; } чтобы не прописывать их каждому списку?
В критерии Д25 есть чёткое определение, какие теги могут иметь глобальные стили и для каких целей:
*, *::before, *::after { box-sizing: border-box; } /* Смена блочной модели */
body { margin: 0 } /* Сброс полей у единственного элемента */
img { max-width: 100% } /* Улучшение встроенного элемента */
a { text-decoration: none } /* Базовые стили для ссылок на всём проекте */
Эти примеры, в отличие от списков, точечно назначают умолчания. Если вы глобально сбросите стили для списокв, то вам придётся их возвращать в контентной области. Это неудобно и противоречит лучшим профессиональным практикам.
Последовательность работы
Существует ли специальная последовательность, в которой лучше работать (особенно новичкам), чтобы не запутаться и в дальнейшем не пришлось переопределять стили?
Выделяйте в дизайне отдельные блоки и пишите стили для них. Не сверху вниз по дизайну, а сквозь все страницы. Потом можно будет собирать получившееся как конструктор. И чтобы не было лишних стилей и конфликтов — не пишите глобальные стили, см. Д25.
Сброс стилей
Насколько хорошей практикой считается использование css reset-ов, которые сбрасывают все стили? Стоит ли к такому прибегать? Если да, то в каких случаях?
Сброс стилей (reset) не считается хорошей практикой, это усложняет разработку. А вот нормализация (normalize) сейчас достаточно распространена, это способ сглаживания различий браузеров и улучшения кроссбраузерности.
Форматы шрифтов
Здравствуйте! В директиве @font-face всегда нужно писать форматы woff2 и woff ?Или бывают случаи, что нужны другие форматы? Как определить в каком формате скачивать шрифт?
Сегодня форматов WOFF и WOFF2 более чем достаточно для самой широкой кроссбраузерности. Если вам придётся разрабатывать для старых браузеров, то вам могут пригодиться шрифты в EOT (для Internet Explorer) или TTF и OTF для других. Но чаще всего для старых браузеров выбирают не подключать шрифты вовсе, а использовать системные.
Иконки в псевдоэлементах
Когда мы будем оформлять декоративные иконки с помощью псевдоэлементов, нужно будет задать CSS свойство "content". Вы говорите, что свойство должно быть пустым и, при этом, упоминаете, что если его не задать, то элемент не отрисуется. Правильно ли я понимаю, что в этом случае нужно указать: tag::after { content: ""; } Или же значение свойства "content" должно содержать в себе обязательное строковое значение, которое мы потом скроем? Например: tag::after { content: "Какой-нибудь текст"; }
Для появления псевдоэлемента достаточно пустой строки в значении, добавлять туда контент не нужно. Если только он вам не нужен там.
Расположение visually-hidden
class="visually-hidden" используется очень часто, где в стилях его лучше расположить? сразу после глобальных стилей?
Рассматривайте visually-hidden как спец-блок, точно такой же, как header или news. Положите его сверху, рядом с общими стилями.
Разделение стилей по блокам
можно ли в css "положить" все стили интерактивных элементов (кнопок и ссылок) в отдельный блок, а потом уже писать стили уже под конкретный блок (шапка, мэйн, футер и т.д.)? Например, 1)глобальные стили 2)интерактивные элементы (кнопки и стили) 3) шапка (Позиционирование Блочная модель Типографика Оформление Анимация Разное) 4) мэйн (с разбивкой по блоком) (Позиционирование Блочная модель Типографика Оформление Анимация Разное) 5) подвал (Позиционирование Блочная модель Типографика Оформление Анимация Разное) и т.д. ?
Такой подход будет сильно связывать вам руки. Как во время создания, так и во время поддержки сайта, вы чаще всего работаете над отдельными его блоками. Поэтому бегать по разным частям файла или отдельным файлам, занимаясь одним делом, будет крайне неудобно и неэффективно. Не размазывайте стили блока, держите их вместе.
Мне понятно, почему селектор p.title специфичнее селектора .title, ведь параграфов с классом title меньше или равно, чем всех элементов с классом title. Но мне не понятно, почему селектор .title специфичнее селектора p? Ведь как раз наоборот, класс title может быть указан не только у всех параграфов, но и у всех остальных элементов.
@Stanislav-Kazankov
"Чем меньше тегов может найти селектор, тем он более специфичен" - это достаточно абстрактная подсказка, которая помогает на простых примерах.
В целом, специфичность работает по строгим правилам - селектор по классу всегда специфичнее селектора по тегу, а чтобы понять почему, нужно понять как CSS рассчитывает "вес" селектора.
Для этого можно пройти курс или в блоге Yoksel
Зачем задавать правило html { box-sizing: border-box; } (из критерия Д25)? Ведь значение "content-box"
"Основывается на стандартах CSS" (http://htmlbook.ru/css/box-sizing)! Да и это привычнее, считать, что width и height - это ширина и высота контентной области элемента. Получается, мы отступаем от стандартов?
Как устанавливать шрифты в формате woff, куда именно они устанавливаются - в ОС или в браузер?
@Stanislav-Kazankov
Зачем задавать правило html { box-sizing: border-box; } (из критерия Д25)? Ведь значение "content-box"
"Основывается на стандартах CSS" (http://htmlbook.ru/css/box-sizing
)! Да и это привычнее, считать, что width и height - это ширина и высота контентной области элемента. Получается, мы отступаем от стандартов?
Стандарты развиваются, но значение по умолчанию нужно оставить для обратной совместимости со "старыми" браузерами.
content-box
подразумевает, что если вы хотите блок с полями по 25px и шириной 100px, то из 100 нужно вычесть 75, чтобы размер действительно был 100px. Сам механизм content-box
подразумевает постоянный ручной подсчёт размеров блоков.
border-box
- уменьшает количество таких подсчётов, то есть блок шириной 100px и полями по 25px не нуждается в ручном пересчёте, ведь он сразу будет 100px.
Как устанавливать шрифты в формате woff, куда именно они устанавливаются - в ОС или в браузер?
Шрифты с форматом woff и woff2 не установить в ОС. Для этого вам нужно установить шрифт в формате ttf. Есть в каждом проекте Академии. Они все расположены в архиве (.zip) в папке fonts/
.
Установка .ttf происходит в ОС. В windows C:\Windows\Fonts
, но можно найти в поиске fonts settings
.
В MacOS в программе "Шрифты". Finder -> Установить шрифты
- Подскажите, как правильнее задать имя, например, для класса, именующего input range для задания цены в каталоге "Техномарта"? "price-range" или просто "price" или просто "range"?
- Как правильнее задать значение атрибута name этого input range'a? Есть мнение, что лучше задать значение атрибута name= просто "range" для того, чтобы не пришлось исправлять имя при использовании этого же input range'а в других проектах, где он будет указывать уже не цену, а какую-нибудь другую характеристику. Насколько такой подход верен?
- Если значение атрибута name для input range будет совпадать с именем класса, именующего этот range это хорошо?
Если селекторы по тегу запрещены, то разрешены ли такие селекторы: .some-class p, .some-class img, .some-class li? Или же параграфу и изображению и элементу списка сначала нужно задать классы, а потом уже обращаться к ним через селекторы типа: .some-class .class4p, .some-class .class4img, .some-class .class4li?
Как бы Вы порекомендовали уменьшить вложенность в следующем случае: на главной "Техномарта" есть section с заголовком "ПОПУЛЯРНЫЕ ТОВАРЫ:", внутри этого section есть список товаров ul, внутри ul, естественно - li, а внутри каждого элемента списка есть ссылка "Купить", обернутая в div вместе со ссылкой "В корзину" для упрощения совместной стилизации? Это при всем при том, что по идее, карточку товара хорошо бы завернуть в section, так как это отдельный смысловой блок? Итого: вложенность минимум 5, максимум 6. Как уменьшить ее до 2?
@Stanislav-Kazankov, вам не нужно уменьшать вложенность HTML до 2, только вложенность CSS-селекторов. А карточка товара — это самостоятельная единица контента, поэтому это <article>
.
@Stanislav-Kazankov, вам не нужно уменьшать вложенность HTML до 2, только вложенность CSS-селекторов. А карточка товара — это самостоятельная единица контента, поэтому это
<article>
.
Но ведь на карточке товара (в случае "Техномарта") указана цена, которая может не быть такой же в других интернет-магазинах. То есть, мне кажется, карточка товара логически привязана ценой именно к Техномарту, и является немножко зависимым блоком, и если просто взять и перенести ее на аналогичный интернет магазин - то информация о цене уже не будет соответствовать действительности.
@Stanislav-Kazankov, это не логическая секция (часть) чего-то, это самостоятельная единица контента, то есть <article>
.
Как будет вычисляться максимальная ширина изображения в img { maxwidth: 100%} при html { box-sizing: border-box; } - будет браться 100% от ширины контентной области родителя или от ширины контентной области родителя вместе с паддингами и границей?
А можно дописывать стили для нормализации не в свой html-файл, а прямо в Normalize.css? Или это нарушает авторские права автора этого Normalize.css?
@Stanislav-Kazankov
А можно дописывать стили для нормализации не в свой html-файл, а прямо в Normalize.css? Или это нарушает авторские права автора этого Normalize.css?
Можно, но не нужно. Если появится новая версия этой библиотеки, то захочется просто изменить файл normalize.css на новый и всё. В вашем случае может, что-то сломаться. Поэтому есть строгое правило не изменять исходный код внешних библиотек.
Мне не совсем понятно, если я подключил WOFF-шрифт в проекте, нужно ли, чтобы на стороне пользователя он тоже был установлен? Или файлы шрифтов передаются по http вместе с разметкой? Да, и кстати, css тоже передается по http? И что означает статистика использования шрифтов на Dan's tools? Она показывает у скольки процентов пользователей установлен конкретный шрифт? Какая статистика имеется в виду в лекции, когда лектор говорит, что нужно открыть статистику нашего пользователя и посмотреть, если 100% использует Виндоус, то... - имеется в виду статистика, которую мы узнаем из посещений нашего сайта или все та же статистика на Dan's tools? Что значит фраза "... бывают такие продукты, которые написаны исключительно для Виндоуса..." - имеются в виду сайты разработчиков программных продуктов, например microsoft.com?
@Stanislav-Kazankov
Мне не совсем понятно, если я подключил WOFF-шрифт в проекте, нужно ли, чтобы на стороне пользователя он тоже был установлен? Или файлы шрифтов передаются по http вместе с разметкой? Да, и кстати, css тоже передается по http?
Как и в случае с картинками, а точнее тегом <img>
, атрибут src
указывает путь до ресурса. В случае с шрифтом, мы в директиве @font-face
тоже указываем src
с путями до шрифтовых файлов.
Веб-шрифты никуда устанавливать не нужно. Они просто закачиваются на машину вашего пользователя и всё. И уже браузер начинает отрисовку шрифта.
Если описать простую схему, то
- Браузер видит
src
в@font-face
- Принимает решение скачивать шрифт или нет
- Скачивает шрифт на pc пользователя
- Отрисовывает шрифт
И что означает статистика использования шрифтов на Dan's tools? Она показывает у скольки процентов пользователей установлен конкретный шрифт?
На первом этапе мы должны понять, а стандартный ли шрифт мы хотим подключить. Что значит стандартный? По умолчанию в каждой операционной системе установлены шрифты, иначе мы бы вообще текст не видели. Поэтому для шрифта "Dan's tools" мы узнаем на каких операционных системах он установлен по умолчанию.
Какая статистика имеется в виду в лекции, когда лектор говорит, что нужно открыть статистику нашего пользователя и посмотреть, если 100% использует Виндоус, то... - имеется в виду статистика, которую мы узнаем из посещений нашего сайта или все та же статистика на Dan's tools?
Имеется ввиду статистика посещения вашего сайта.
Что значит фраза "... бывают такие продукты, которые написаны исключительно для Виндоуса..." - имеются в виду сайты разработчиков программных продуктов, например microsoft.com?
Например, корпоративный заказчик (банк, завод, внутренний продукт кофешопов), которые сами регламентируют с каких браузеров будут заходить их пользователи. Они устанавливают своим работникам компьютеры и говорят, что можно пользоваться только Internet Explorer. В этом случае разработчик в праве не учитывать наличие стандартного шрифта в MacOS, так как 100% все будут в Windows.
-
Почему в лекции удалось изменить ссылок меню навигации только с третьего раза? Ведь Вы задали color: #ffffff; в:
1)
body (цвет оставался синим);
2)
main-navigation (цвет оставался синим);
3)
site-navigation, user-navigation (только здесь цвет изменился на белый).
Досмотрел и понял почему с первых 2 раз не удалось изменить. Но теперь не понятно, зачем Вы для main-navigation color указывали, ведь непосредственно в main-navigation нет никакого текста? -
Почему в лекции Вы задали правила, используя вложенные селекторы по тегу, которых нет в разделе "Верно" критерия Д25:
.feature-item h3, .index-columns-h2, .news-item time? Последний селектор еще понятно, т. к., возможно, контент-менеджер будет редактировать дату новости, но вот первые два - непонятно. -
Почему в Лекции Вы использовали для стилизации button сокращенное наименование свойства: font: inherit;?
-
Зачем Вы задали для
<body>
margin: 0;
, если это правило уже есть в normalize.css?
Здравствуйте! Как понять в каждом случае активный пункт в меню, в сортировке, в хлебных крошках должен меняться при hover и focus, cursor pointer. Нужно ли активному пункту в сортировке href="#" ? Спасибо!
Именование классов
Называйте классы простыми английскими словами, пишите строчными, сочетайте слова через дефисы:
Это самый распространённый формат записи, ставший стандартом де-факто.