I was wondering - no one seems to be able to write good CSS, so what if we had tool to generate CSS visually.
E.g. imagine workflow of UI design tools inside chrome browser (while inspecting specific element) or your favourite editor.

Might actually build something like that. Would definitely help with problems I face. 🤷🏻

P.S. Best tools and practices for building extensions like this?

Do you mean something like WebFlow, but just for CSS?

@neeno yup

@yehaaw I'd use it

Wordpress has tons of these, they all suck.

@Groggie Well, wordpress sucks in general. Now, what kind of problems did you encounter with them?
I have extensive experience with UI tools, so, hopefully, I can come up with something simple and valuable.

@neeno I was think of making npm package or chrome extension. Will make both variants and I’ll choose the best and open source it later.

We have hot reload, it won't teach people logic.

@SortOfTested What do you mean? I think, you’ve misunderstood something.

@SortOfTested I mean, we have IDE’s. They don’t teach people to code, but they do help quite a lot.

@yehaaw
We already have browser tool decomposition and hot reload tools. Its not really worth the effort to give people yet another tool.

Tldr
You can lead the horse to water, but it's not worth the effort to force it to drink

@SortOfTested

You’ve probably misunderstood my rant. I want to build a tool with which you could select specific item in your UI and change that element properties by configuring it through some kind of interface resembling UI/ UX design tools, such as, Adobe XD (e.g. right panel) and it would also generate CSS for the element you’ve selected (the one you’ve changed too).

Haven’t mentioned anything about hot reloading or decomposition.

If nobody can write good CSS in the first place, how will anyone be able to write a tool that writes good CSS?

@yehaaw
I don't see the benefit beyond what already exists. CSS is stupidly simple, and if tools like these can't help them, I don't see how a visual designer like photoshop is going to compensate for a lack of reasoning and CS fundamentals.

@Fast-Nop

At least it wouldn’t lead to !important tags with weird class names and bizarre properties out of which maybe only two are needed.

It’s way easier and less time consuming to make design with design tools rather then writing CSS and maintaining it. I want to help with that as much as I can.

@SortOfTested

1. Photoshop is overkill.
2. Adobe XD ≠ Photoshop.
3. I think that such tool would cause less time consumption writing huge amounts of CSS, if you think it wouldn’t, then it’s your opinion, which I’m not gonna change, mostly, because I don’t care.
4. You’re right. Dev’s, especially front-end should know how to write decent CSS. Not arguing about that.

@yehaaw That's a problem specifically with CSS frameworks like Bootcrap (and all others) because they are based on a gross misunderstanding of what CSS is even about. Don't use that shit.

+ imagine “code preview” part somewhere at the bottom.

Oh, and remember those times you’ve written CSS inside dev tools and the pain copying and formatting the code?

Whuuuoosh, painful.

Listen 👂, people, if you don’t agree, it’s fine by me (it’s not, I’m pissed), but, better of all, tell me what should I be aware of, should try to avoid or fix.

Thanks!

@SortOfTested Less clicks and writing should lead to lesser time consumption.

My method is to write the CSS for each element in exactly one place, with selectors as restrictive as possible and extract classes when I notice that I reuse something a lot or when the similarity is visually apparent. This way the unique, special and completely backwards selector+specificity-cascade logic of css where everything acts on everything doesn't punch me in the face when I try to isolate parts of the application. If you can automate specifying elements with very strict selectors (in relation to the component root) and suggesting extractable classes, I'll be happy.

Who writes css in their inspector anymore without it being just a quick test? Hot reload has done away with most of that.

@junon People with small or single monitors and those who can’t afford to wait for a reload.

Your idea sounds like a viable replacement for hot reload. It's faster to manipulate a page via browser than an editor with hot reload.
But I think it will be more better if the changes from the browser can reflect in the original code rather than generate a stylesheet.

@GiddyNaya Yes, that would be the best solution

@GiddyNaya But in this case, tell me if I’m wrong, but I would need access to read and write into local machine in which case I would have to develop native application.
So for the MVP version, i’ll skip this feature for time sake.

@yehaaw Yep! You're right.
You'll need a native app for writing the updates and possibly a browser extension to push the changes.
Here is a guide for possible implementation (https://developer.mozilla.org/en-US...)

The problem with such tools is they never understand your intention and generate the most complicated unmaintainable source file you can see. And now you are locked into that generator.

@GiddyNaya Thanks, will look into it!

@aviophile I would want it to work with already defined class names. Imagine devtools style tab, but with sliders and fields instead of css code.

@aviophile no gibberish css code

@GiddyNaya Chrome used to support this and it was AWFUL. Not sure if it still does, but it ended up not working well at all.

@junon Didn’t know that. Well, I’ll try to do better. Do you remember how that feature was called so I could google it?

@yehaaw It didn't have a flashy name, it was just that you could load in source files, edit them and then save them after you edited styles.

Honestly I just want a real time preview of the layout with everything colored and labeled nicely, combined with an efficient search tool(e.g. like TailwindCSS docs but directly in the editor).

Visual editors for UI are usually just painful and in the end you always have to fix half of it in the code anyways.

No WYSIWIG can make CSS simpler than just writing that shit.

My fucking 8 year old can write CSS.