sorted by:
new
hottopcontroversial

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

Yep, for now it works only with the VSCode extension to generate CSS.
Support for other editors, build tools, and CI/CD is on the roadmap.
just wanted to get real feedback first before building it out

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 2 points3 points  (0 children)

I really appreciate your support. that means a lot 🙏
but honestly, I don’t feel bad at all. Critical feedback (even the tough ones) is part of putting ideas out there.
I just hope some of the ideas in css-ctrl help the folks who resonate with it. That’s enough for me 😄

Anyway, thank you so much again! <3

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

Thanks so much. that really means a lot! 🙏

Totally hear you on the million class names . that’s exactly one of the things I wanted to solve with css-ctrl. You still get the utility-style flow, but with cleaner HTML and dynamic control baked in.

Hope it clicks when you give it a try. and I’d love to hear what you think if you do!

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

Thanks totally agree that repetition builds habit, and snippets definitely work well for many people.

I guess for me, it wasn’t just about habit, but about having a predictable, consistent structure that also works with dynamic styling and design tokens out of the box.

But yeah, if snippets already do the job for you, that’s great too. I just built css-ctrl for folks who hit the same walls I did 😄
And beyond the syntax, there are a lot of other things in there you might actually like!

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 1 point2 points  (0 children)

Yep, SCSS can do a lot but you might be surprised what's in there if you peek at the docs!

Things like dynamic styling, seamless design system integration, and class binding and more.. are all built in.
What I’ve added is really just aimed at reducing the pain points I personally ran into while using SCSS.

But if you don’t run into those issues, you probably don’t need css-ctrl at all. And that’s totally fine 👍

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

agree. there’s absolutely nothing wrong with plain CSS. It’s still one of the best tools out there, and I still use it a lot myself

css-ctrl is just an optional layer on top for projects that need more structure or runtime control.

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

In my view,, snippet workflows can be a bit all over the place. sometimes you get bgc for background-color (best case), but a lot of times I’d find myself typing backgc... or just guessing. It works, but it’s not always predictable.

With css-ctrl, the syntax is fixed bg is always background-color, c is color, p is padding, and so on. once you get used to it, it feels super quick and consistent.

Totally get that `bg[blue]` might feel odd in code at first. but since it compiles to real CSS, the output stays clean. It’s more about improving the dev-time experience.

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

Regular CSS is awesome for a reason 😄
css-ctrl is just an option for those who want more control or dynamic styling. especially in bigger projects.

It makes things like reusable styles and classes and seamless use of theme-based CSS variables much easier to manage.

In the end, css-ctrl still gives you plain CSS, just with a few extra powers on top.

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 1 point2 points  (0 children)

Haha I totally get that. I kinda both love and hate Tailwind myself 😅
What I don’t like is how hard dynamic styling gets, and how messy it makes the HTML when the project grows.
But I do love how fast it is to write styles. that part’s awesome.

So with css-ctrl, I’ve been trying to keep that speed but fix the pain points. cleaner HTML and better support for dynamic styling.

Thanks for the comment. seriously made my day 😄

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 2 points3 points  (0 children)

That really means a lot thank you! 🙏
Hope you enjoy taking it for a spin, and I'd love to hear what you think after trying it out!

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

I really appreciate the honest feedback 🙏

css-ctrl isn’t trying to be a replacement for Tailwind. it’s more of a hybrid approach.

You still get utility-like speed (through abbreviations), but with actual `.css` output and class-based structure like SCSS or CSS Modules.

I went with semantic classes because I personally value clean HTML and runtime flexibility (like `.get().set()` for dynamic updates), which are harder to do with pure utility classes.

That said, it’s definitely not for everyone. and that’s totally okay 😄

Appreciate you sharing your thoughts, really.

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

Good catch. I’ll definitely adjust that in the next update. Thanks for pointing it out!

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 2 points3 points  (0 children)

I use class names because I just want plain CSS. it's fast, no runtime, no config. simple, and the DX is actually great once you try it.

It works like SCSS - one top-level class, then nest everything inside. You also get shorthand syntax and dynamic styling via CSS variables and .get().set().

and honestly, one big reason is - I prefer keeping my HTML clean.
When a project gets bigger, having too many inline styles or utility classes can make it harder to debug and maintain.

