Back

CSS Tricks

Where Do You Nest Your Sass Breakpoints? 2019-02-11 16:16:48

I love nesting my @media query breakpoints. It's perhaps the most important feature of Sass to me. Maybe I pick a method and do it like this:

.element {
  display: grid;
  grid-template-columns: 100px 1fr;
  @include breakpoint(baby-bear) {
    display: block;
  }
}

That's straightforward enough. But what if my element has several sub-elements and the breakpoint affects them as well? There are different approaches, and I'm never quite sure which one I should be doing.

I could duplicate the breakpoint for each child:

.parent {

    @include breakpoint(desktop) {
    }

    .child {
        @include breakpoint(desktop) {
        }
    }

   .child-2 {
        @include breakpoint(desktop) {
        }
    }

}

The compiled CSS comes out to something like this:

@media screen and (min-width: 700px) {
  .parent {
  }
}
@media screen and (min-width: 700px) {
  .parent .child {
  }
}
@media screen and (min-width: 700px) {
  .parent .child-2 {
  }
}

Or, I could duplicate the children under the first nested breakpoint:

.parent {

    @include breakpoint(desktop) {

       .child {
       }

       .child-2 {
       } 

    }

    .child {
    }

   .child-2 {
    }

}

That results in:

@media screen and (min-width: 700px) {
  .parent .child {
  }
  .parent .child-2 {
  }
}
.parent .child {
}
.parent .child-2 {
}

Or I could do a combination of the two. Neither of them feels particularly great because of the duplication, but I'm not sure there is a perfect answer here. I err a little more on duplicating the media query, as it seems less error-prone than duplicating selectors.

The post Where Do You Nest Your Sass Breakpoints? appeared first on CSS-Tricks.

Read more


The ineffectiveness of lonely icons 2019-02-11 16:15:57

Icons are great and all, but as we've been shown time and time again, they often don't do the job all by themselves. Even if you do a good job with the accessibility part and make sure there is accompanying text there for assistive technology, in an ironic twist, you might be confusing people who browse visually, like the situation Matt Wilcox describes with his mother in this linked article.

I'm a fan of this markup pattern, including the inline SVG as the preferred icon system:

<button>
  <svg class="icon icon-cart" viewBox="0 0 100 100" aria-hidden="true">
    <!-- all your hot svg action, like: -->
    <path d=" ... " />
  </svg>
  Add to Cart
</button>

Or, if the button is really a link and not a JavaScript-powered action, I'll use an <a href=""> instead of a <button> wrapper.

Direct Link to ArticlePermalink

The post The ineffectiveness of lonely icons appeared first on CSS-Tricks.

Read more