Who uses this approach in writing CSS?

Question

css

Hi friends.
I switched to a component approach a long time ago, when each block is in its own folder (pug, scss, js, json).
It's scary to even imagine when I wrote all the code in one file (well, almost in one, except for mixins, a file with media and a couple more, but it was still tough), now, when projects are large and css turns into huge files, it was would be simply unrealistic.
But still, when the block is large, even with the help of the preprocessor, it can easily grow to more than 150 - 200 lines, which also starts to get a little annoying, because. when you want to see what you wrote for the screen < 768px, you have to scroll down, then up again, then down again. Yes, the files are certainly not that big, but still I want to minimize this.
Those. before there was this approach:

.container {
   background: aqua;

   &__item {
      display: block;
      &_active {
         color: #000;
      }
   }

}

@media (max-width: 767px) {
   .container {
      background: chocolate;

      &__item {
         display: inline-block;
         &_active {
            color: #fff;
         }
      }
   }

}

Today, another way came to mind, as it seemed to me, more convenient: the media expression is right in the source block, which allows you to immediately see what and where is happening with this block, and not look somewhere below / above.
The assembler does everything right: media expressions are grouped and placed at the end - in general, it is no different from the usual (or popular) writing.
When selecting the necessary media, the editor highlights wherever it occurs, which does not bother you in finding the right resolution.
Because component development, it allows you to use some blocks in other projects, and such writing is very convenient because if you need to take only a part, then you do not need to run through the file and look for everything that relates to a specific block, element, modifier.
The hike is like this:

.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;
         }
      }
   }

}

Yes, with such syntax highlighting as here, it may not look quite readable, but in the code it looks more beautiful and convenient.
How do you like this approach, has the right to exist?
I am more than sure that I have not discovered anything new, so maybe someone is already using this approach, if so, how do you like it?

Answer 1

Perfectly normal approach. I write the same example:

.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;
        }
    }
}

Answer 2

The approach is excellent. No need to look for styles for an adaptive in different files, everything is compact and convenient.
I use a similar method.

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

    @include mobile-wide {
        margin-bottom: 15px;
        margin-left: 40px;
    }
}

Answer 3

I use the SMACSS methodology and in SASS I break the project into layers like this:
_mixins.scss
_variables.scss
_base.scss - here are all styles for tags, including resets and normalizes
_layout.scss - here are the main blocks like footer, header with naming for example .l-header
_modules.scss - here are styles like div.container, div.product__item
_themes.scss - here are styles that override some elements, for example, a promotional label or a buy button of a different color
_state.scss - here are all the styles that are responsible for the state of the button: active, a:hover and including media queries. So if you need to fix something for mobile layout, I immediately go here
styles.scss imports all of the above files. Read the doc for this preprocessor, it says that files that start with _ it concatenates into 1 file.
Sobsn for this I liked SCSS + SMACSS

Answer 4

This is a normal practice and has the right to life.
Although, for example, it’s more convenient for me to just put all the media in a separate file. This makes the code look cleaner and easier to maintain. But this is subjective, how you like it, how it is more convenient - do it

Answer 5

The approach is certainly very cool, but for 100/200 lines a separate file is somehow too much for me, about media, you can install clean-css in gulp, and run it only on the build, and create mixins with full media in the process)
) it looks like this to me:

.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;
                });
              }

at the end I change the task in the gallp and clean-css cleans everything up, try it very convenient, you don’t need to poke around in the media, and media are written in parallel with the main code)))