10 tips to write good CSS

Mobile-first or Desktop first? px or rem or em? Specificity is good or bad? Get your answers here.


Atul Tameshwari

3 years ago | 2 min read

Greetings fellow developer, how are you? Hope you all are doing great :)

Today, I'm gonna talk about CSS! Almighty CSS, every developer's worst nightmare. OK, maybe not the worst but let's admit it, CSS is wearisome if you are a beginner who does not have much experience writing CSS.

What it feels like, working with CSS
What it feels like, working with CSS

Let’s Start

  1. When developing applications, always try to do a mobile-first approach. And then optimize it for desktop, believe me, it will be easier.
  2. Try not to nest classes while writing CSS inside the stylesheet, writing CSS for one class only is good.
Good vs Bad approach while writing CSS
Good vs Bad approach while writing CSS

3. Keep your magic numbers & values inside CSS variables (such as
colors, margin, padding, font size, etc).

CSS Variables
CSS Variables

4. The above point will also help you in creating themes based on your
current CSS, just change the variable values and VOILA! there you have
yourself a new theme.

5. Keep the spacing consistent throughout the app.

6. Use vanilla CSS as much as possible.

7. Try not to use "px" for spacing and sizing, instead use "rem" and "em"
for responsiveness ("rem" is more preferred).

Adding padding to a container div
Adding padding to a container div

8. Use a consistent naming convention for your classes (for better DX).
You can either create and follow your own naming convention or use
pre-existing conventions like BEM notation.

9. While writing an app keep in mind to give equal importance to both
UX and DX.

10. While approaching a complex design, first take your time and identify
your components:

  • Components that are not going to be in normal flow i.e., components having position: absolute and position: fixed;
  • Container components that are uni-directional will use display: flex;
  • Container components that are bi-directional will use display: grid;

And then plan your approach accordingly.

That's all for now! I hope this helps somebody.

Ending my article with a cat meme
Ending my article with a cat meme

Happy Coding (●'◡'●)

Help me buy some books?


Created by

Atul Tameshwari

Helping fellow newbie developers of the web domain.







Related Articles