CSS Styling Architectures: Preprocessors vs CSS-in-JS Solutions

When building modern web applications, how you manage styles impacts performance, maintainability, and developer experience. sass represents the traditional build-time preprocessing approach, while emotion, styled-components, and styled-jsx represent the CSS-in-JS evolution. Each solves the problem of scoping and maintenance differently. Let's compare how they handle real-world engineering challenges.

📝 How Styles Are Defined: Files vs Components

sass keeps styles in separate .scss or .sass files.

• You write standard CSS with superpowers like variables and mixins.
• Styles are global by default unless you use naming conventions like BEM.

// sass: button.scss
.btn {
  background: blue;
  color: white;
  
  &:hover {
    background: darkblue;
  }
}

emotion lets you write styles in JavaScript using the css prop or styled factory.

• Styles are scoped to the component automatically.
• You can use JavaScript logic directly inside style definitions.

// emotion: Button.jsx
import { css } from '@emotion/react';

function Button() {
  return (
    <button css={css`
      background: blue;
      color: white;
      &:hover { background: darkblue; }
    `}>
      Click Me
    </button>
  );
}

styled-components uses tagged template literals to create styled React components.

• You define a new component that includes its styles.
• Syntax feels very close to writing CSS but lives in your JS files.

// styled-components: Button.jsx
import styled from 'styled-components';

const Button = styled.button`
  background: blue;
  color: white;
  &:hover { background: darkblue; }
`;

function App() {
  return <Button>Click Me</Button>;
}

styled-jsx uses a <style jsx> tag inside your component return statement.

• Styles are scoped to the component automatically.
• It looks like standard CSS but is limited to the component scope.

// styled-jsx: Button.jsx
function Button() {
  return (
    <>
      <button>Click Me</button>
      <style jsx>{`
        button {
          background: blue;
          color: white;
        }
        button:hover {
          background: darkblue;
        }
      `}</style>
    </>
  );
}

⚡ Handling Dynamic Values: Props vs Variables

sass does not support runtime JavaScript props directly.

• You must use CSS Custom Properties (variables) or build-time mixins.
• Dynamic changes require updating DOM attributes or CSS variables via JS.

// sass: button.scss
.btn {
  background: $primary-color; // Build-time variable
}

// JS: Set CSS variable for runtime changes
// element.style.setProperty('--bg-color', 'red');

emotion allows you to pass props directly to the style function.

• You can interpolate JavaScript values easily.
• Great for conditional styling based on state.

// emotion: Button.jsx
const Button = ({ primary }) => (
  <button css={css`
    background: ${primary ? 'blue' : 'gray'};
    color: white;
  `}>
    Click Me
  </button>
);

styled-components also supports props interpolation in tagged templates.

• Props are passed to the style block automatically.
• Syntax is clean but relies on template literal functions.

// styled-components: Button.jsx
const Button = styled.button`
  background: ${props => props.primary ? 'blue' : 'gray'};
  color: white;
`;

styled-jsx supports dynamic values using JavaScript expressions inside CSS.

• You can inject props into your CSS blocks.
• Requires wrapping values in curly braces within the style tag.

// styled-jsx: Button.jsx
function Button({ primary }) {
  return (
    <>
      <button>Click Me</button>
      <style jsx>{`
        button {
          background: ${primary ? 'blue' : 'gray'};
          color: white;
        }
      `}</style>
    </>
  );
}

🎨 Global Styles and Theming

sass handles theming via variables and import order.

• You define a variables file and import it where needed.
• Global styles are just regular CSS files imported at the entry point.

// sass: _variables.scss
$primary: blue;

// sass: main.scss
@import 'variables';
body { background: $primary; }

emotion uses a ThemeProvider for context-based theming.

• You wrap your app to provide theme values.
• Access theme inside styles using the theme prop or hook.

// emotion: Theme.jsx
import { ThemeProvider } from '@emotion/react';

const theme = { colors: { primary: 'blue' } };

function App() {
  return (
    <ThemeProvider theme={theme}>
      <div css={css(({ theme }) => ({ color: theme.colors.primary }))}>
        Themed Text
      </div>
    </ThemeProvider>
  );
}

styled-components has a built-in ThemeProvider similar to Emotion.

• Theme values are injected into styled components automatically.
• Very popular pattern for dark mode switching.

// styled-components: Theme.jsx
import { ThemeProvider } from 'styled-components';

const theme = { colors: { primary: 'blue' } };

const Div = styled.div`
  color: ${props => props.theme.colors.primary};
`;

function App() {
  return (
    <ThemeProvider theme={theme}>
      <Div>Themed Text</Div>
    </ThemeProvider>
  );
}

styled-jsx supports theming via CSS variables or context.

• Since v3, it supports a style global jsx prop for global styles.
• Theming often relies on CSS custom properties rather than a JS provider.

// styled-jsx: Theme.jsx
function App() {
  return (
    <>
      <div className="themed">Themed Text</div>
      <style jsx global>{`
        :root {
          --primary: blue;
        }
        .themed {
          color: var(--primary);
        }
      `}</style>
    </>
  );
}

🚀 Rendering and Performance

sass compiles to static CSS files during the build process.

• Zero runtime JavaScript cost for styles.
• Browser caches the CSS file efficiently.
• Best for performance-critical applications where bundle size matters.

# sass: Build command
sass src/styles/main.scss dist/styles/main.css

emotion injects styles at runtime by default.

• Can extract critical CSS for server-side rendering (SSR).
• Slight runtime overhead to parse and inject styles on mount.
• Flexible for dynamic applications where styles change often.

// emotion: SSR Setup
import { CacheProvider } from '@emotion/react';
import createCache from '@emotion/cache';

// Configure cache for SSR extraction
const cache = createCache({ key: 'css' });

styled-components also injects styles at runtime.

• Requires specific SSR setup to avoid flash of unstyled content.
• Generates unique class names per component instance.
• Performance is generally good but heavier than static CSS.

// styled-components: SSR Setup
import { ServerStyleSheet } from 'styled-components';

// Collect styles during server render
const sheet = new ServerStyleSheet();

styled-jsx can extract styles to static CSS files (especially in Next.js).

• Near-zero runtime overhead when extracted.
• Styles are scoped automatically without complex JS logic.
• Best balance between CSS-in-JS DX and static CSS performance.

// styled-jsx: Next.js Config
// styles are automatically extracted in production builds
// No extra runtime injection code needed

🌱 When Not to Use These

These tools are powerful, but they are not always the right fit.

• Avoid sass if you need heavy dynamic styling based on complex JS state. Managing CSS variables for everything can get messy.
• Avoid emotion or styled-components if you are building a simple static site. The runtime overhead is unnecessary for content-heavy pages.
• Avoid styled-jsx if you are not using React or Next.js. It is tightly coupled to the React JSX ecosystem.
• Avoid all CSS-in-JS if your team lacks JavaScript proficiency. Debugging runtime styles can be harder than inspecting standard CSS files.

📌 Summary Table

💡 Final Recommendation

Think in terms of project constraints and team skills.

• Need maximum performance and standard CSS? → Use sass. It is stable, fast, and universally understood.
• Building complex React apps with dynamic themes? → Use emotion or styled-components. emotion is more flexible for non-React parts; styled-components is more opinionated for React.
• Using Next.js and want simplicity? → Use styled-jsx. It comes built-in and offers the best of both worlds for this framework.

Final Thought: There is no single winner. sass wins on raw performance. emotion and styled-components win on developer experience for dynamic UIs. styled-jsx wins for Next.js integration. Choose the tool that matches your architecture.