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. Learn more ā
Top 6 critical-css Open-Source Projects
-
SurveyJS
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-starter
this is my gulp starter template for tailwind that implements rtl support, jit mode, tree-shaking, dart-sass mixins and functions, es6 helper functions, and more out of the box
Project mention: Enhance WASM: Back End Agnostic SSR for Web Components | news.ycombinator.com | 2024-04-11If the link element is placed inside of the shadow DOM, then it's not render blocking and you will experience a flash of unstyled content. That's what the lit docs are referring to.
If you place the link element inside the head of your document, then it is render blocking, which means the browser has to make two round trips to the server if the CSS file isn't in the cache before it render (one to download the HTML file, and then another after it discovers your link element, and has to download the corresponding CSS file).
> The best from both worlds is to embed a lightweight basic CSS stylesheet inline and the rest in cache-able external CSS files.
This is the absolute optimal way of doing it. You would have to analyze your styles to see which styles are applied to elements above the fold, then extract them and put them in an inline style tag. The rest of the styles would have to be downloaded via a link tag, but you'd have to place the link tag at the very end of the HTML body tag to prevent the browser from blocking as soon as it encounters the link element or alternatively use JavaScript to add the link element after the page has been rendered. There are tools to automate this for static sites [1], but doing this for dynamically generated HTML is kind of a pain, and I've found that browsers parse CSS so quickly that the overhead of just inlining it all is very low in many cases.
[1] https://github.com/addyosmani/critical
Project mention: Show HN: Jampack ā Optimizes static websites as a post-processing step | news.ycombinator.com | 2024-03-25I'm interested in the notion of identifying "critical" CSS that should be inlined rather than live in its own stylesheet.
I was hoping there was some principled way of identifying critical and non-critical CSS (e.g. user interaction effects like :hover would always be considered non-critical), but it looks like the library it's using just tries to render your page and do a best-effort detection on which rules are considered critical, which is a little unsatisfying: https://github.com/GoogleChromeLabs/critters
Nice! We copied StyleX's "type-safe extensions" in Truss [1] so things like `` are allowed (setting margin is fine) while disallowing `` (anything "not margin") that would mess up the components internal impl details with a compile error.
That said, we don't actually use the feature that much, vs. higher-level logical props like ``.
I know we're supposed to use build-time CSS-in-JS these days, but afaiu they don't support the rare-but-handy "just spread together ~4-5 different object literals from ~random different conditionals + props", i.e. intermixing styles some inside the component + outside the component, which emotion handles really well.
Basically this [2]. StyleX says it does "cross-file styles"...but can it support that? I kinda assume not, but I'm not sure.
[1]: https://github.com/homebound-team/truss#xstyles--xss-extensi...
[2]: https://github.com/homebound-team/beam/blob/main/src/compone...
critical-css related posts
- Enhance WASM: Back End Agnostic SSR for Web Components
- Show HN: Jampack ā Optimizes static websites as a post-processing step
- Critical CSS and Next.js App Directory
- Remove CSS Styles and Apply Styles to All Elements
- Optimizing CSS Performance in Nuxt with Critters
- Frontend developers: stop moving things that Iām about to click on
- Critical ā Extract and Inline Critical-Path CSS in HTML Pages
-
A note from our sponsor - SurveyJS
surveyjs.io | 24 Apr 2024
Index
What are some of the best open-source critical-css projects? This list will help you:
Project | Stars | |
---|---|---|
1 | critical | 9,955 |
2 | critters | 3,374 |
3 | goober | 3,033 |
4 | Twelvety | 290 |
5 | truss | 31 |
6 | tailwind-starter | 3 |
Sponsored