Привет, друзья.
Давно перешел к компонентному подходу, когда каждый блок находится в своей папке (pug, scss, js, json).
Страшно даже представить, когда писал весь код в одном файле (ну ладно, почти в одном, за исключением миксинов, файла с медиа и еще парочку, но всё равно была жесть), сейчас, когда проекты большие и css превращается огромные файлы, это было бы просто нереально.
Но всё же, когда блок большой, даже с помощью препроцессора он может с легкостью разрастись на более 150 - 200 строк, что тоже начинает немного раздражать, т.к. когда хочешь посмотреть, что там написал для экрана < 768px, то приходится скролить вниз, потом опять наверх, потом опять вниз. Да, файлы конечно не настолько большие, но все же хочется и это свести к минимуму.
Т.е. раньше был такой подход:
.container {
background: aqua;
&__item {
display: block;
&_active {
color: #000;
}
}
}
@media (max-width: 767px) {
.container {
background: chocolate;
&__item {
display: inline-block;
&_active {
color: #fff;
}
}
}
}
Сегодня же пришел на ум другой способ, как мне показалось, более удобный: медиа выражение стоит прям в исходном блоке, что позволяет сразу увидеть, что и где с данным блоком происходит, а не искать где-то ниже/выше.
Сборщик все делает как надо: медиа выражения группирует и помещает в конец - в общем, ни ничем не отличается от обычного (или популярного) написания.
Редактор при выделении нужно медиа подсвечивает везде, где оно встречается, что не напрягает в выискивании нужного разрешения.
Т.к. разработка компонентная, то позволяет использовать какие-то блоки в других проектах, и такое написание очень удобно тем, что если нужно взять только часть, то не нужно бегать по файлу и искать все, что относится к определенному блоку, элементу, модификатору.
Поход вот такой:
.container {
background: aqua;
@media (max-width: 767px) {
background: chocolate;
}
&__item {
display: block;
@media (max-width: 767px) {
display: inline-block;
}
&_active {
color: #000;
@media (max-width: 767px) {
color: #fff;
}
}
}
}
Да, при такой подсветке синтаксиса как тут, может смотрится не совсем читабельно, но в коде это выглядит более красиво и удобно.
Как Вам такой подход, имеет право на существование?
Более чем уверен, что не открыл ничего нового, поэтому возможно кто-то уже использует такой подход, если да, то как Вам?
Простой
Средний
Простой