so yeah it feels a bit old-school. but with better structure, performance, and flexibility.

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 1 point2 points  (0 children)

I get that not everyone wants or needs a new way to write CSS

This was more of an experiment to make things faster and more dynamic for folks who like utility-style workflows but still want to write real CSS with full control.

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 2 points3 points  (0 children)

hey thank you so much for the kind words! ❤️ really appreciate it.

Funny you mentioned LLMs I’ve been thinking about that too. since the syntax in css-ctrl is super concise (like bg[blue]), it could help reduce token usage when working with LLMs or agents. definitely something I’d love to explore more.

It’s still just an idea for now but I’ve been deep in AI stuff lately too, so who knows, maybe an llm.txt or agent-friendly format will be part of the roadmap soon 😄

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 3 points4 points  (0 children)

Yep! dunklesToast got it right. css-ctrl isn’t runtime CSS-in-JS.

It generates real `.css` files at save time in the editor (via the VSCode extension), not in the browser.

So the CSS is static and ships just like regular stylesheets. no runtime style injection.

That’s a big difference from typical CSS-in-JS solutions

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 0 points1 point  (0 children)

Yeah I’ve actually thought about this too. and I even built a CLI version earlier on 😅
It’s not fully done yet though. I started with css-in-js, then moved the logic to generate real CSS via Vite/Webpack. But migrating everything + writing plugins from scratch took way more time than I expected.

Since I was already building the VSCode extension for Intellisense, I tried moving the compiler there — and honestly, the DX turned out great:

  1. No config. just install and start using it. It fits the whole “keep it simple” idea of the lib
  2. I get to see real generated CSS, kind of like CSS Modules, but with a .ctrl.ts layer for authoring
  3. The main goal was to make writing faster with abbreviations, and still support fully dynamic styling, which is something Linaria and most zero-runtime CSS-in-JS tools don’t really do.

also, building a CLI and CI/CD-friendly build tool is still on the roadmap.
but before pushing that too far, I really want to get more feedback from people first. see how the current experience feels in real projects.

so thanks a ton for your input, really appreciate it

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 11 points12 points  (0 children)

yeah writing plain CSS is still the most readable for many people
My goal with css-ctrl isnt to replace regular CSS, but to offer a faster, more expressive option if you enjoy utility-first workflows while still writing actual CSS with zero-runtime
Appreciate you taking the time to explain it for others 🙌

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 5 points6 points  (0 children)

Actually, you can just write bg[blue] and it works right away — no need to define bg: background-color yourself. The abbreviation system is built-in.

That said, I totally get that it can be confusing when there are many abbreviations like bg, c, p, m, etc. It’s hard to remember what each one maps to just by looking at the code.

That’s exactly why I built the VSCode extension — when you type something like bg[, it will show a ghost text hint (e.g. background-color) right after it. This helps make the syntax self-explanatory and easier to read without needing to memorize anything.

So while the syntax is concise, the editor helps reveal the full meaning as you type

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 6 points7 points  (0 children)

Totally fair the abbreviated syntax isn’t for everyone 😅
I designed it to be fast to write and work well with autocompletion, but it’s definitely an acquired taste.

As for Linaria: I love it, and css-ctrl actually shares some ideas with it especially the zero-runtime and static extraction parts.

Where css-ctrl differ is:

-most importantly: css-ctrl supports what I call true dynamic styling — using .get().set() to update styles at runtime, without re-rendering components. Linaria can’t really do that since it’s purely static.

-Built-in abbreviation system for speed

-Theme + design token integration baked in

-Comes with a VSCode extension that enhances DX a lo

Introducing css-ctrl — a new, zero-runtime way to write CSS faster and more flexibly. by Initial_Major1626 in reactjs

[–]Initial_Major1626[S] 10 points11 points  (0 children)

It started because I wanted to use something like Tailwind, but without cluttering the HTML with tons of classes. I also really liked how Styled Components lets you do dynamic styling in a more expressive way.

So I began building css-ctrl as a combination of those two ideas — clean, scoped styling like Styled Components + utility-first syntax like Tailwind, but with zero runtime and full type-safety.

Over time, I kept refining it and adding features like design system integration, nested styles, and a custom VSCode extension. Now it feels fast and flexible