Question 1

SUIT CSS vs BEM: which is better for large projects?

Accepted Answer

SUIT CSS builds on BEM principles with added tooling like a preprocessor and modular packages, making it more integrated for scalable, component-based apps. BEM is a naming convention you can apply flexibly, but SUIT offers stricter enforcement and testing tools.

Question 2

How to add custom components in SUIT CSS?

Accepted Answer

Create CSS files following SUIT naming conventions (e.g., .Component-name) and import them into your build pipeline, similar to the Excerpt example in the README. Use custom properties for theming and ensure they pass the linter for consistency.

Question 3

Does SUIT CSS work with modern JavaScript frameworks?

Accepted Answer

Yes, it's designed for component-based development and pairs well with React, Ember, or Angular. Its naming conventions align with component structures, making style application straightforward, as noted in the complementary tools section.

Question 4

Can I use SUIT CSS without Node.js and npm?

Accepted Answer

Pre-built bundles are available for download, allowing basic use without Node.js, but you'll miss the preprocessor features like custom properties and linting. The full methodology relies on the npm-based toolchain for optimal benefits.

Question 5

How does SUIT CSS handle responsive design?

Accepted Answer

It uses custom media queries defined with @custom-media in CSS, as shown in the quick start with breakpoints like --sm-viewport. This allows declarative, reusable responsive rules integrated into the build process.

Question 6

What's the browser support like for SUIT CSS?

Accepted Answer

Supports modern browsers including IE9+ for basic styles, with flexbox requiring IE10+ and newer versions of Chrome, Firefox, and Safari. Refer to the browser support section for details and caniuse links.

Question 7

Is SUIT CSS good for rapid prototyping?

Accepted Answer

Not ideal, as its emphasis on structure and tooling adds setup time. For quick prototypes, consider simpler frameworks or inline styles, but SUIT shines in long-term maintainability for complex apps.

SUIT CSS

What is SUIT CSS?

Overview

Use Cases

Best For

Found a gem we're missing?

Not Ideal For

Pros & Cons

Pros

Cons

Frequently Asked Questions