Mobile First is a good start but you will have to consider going all the way up to Tablet and Desktop. Sometimes even larger Desktops.
Now how do we approach .scss files?
There are several ways to approach and these two are very common nowadays.
Method 1: Write media queries in classes
The focus of this Idea is to keep a better overview on classes. If you want to make changes to classes, be it in Mobile and Desktop but not Tablet, this is a good way to go.
.class {
color: red; @media (min-width: $tablet) {
color: yellow;
} @media (min-width: $desktop) {
color: green;
}
}
While this gives us a good overview about the behavior of each class in every breakpoint it will still give us a bit of a messy file with lots of media queries.
Method 2: Write media queries as starting points
.class{
color: red;
}@media (min-width: $tablet){
.class{
color: yellow;
}
}@media (min-width: $desktop){
.class{
color: green;
}
}
While this gives us a good overview in smaller files and keep a great separation between breakpoints — it tends to get messy as soon as files get bigger and start having more dependencies to other classes.
Now we will compare both Methods when dependencies occur.
When we start developing and creating more dependencies between components it will grow big in a short time.
.class {
color: red; @media (min-width: $desktop) {
color: grey;
}
}.outer-class {
.class {
color: yellow; @media (min-width: $tablet) {
color: blue;
} @media (min-width: $desktop) {
color: green;
}
}
}.some-other-class {
.class {
color: green; @media (min-width: $tablet) {
color: red;
} @media (min-width: $desktop) {
color: blue;
}
}
}
The class class (sorry) has dependencies to other classes and also on different breakpoints. Lets say you will need to add something to a certain class, then you can easily find all relations. It is definitely a good way to find your code fast.
Pros: Good overview,
Cons: Messy due to many media queries
When we use the Method 2 it may look like this
.class {
color: red;
}
.outer-class {
.class {
color: yellow;
}
}
.some-other-class {
.class {
color: green;
}
}@media (min-width: $tablet) {
.outer-class {
.class {
color: blue;
}
}
.some-other-class {
.class {
color: red;
}
}
}@media (min-width: $desktop) {
.class {
color: grey;
}
.outer-class {
.class {
color: green;
}
}
.some-other-class {
.class {
color: blue;
}
}
}
Now when it comes to making changes to all colors in some-other-class then you will have to check all breakpoints and if we imagine we were in a real project with 20 more classes this may get messy. It is definitely not bad to have them seperated in classes.
Pros: All dependencies between classes within one breakpoint, very good for seperation in breakpoints
Cons: Files get bigger and you will have to check on every breakpoint for changes
In the end, just like 90% of all comparisons on Medium, both ways tend to have their good and bad sides.
Personally I prefer using the first Method a lot and it makes it easier for me to find classes and their changes in certain breakpoints.
