4

I've set up 3 different breakpoints using bourbon and neat. I've followed some of the info in bitters to set up to variable to use in the media mixin. This makes it ridiculously easy to throw in breakpoints.

@include media($small-screen-up) {
.foo {property; value;}
}

Historically, I've set up breakpoints and basically contained all the appropriate styles within the breakpoints. 

@media screen and (min-width: 40em) and (max-width: 53.75em) {
// all my medium screen rulesets here, yay!
  .foo {
    property: value;
   }
}

@media screen and (min-width: 53.76em) and (max-width: 80em) {
// all my large screen rulesets here, yay!
  .foo {
    property: value;
   }
}

With this mixin and variables set up for breakpoints, I found myself approaching it differently.

.foo {
  property: value;

    @include media($medium-screen-up) {
   property: value;
   }

   @include media($large-screen-up) {
   property: value;
   }
}

So you can see that I'm working within one ruleset and tweaking styles within the ruleset depending on the target screen size.

This feels right, but it also feels dirty.

It seems right because I have all the rules no matter what the size contained in a single area. It feels easier to mentally track inheritance and specificity.

If feels dirty because it adds a ton of @media rules in the processed output. I would never actually write vanilla CSS that way.

Am I crazy? How do "professional" front-end devs approach this? (I'm a designer by trade). What are the best practices for managing breakpoints using bourbon, neat, and sass across complex (enterprise level) applications?

Erik Hanson
  • 155
  • 5
  • Generated css is rarely (read never) "pretty", the way we usually go about it is our initial styles are for mobile and then we work our way up. I m voting to close this question as it's primarily opinion based and a bit too broad for the scope of [so] – Patsy Issa Feb 27 '15 at 18:41
  • Fair enough. Given that there are 100 ways to skin a cat, I'd be happy to hear opinions on this one but can also see how that conversation is probably better had elsewhere. – Erik Hanson Feb 27 '15 at 18:43
  • A more suitable place for such a discussion is the [html/css](http://chat.stackoverflow.com/rooms/29074/html-css-webdesign) chatroom, you ll need 20 rep to be able to talk there though. – Patsy Issa Feb 27 '15 at 18:45
  • But before it gets closed I would like to offer my congratulations to you for using breakpoints based on em units rather than px units! All too few developers do that, but it makes your code much more Accessible to poor sighted people using larger font sizes than normal. +1 upvote just for that, to help you towards that 20 rep Hero mentions! – GuyH Feb 27 '15 at 18:56

0 Answers0