Skip to main content

Different Styling Techniques

1. CSS (Cascading Style Sheets)​

Theory​

CSS is the fundamental styling language used to design web pages. It allows developers to apply styles globally or locally using classes, IDs, and element selectors.

Use Cases​

  • Traditional websites with static or minimal dynamic styling
  • Projects where separation of concerns (HTML & CSS) is preferred

Limitations​

  • Global scope can lead to style conflicts
  • Hard to manage styles in large applications

2. CSS Modules​

Theory​

CSS Modules provide locally scoped styles, meaning styles are scoped to a specific component rather than being global.

How It Works?​

CSS files are imported as JavaScript objects, and class names are automatically scoped to avoid conflicts.

import styles from "./Button.module.css";

const Button = () => (
  <button className={styles.button}>Click Me</button>
);

CSS Modules are perfect for component-based architectures like React and Vue!

Use Cases​

  • Component-based architectures (React, Vue, etc.)
  • Large-scale applications where style encapsulation is required

Limitations​

  • Extra build configuration required
  • Not as flexible for dynamic styles

3. CSS-in-JS​

Theory​

CSS-in-JS allows writing CSS styles directly within JavaScript files using libraries like Styled Components or Emotion.

How It Works?​

Styles are defined inside JavaScript and scoped per component, then dynamically generated and injected into the page.

import styled from "styled-components";

const Button = styled.button`
  background: blue;
  color: white;
  padding: 10px;
`;

Use Cases​

  • React and component-driven frameworks
  • Dynamic theming, dark mode support, and runtime styles

Limitations​

  • Higher runtime cost due to JavaScript execution
  • Larger bundle sizes

4. Tailwind CSS​

Theory​

Tailwind CSS is a utility-first CSS framework that provides predefined utility classes for faster styling without writing custom CSS.

How It Works?​

Utility classes are used directly in HTML/JSX, making styles composable and reusable.

const Button = () => (
  <button className="bg-blue-500 text-white p-2 rounded-lg">
    Click Me
  </button>
);

Use Cases​

  • Rapid UI development
  • Highly customizable and scalable projects
  • Applications requiring design consistency

Limitations​

  • Learning curve for beginners
  • Can lead to bloated class names if not managed properly

5. SCSS/SASS (Syntactically Awesome Stylesheets)​

Theory​

SCSS is a preprocessor that extends CSS with variables, mixins, nesting, and functions.

How It Works?​

$primary-color: blue;

.button {
  background: $primary-color;
  padding: 10px;
  
  &:hover {
    background: darken($primary-color, 10%);
  }
}

Use Cases​

  • Projects requiring reusable styles (e.g., themes, design systems)
  • Large-scale applications with complex styling needs

Limitations​

  • Requires compilation to standard CSS
  • Can become difficult to manage if overused

Comparison Table​

TechniqueScoped StylesPerformanceBest Use Case
CSS❌ No✅ FastSimple projects
CSS Modules✅ Yes✅ FastComponent-based UI
CSS-in-JS✅ Yes⚠️ SlowerDynamic styling
Tailwind CSS✅ Yes✅ FastUtility-first styling
SCSS/SASS❌ No✅ FastLarge-scale applications

Conclusion​

Choosing the right styling approach depends on your project needs. CSS Modules and CSS-in-JS work well in component-driven applications, while Tailwind CSS is great for rapid development. SCSS remains useful for large-scale projects requiring maintainability.