Welcome to the Treehouse Community
Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.
Looking to learn something new?
Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.
Start your free trial
Charlie Prator
Front End Web Development Techdegree Graduate 19,854 PointsWhich is better: repeat shared styles (for a given breakpoint) for the sake of localization? Or, consolidate them?
This question is related to Guil's video titled: Defining Media Queries in the "CSS to Sass" course.
So, in our _style.scss folder we have shared styles for the 768px breakpoinst for different classes:
@media (max-width: 768px) {
.primary-content,
.secondary-content {
width: 100%;
padding: 20px;
border-top: none;
}
}
And, Guil tells us to refactor this into their respective partials using our breakpoint variables and media directive. However, my question is this: what's the best approach here (taking DRY into consideration)?
Approach A used in my _containers.scss partial:
.primary-content {
@media #{$brk-narrow} {
width: 100%;
padding: 20px;
border-top: none;
}
}
.secondary-content {
@media #{$brk-narrow} {
width: 100%;
padding: 20px;
border-top: none;
}
}
Approach B:
.primary-content,
.secondary-content {
@media #{$brk-narrow} {
width: 100%;
padding: 20px;
border-top: none;
}
}
Both have their cons. Approach A is not DRY cause we're repeating the same styles twice. And, Approach B isn't very useful. We just took (roughly the same) code that was written in _styles.scss and copied & pasted into _containers.scss.