Skip to main content

How to make css easy ?

· 3 min read
Harikrishnan
Harikrishnan
Web designer and Programmer

The ways I follow to make CSS easy, I mean less difficult.

Adopt a CSS framework​

Frameworks provide a collection of pre-styled components and utility classes, reducing the need to write custom CSS from scratch.

I prefer to use Tailwind.

If you can check Daisy UI, It is great UI library built over tailwind and it is highly customizable. I am too lazy for creating accordions, modal etc from scratch, so I use daisy ui for a skeleton and style it with tailwind as per my need.

Use CSS GRID for complex layout​

Learn CSS GRID, especially grid areas. It will make your styling lot easier.

Use Tools and Extensions:​

  • PostCSS: A tool that processes your CSS with plugins that can optimize, transform, and lint your styles.
  • Autoprefixer: A PostCSS plugin that automatically adds vendor prefixes to your CSS, ensuring better cross-browser compatibility.

Practice DRY (Don’t Repeat Yourself):​

Avoid redundant code by reusing existing styles and leveraging mixins or utility classes.

Mixins​

info

Mixins are not available in vanilla CSS or tailwind. You should use something like SCSS.

Example:

A mixin is defined with the @mixin directive. The following example creates a mixin named "important-text":

// style.scss

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

The @include directive is used to include a mixin. So, to include the important-text mixin created above:

// style.scss

.danger {
  @include important-text;
  background-color: green;
}

Write CSS only for 3 screen sizes​

  1. Mobile - xs (390px) -> 0 to 390px
  2. Tablet - md (640px) -> 391 to 640px
  3. Desktop - lg (1200px) -> 641 to 1200px and 1200px to above.

Use zoom trick to adjust the size on all other sizes

Regularly Refactor and Clean Up:​

Periodically review and clean up your CSS to remove unused styles, optimize code, and ensure it remains easy to work with.

Tailwind specific tips and tricks​

Building your own classes for maximum reusability​

  • Look up @apply for nesting tw classes into your own classes. But try to keep them small and reusable.
<!-- Before extracting a custom class -->
<button
  class="py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75"
>
  Save changes
</button>

<!-- After extracting a custom class -->
<button class="btn-primary">Save changes</button>
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
  .btn-primary {
    @apply py-2 px-5 bg-violet-500 text-white font-semibold rounded-full shadow-md hover:bg-violet-700 focus:outline-none focus:ring focus:ring-violet-400 focus:ring-opacity-75;
  }
}
Know more about @layers and @apply

Tailwind docs for

Color schemes​

Using a bg-primary-500 style then setting primary color in tailwind config. Great for reusable components between projects, or when you're not totally clear on what the accent color will be. Or for multiple components in one project you can usually use find replace across files or multi-cursor mode within a file to change classes.

Using JIT Mode for Better Performance​

Source of idea

Just-In-Time (JIT) mode is a game-changer for Tailwind CSS. It builds your styles on-demand when you build your project. To enable it, update your tailwind.config.js:

module.exports = {
  mode: "jit",
  // other options
};

This makes the development process faster and more efficient.

Resources:​