Лучше всего сгруппировать похожие медиа-запросы в конце CSS или просто разделить их внутри CSS? - PullRequest
Новая
       3

Лучше всего сгруппировать похожие медиа-запросы в конце CSS или просто разделить их внутри CSS?

1 голос
/ 27 мая 2020

Я только изучаю html и css и только что завершил проект целевой страницы. Когда я просмотрел свой css в конце, я понял, что у меня было несколько медиа-запросов, все для одних и тех же условий (максимальная ширина), но примененных к разным элементам.

Я знаю, что вы можете поместить несколько элементов в медиа-запрос, но что лучше?

В настоящее время у меня есть каждый отдельный медиа-запрос, расположенный сразу после установки css для этого элемента

т.е. за #header следует @media (max-width: 640px) #header {stuff;}}

1 Ответ

0 голосов
/ 27 мая 2020

Медиа-запросы были введены в CSS3 и используются для CSS реагирования на разные типы мультимедиа. Поскольку обычно сам код CSS применяется для описания представления документа или страницы, отзывчивость - это отдельная функция, поэтому обычно они хранятся отдельно в конце кодов форматирования CSS. Однако позвольте мне ответить на этот вопрос, указав на использование обоих форматов, упомянутых в вопросе.

В конце кода

Большинство шаблонов CSS, доступных в Интернете, обычно сохраняют свои носители. запросы в нижней части всего кода, упрощающие доступ и работу с функцией отзывчивости. Всякий раз, когда основное внимание уделяется «погоне за шириной устройства» , этот тип кодирования помогает.

Как уже отмечалось, это позволяет сгруппировать вместе множество базовых c CSS атрибутов, которые применяются ко многим элементам.

Также, учитывая каскадный характер CSS, стили ниже обычно (не всегда, обратитесь к this , чтобы узнать больше) заменяет стиль, представленный выше. С @media запросами, присутствующими в нижней части таблицы стилей, это позволяет легко перезаписывать соответствующие стили, представленные выше.

Наконец, как упомянуто @rguttersohn, медиа-запросы вместе с @keyframes сохраняются в конце с @keyframes обычно выше @media. Это делает кодирование более чистым и более понятным для других.

Под соответствующими аналогами стиля

Если стиль больше layout-centri c, это очень полезно для поместите @media запросов рядом с их аналогами по стилю. Это позволяет легко редактировать стиль и соответствующий ему запрос @media как в одном go.

Это означает, что кода немного больше, но их тоже можно сократить, сгруппировав по точкам останова и раздел заканчивается.

Этот тип стиля редко встречается в шаблонах, доступных в Интернете, однако это постоянная тенденция.

Подводя итог: Я лично придерживаюсь мнения, что все запросы @media должны быть вместе внизу, но если бы мне пришлось разделить труд по стилизации, я бы выбрал сохранение стилей и @media запросов вместе.

Кроме того, учитывая широкий и самоуверенный объем этого вопроса, я думаю, что ни один ответ не может быть определен как правильный или неправильный. Я надеюсь, что этот ответ проливает достаточно света и информации на вопрос.

...