Got Messy Spaghetti Stylesheets? 4 Techniques for Managing CSS Complexity

• oocss

  6 6,234 0.0 JavaScript

  Object Oriented CSS Framework

Component based CSS frameworks originating with OOCSS inherently limits selector scope to only elements inside the 'CSS object'.

• css-modules

  86 17,368 5.5

  Documentation about css-modules

  

Taking the idea to somewhat of an extreme, CSS modules explicitly makes all CSS locally scoped by default.

• SurveyJS

  surveyjs.io sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,278 78,370 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

Tailwind sticks to a single level of class based specificity – not including normalizing CSS.

• Svelte

  632 76,402 9.9 JavaScript

  Cybernetically enhanced web apps

  

Lastly, JS frameworks like Vue and Svelte provide an all in one experience, where template, style, and functionality all live in the same file.

• styled-components

  223 40,061 8.7 TypeScript

  Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

  

CSS-in-JS category of tooling (JSS, Styled-Components, etc.) does 'inline++' styling, which also has the added benefit of placing style information right next to template.

• Atomizer

  17 1,526 9.0 JavaScript

  A library to create small, reusable CSS that scales as your website grows.

  

Atomic frameworks like Atomic CSS and Tailwind takes a single purpose approach to selectors, so CSS properties are naturally never overlapping – this is also why Tailwind's @apply is an anti-pattern when overused.

Suggest a related project