Кто использует такой подход в написании CSS?

Привет, друзья.

Давно перешел к компонентному подходу, когда каждый блок находится в своей папке (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;
         }
      }
   }

}


Да, при такой подсветке синтаксиса как тут, может смотрится не совсем читабельно, но в коде это выглядит более красиво и удобно.

Как Вам такой подход, имеет право на существование?
Более чем уверен, что не открыл ничего нового, поэтому возможно кто-то уже использует такой подход, если да, то как Вам?
  • Вопрос задан
  • 2368 просмотров
Решения вопроса 6
IonDen
@IonDen
JavaScript developer. IonDen.com
Совершенно нормальный подход. Пишу так же, пример:
.footer {
    position: relative;
    background-color: @dark-grey-blue;
    color: @white;
    font-size: 12px;
    padding: 20px;
    box-sizing: border-box;

    @media @desktop {
        height: 200px;
        padding: 0;
    }

    &__text {
        display: block;
        text-align: center;

        @media @desktop {
            position: absolute;
            top: 75px;
            left: 15px;
            width: 250px;
            text-align: left;
        }
    }
}
Ответ написан
Комментировать
nikichv
@nikichv
Frontend dev. Current stack: Next.js/RTK/Saga
Обычный хороший подход, даже правильный я бы сказал. Сам давно использую. И это действительно удобно, что можно в одном месте просмотреть все стили элемента по всем брейкпоинтам. В чем вопрос только непонятно. :)
Особенно удобно в сочетании с бутстрапом:
.logo {
  width: 198px;
  height: 122px;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;

  @include media-breakpoint-down(sm) {
    display: none;
  }
}
Ответ написан
miraage
@miraage
Старый прогер
Я категорически против этой "магии". Потом попробуй найди селектор из шаблона. Мне проще ctrl+click перейти в полное объявление css класса, нежели искать самому эти кусочки.
Из sass использую переменные, миксины, укороченный синтаксис для hover/active/disabled/etc.. и в исключительных ситуациях использую вложенность.
Ответ написан
tema_sun
@tema_sun
Второй удобней. Сейчас есть плагины, которые в итоге сгруппируют все медиа запросы. Так что писать отдельно все медиа смысла нет.
Да, я тоже так пишу.
Ответ написан
Комментировать
delphinpro
@delphinpro Куратор тега CSS
frontend developer
Всё правильно. Тоже так пишу. Но...
Я всё же стараюсь группировать медиазапросы в пределах блока по их, как бы это сказать, функциональному назначению. Например, если есть взаимосвязь между двумя элементами, и при изменении свойств одного из них необходимо изменить свойства второго, то я пишу один медиазапрос внутри блока с правилами для этих двух элементов. Если тесной связанности нет, например, нужно просто скрыть один из элементов, то медиазапрос пишется прямо в этом элементе.
Ответ написан
Комментировать
vicodin
@vicodin
Имею некоторый опыт
Все так делают, это удобнее
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 4
@taras_kiev
Подход отличный. Не надо искать по разным файлам стили для адаптива, все компактно и удобно.
Использую похожий способ.

.heading-line {
    margin-left: 100px;
    font-weight: 300;

    @include mobile-wide {
        margin-bottom: 15px;
        margin-left: 40px;
    }
}
Ответ написан
Комментировать
@dmitry_pacification
Трудности рождают прорыв
Я использую методологию SMACSS и в SASS разбиваю проект на слои вот так:
_mixins.scss
_variables.scss
_base.scss - тут все стили для тегов, в том числе ресеты и нормолайзы
_layout.scss - тут основные блоки типа футер, хедер с именованием например .l-header
_modules.scss - тут стили типа div.container, div.product__item
_themes.scss - тут стили которые переопределяют некоторые элементы, например акционную лейбу или кнопку купить другого цвета
_state.scss - тут все стили которые отвечают за состояние button:active, a:hover и в том числе media queries. Так что если нужно поправить что-то для мобильной верстки я сразу иду сюда
styles.scss импортирует все выше указанные файлы. Почитайте доку по этому препроцессору, там указано что файлы которые начинаются с _ он конкатенирует в 1 файл.

Собсн по этому мне и понравился SCSS + SMACSS
Ответ написан
Комментировать
Krasnodar_etc
@Krasnodar_etc
fundraiseup
Это нормальная практика и имеет право на жизнь.
Хотя мне, например, удобнее просто выносить все media в отдельный файл. Так код выглядит чище и удобнее поддерживать. Но это субъективно, как нравится, как удобнее - так делайте
Ответ написан
Комментировать
Подход конечно оч крутой, но на 100/200 строк отдельный файл по мне как то слишком, по поводу медиа, в gulp можно установить clean-css, и запускать его только на сборке, а в процессе работы создать миксины с полным медиа))

у меня это выглядит примерно так:
.checked, input[type="text"]{
                border: 2px solid @white;
                background: @white;
                position: relative;
                font-size: @fontXS;
                font-family: @fBold, sans-serif;
                color: @fBlack;
                padding: 10px ;

                &:after{
                  content: '\f0d7';
                  font-family: FontAwesome, sans-serif;
                  color: @Green;
                  position: absolute;
                  right: 10px;
                  top: 13px;
                }
                .md-media({
                  margin-top: 10px;
                });
                .sm-media({
                  border-radius: 5px;
                });
              }


в конце меняю задачу в галпе и clean-css все подчищает, попробуйте это оч удобно, не нужно ковыряться в медиа, а параллельно основному коду пишутся и медиа)))
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы