HackerReposA FIELD GUIDE TO OPEN SOURCE
ProSponsor the shelf♧ 0
← Back to top all-time
suitcss
suit
HTML2013–2023
suitcss / suit

suit

Style tools for UI components

Web Development
Explore on GitHubRead Hacker News discussions
6Distinct people
8Mentions
0Explicit recommenders
3.8KGitHub stars
REPOSITORY AT A GLANCE

What to know before exploring

What it is

Style tools for UI components

GitHub

Where it is used

No documented product use has been verified yet.

What people are saying

No recommendation phrase was found in the indexed comments.

No classified warning is attached to this page. Read the discussions before treating silence as approval.

Also in these discussions

Mentioned in the same Hacker News threads. That is not proof they are substitutes.

This week on Hacker News

Nov 7–Nov 14 UTC · Direct repository links and separately labeled related project stories. Indexed through 11/14/2026, 1:49:46 PM UTC.

No direct repository links were found in the indexed HN discussions over the past seven days. Older discussions are available below.

Mentions over time

HN mentions by year8 dated mentions

Observed mentions: 2013-11-15 22:20:08 UTC to 2023-02-16 17:21:00 UTC.

0122013-01-01 00:00:00 UTC to 2014-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments20132014-01-01 00:00:00 UTC to 2015-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments2015-01-01 00:00:00 UTC to 2016-01-01 00:00:00 UTC (exclusive): 2 mentions; 0 submissions, 2 comments2016-01-01 00:00:00 UTC to 2017-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments2017-01-01 00:00:00 UTC to 2018-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments2018-01-01 00:00:00 UTC to 2019-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments20182019-01-01 00:00:00 UTC to 2020-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments2020-01-01 00:00:00 UTC to 2021-01-01 00:00:00 UTC (exclusive): 0 mentions; 0 submissions, 0 comments2021-01-01 00:00:00 UTC to 2022-01-01 00:00:00 UTC (exclusive): 2 mentions; 0 submissions, 2 comments2022-01-01 00:00:00 UTC to 2023-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments2023-01-01 00:00:00 UTC to 2024-01-01 00:00:00 UTC (exclusive): 1 mentions; 0 submissions, 1 comments2023

Counts come from the repository’s dated source evidence. Index cutoff: 2026-11-02 08:16:59 UTC.

View mention counts and date ranges
UTC ranges include their start and exclude their end. Select a period to filter the source evidence.
PeriodStart (UTC)End (exclusive, UTC)MentionsSubmissionsComments
20132013-01-01 00:00:00 UTC2014-01-01 00:00:00 UTC101
20142014-01-01 00:00:00 UTC2015-01-01 00:00:00 UTC101
20152015-01-01 00:00:00 UTC2016-01-01 00:00:00 UTC202
20162016-01-01 00:00:00 UTC2017-01-01 00:00:00 UTC000
20172017-01-01 00:00:00 UTC2018-01-01 00:00:00 UTC000
20182018-01-01 00:00:00 UTC2019-01-01 00:00:00 UTC000
20192019-01-01 00:00:00 UTC2020-01-01 00:00:00 UTC000
20202020-01-01 00:00:00 UTC2021-01-01 00:00:00 UTC000
20212021-01-01 00:00:00 UTC2022-01-01 00:00:00 UTC202
20222022-01-01 00:00:00 UTC2023-01-01 00:00:00 UTC101
20232023-01-01 00:00:00 UTC2024-01-01 00:00:00 UTC101

What Hacker News says

8 sources
AltruisticGapHN·Feb 16, 2023
You should use stylelint anyway and then you can set `max-nesting-depth` https://stylelint.io/user-guide/rules/max-nesting-depth/ I mean, these days almost every JS developer use some kind of linter - why would you not use a linter for CSS? Literally nothing to lose since you can set the rules as relaxed as you want. PS: I set it to 3 - Using good convention like SuitCSS I have never found I needed more nesting. Usually you think about a problem and find a simpler way to do it. https://github.com/suitcss/suit/blob/master/doc/naming-conve... TLDR If you use any of the good practices for CSS such as BEM or BEM-like you don't have lots of nesting anyway. And I like how the article mentions as an example `ul article ul` and how to solve it by adding a symbol :is() to be able to nest, and it's literally the one thing you don't want to do anyw
Read the rest
ay, which is a selector like `ul article ul` (as per BEM methodology). Instead `.list .article .article-list` as a veyr poor example doesn´t need the special "fix" the article mentions.
In WebKit Supports Nested CSS
AltruisticGapHN·Jan 13, 2022
This is actually super bad practice. I really dislike scoped css. When I see devs using scoped css the class names always end up like `.box` or `.name`. Having to think about classnames and writing Sass makes me much more aware of the structure of the components I'm styling. Also scoped CSS kinda makes you skip the steps of thinking about your component in the bigger picture of your site, since you don't care about having meaningful and unique classnames, then you're much less inclined to think about good guidelines like OP's conventions. What does it matter? Since we can just put a `.box` in the scoped <style> and call it a day. Frankly I think only JS oriented devs like scoped CSS and frontend who love html/css and the challenges of architecturing good CSS don't egt any benefit out of styled components (since you're using atomic css lik
Read the rest
e Tailwind and/or BEM-style which always "scopes" classnames with the component name. In general any solid guidelines makes CSS instantly 10x better and that's all most projects needs, and it's often what most projects lack. SuitCSS works great with Vue in my experience, and can even be linted with postcss-bem-linter : https://github.com/suitcss/suit/blob/master/doc/naming-conve...
In A small guide for naming stuff in front-end code
NaN1352·Jul 30, 2021
Looks good. I’d really like to use this. Mainly I like that the author used same approach as I do whereby with careful use of low specificity, a custom "btn" class can be further customized just by adding TW classes (ie. not css specificity issues). My only gripe with this is that you should then use a clearly defined and separate naming convention for custom classes, for example SuitCSS is good: Not btn btn-large rounded-full But du-Btn du-Btn—-primary rounded-full ie. PascalCase component names, optional prefix (eg. du for daisy ui, because other apps also have their prefix see eg. Twitch and Algolia css) Bem conventions like double dash for modifier as opposed to a descendant https://github.com/suitcss/suit/blob/master/doc/naming-conve... So yeah I would like to be able at a glance to know where a class is from. "btn" is not from tailw
Read the rest
ind, but where is it from? What if my app uses multiple components, from third party etc? It’s not clear. Other than that This is better than Bootstrap approach even with custom classes, because you take care of css specificity problem (assuming you can add a tw class anywhere and override the builtin custom classes)... this is the middle way that nobody uses for whatever reason, the one that makes sense, but requires a good basic understanding of css specificity as well as setup stringent css linter Also using a convention would let you use a good linter on the custom selectors https://github.com/postcss/postcss-bem-linter
In DaisyUI – Tailwind CSS Components
AltruisticGapHN·Apr 2, 2021
What’s missing is postcss-bem-linter With it you can actually enforce bem like syntax, low specificity, so your scss plays well with the utility / composition methodology eg. tailwind but also custom utilities. https://github.com/postcss/postcss-bem-linter#preset-pattern... SuitCSS setting for postcssbemlinter is very good for vue/react components, less subjective imho than "block element", its "component root, descendant" instead. https://github.com/suitcss/suit/blob/master/doc/naming-conve... You declare the component for which the following css applies, eg /* @define UserAvatar */ , so the linting is far more useful. You’re linting the classnames to enforce consistent naming based on components, not just a stylistic choice. Unfortunately it takes some work to setup a strict stylelint config and properly configure postcssbemlinter, mayb
Read the rest
e i should post mine as a gist ... there is no premade config afaik, I think very few people used this kind of strict linting... tailwind became succesful and people saw it as the solution, and completely disregarded the middle way in the process as if writing custom css was inherently bad. Tbh many stylelint base rules seem pointless, like complaining about #ffddee should be written #fde..m who cares? Minifiers take care of this. Sadly postcssbemlinter + Suitcss setting is a bit buggy around tailwind directives like @apply, but it’s functional enough used it two years on a nuxt project, with a strict low specificity config it really helped me rethink how to simplify selectors and avoid css spaghetti. TLDR i feel like a thorough bem/bem-like linter is what’s missing from most projects still using scss, because i’ve seen some really awfull bem css, it’s not enough to have a guideline, it needs strict checking to improve css quality.
In Tools for Auditing CSS

MAKE YOURSELF AT HOME

A few shortcuts

/
Search the collection
?
Open this guide
Esc
Close dialogs and navigation

Your saved repositories and interests stay in this browser.