Nested media queries feels a bit disorganized. Should media queries be centralized per breakpoint?

Example

  &__link-list {
    padding-left: 8.75rem;
    padding-right: 2.5rem;
    padding-bottom: 0px;
    overflow: hidden;
    line-height: 1.5;
    font-size: 1.25rem;
    //margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    @media screen and (min-width: $breakpoint-lg) {
      flex-direction: row;
      align-items: center;
    }

    @media screen and (max-width: $breakpoint-lg) {
      position: relative;
      left: -100px;
      top: 20px;
    }

    &-item {
      display: none;
      vertical-align: middle;

      @media screen and (min-width: $breakpoint-lg) {
        margin-left: 0.625rem;
        margin-right: 0.625rem;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
      }

  &__link-list {
    padding-left: 8.75rem;
    padding-right: 2.5rem;
    padding-bottom: 0px;
    overflow: hidden;
    line-height: 1.5;
    font-size: 1.25rem;
    //margin-bottom: 1.25rem;
    display: flex;
    align-items: flex-start;
    flex-direction: column;

    @media screen and (min-width: $breakpoint-lg) {
      flex-direction: row;
      align-items: center;
    }

    @media screen and (max-width: $breakpoint-lg) {
      position: relative;
      left: -100px;
      top: 20px;
    }

    &-item {
      display: none;
      vertical-align: middle;

      @media screen and (min-width: $breakpoint-lg) {
        margin-left: 0.625rem;
        margin-right: 0.625rem;
        padding-right: 0.625rem;
        padding-left: 0.625rem;
      }

12 Replies

Mert Efe•2y ago

does it also seem too unorginazed to outside view? what would be proper way of handling?

b1mind•2y ago

I love nested cause it keeps the concerns in the same spot

Mert Efe•2y ago

i agree

b1mind•2y ago

I don't wanna go looking for the same class in another file/section just for mobile

Mert Efe•2y ago

is there a best practice in this or mainstream usage? or preferential

b1mind•2y ago

best practices are a lie You will either come to a choice with a team or do what the team decided when it comes to that. Also I use postcss-combine-media-query that way output can be minimal still

Mert Efe•2y ago

oh wow that seems sick library!

b1mind•2y ago

postCSS ftw sooooo many good plugins depending on your needs. I use that and autoprefixer on most all things.

Mert Efe•2y ago

is this an NPM library or just a postCSS plugin , couldnt be sure?

b1mind•2y ago

its both? xD

Mert Efe•2y ago

ahh okay 😄

b1mind•2y ago

its a postCSS plugin though yes

Gaming

Programming

Nested media queries feels a bit disorganized. Should media queries be centralized per breakpoint?