How I structure my CSS

When doing CSS, I always recommend doing it with mobile-first approach. This way, we can ensure that we cover each breakpoint for better responsiveness.

// default or mobile devices (up to 719px)
.heading {
  font-size: 14px;
  padding: 10px;
}

// tablet devices (720px up to 991px)
@media screen and (min-width: 720px) and (max-width: 991px) {
  .heading {
    font-size: 18px;
    padding: 20px;
  }
}

// small screen desktop devices (992px up to 1023px)
@media screen and (min-width: 992px) and (max-width: 1023px) {
  .heading {
    font-size: 18px;
    padding: 30px;
  }
}

// large screen desktop devices (1024px up to 1920px or more)
@media screen and (min-width: 1024px) {
  .heading {
    font-size: 18px;
    padding: 40px;
  }
}

With this approach, we can be sure that all of the devices' screen sizes were covered. Also, we do not have to put the !important keyword because we know that none of our styles are overlapping, unless if it was overwritten from another CSS file.

However, there is still one issue that may occur from this. As we can see, we defined our .heading class multiple times. If we have a small CSS file, this isn't going to be a problem. But once our CSS file started to contain too many styles for our application, it will be harder for us to track from which of this declaration is for mobile, tablets, small desktops, and large desktops. We have to scroll and scroll just to find the right declaration where we want to do some changes or additions. This could slow us down and sometimes causes frustration.

To resolve this issue, we can improve this approach with the help of SCSS. One of the features of SCSS, is that we are allowed to nest our styles.

.heading {
  // default or mobile devices (up to 719px)
  font-size: 14px;
  padding: 10px;

  // tablet devices (720px up to 991px)
  @media screen and (min-width: 720px) and (max-width: 991px) {
    font-size: 18px;
    padding: 20px;
  }

  // small screen desktop devices (992px up to 1023px)
  @media screen and (min-width: 992px) and (max-width: 1023px) {
    font-size: 18px;
    padding: 30px;
  }

  // large screen desktop devices (1024px up to 1920px or more)
  @media screen and (min-width: 1024px) {
    font-size: 18px;
    padding: 40px;
  }
}

Now, all of our styles for the .heading class for different screen sizes were defined under a single declaration. It is now more predictable, readable, and scalable.

Implementation with Tailwind using the @apply directive

One of the misuses of tailwind is directly using tailwind classes into html or template files. This makes our html code messy and crowded with bunch of classes. The more it goes like this, the harder it is to read and maintain our codebase. One solution is to use the @apply directive provided by tailwind. With this, we can apply tailwind classes in a single class, and use that class in our html elements.

Here’s an example on how to use it and keep the mobile-first pattern implemented.

.heading {
  // default or mobile devices
  @apply text-sm p-[10px];

  // medium size screen
  @apply md:text-base md:p-[20px];

  // large size screen
  @apply lg:text-lg lg:p-[30px];

  // extra large size screen
  @apply xl:text-xl xl:p-[40px];
}

And that's it for today. I hope you learned something from what we've discussed. Thank you for your support :)