suitcss/suit

SUIT CSS is a set of CSS tools designed for building websites and web apps where the interface is broken down into independent, reusable pieces called components. The project provides base styles to normalize how browsers display things, a library of utility classes for common layout and text adjustments, and a set of pre-built components like a grid system and button styles. All of these are available as separate packages so you only include what you actually need. The project also includes a preprocessor, which is a build step you run before publishing your CSS. It takes your source files, resolves the imports to pull all the packages together, applies CSS variables and custom media queries (which let you write breakpoints by name rather than by raw pixel values), and then outputs a single ready-to-use CSS file. It also checks that your class names follow the SUIT naming conventions and can minify the output to reduce file size. The naming conventions are a key part of the approach. SUIT uses a structured pattern for class names where the component name, its sub-elements, and its variations each follow a predictable format. This makes it easier to understand what a class does just by reading its name, and the preprocessor can validate that your code follows the pattern rather than letting small naming inconsistencies slip through. Each package is independent, has its own documentation, and can be installed individually via npm. Pre-built bundles are also available to download for trying things without setting up a build pipeline. The entire bundle of base styles, utilities, and components comes to about 4.4 kilobytes when compressed. Browser support covers modern Chrome, Firefox, Opera, and Safari, plus Internet Explorer 9 and above for most features.