Hacker News new | past | comments | ask | show | jobs | submit login
I hate CSS: how can I build UIs?
19 points by Dansvidania on Nov 5, 2023 | hide | past | favorite | 24 comments
Backend developer with wishes of becoming a "company of 1".

Trying to learn to develop simple UIs, but just keep hitting my head against CSS. It just does not click.

Is there something out there that will just let me put things on the screen, where I won't need to care about padding, margins, overflow etc?

I don't care if it's not very customisable. I just need something to test product ideas quickly.




>Trying to learn to develop simple UIs, but just keep hitting my head against CSS. It just does not click.

What is there to click? Start doing it and you'll get in a few weeks time.

In 2023 there has never been an easier time for CSS. Back 10 years ago, all kinds of hacks (floats, negative margins, etc) were needed. Now it's 99% smooth sailing.


CSS is better than it was, but it's still a mountain of hacks on top of hacks, needing to conform to an HTML that was and is still largely designed for blog-like documents, not multi-screen, responsive app UIs.

Something as common as a combobox* (a textbox + dropdown, ideally with autocomplete) is still a pain to implement, requiring understanding positioning, anchoring, z-indices, scrollbars (and how they're different across operating systems), media queries, word-wrapping, box sizing, etc. And that's just the CSS side.

On the HTML and JS sides there's dynamic loading from the server (and what to do with clientside state in the meantime, loading indicators, etc.), accessibility, focus locking, blah blah.

Meanwhile, like 15 years ago that was a drag-and-drop WinForms control in Visual Studio.

It's "99% smooth sailing" if you work in it day and in day out, maybe, and are aware of all its quirks. But easy to learn it is not...

--------------

* If you want to see some of the complexity, take a look at a published combobox component like MUI's: https://mui.com/material-ui/react-autocomplete/#combo-box

Basic usage just requires a few lines of React, but the options and different behaviors are pretty complex, both in JS and in CSS. You can of course write something like this from scratch, it's just a lot more work than, say, a blog post.


>Something as common as a combobox (a textbox + dropdown, ideally with autocomplete) is still a pain to implement, requiring understanding positioning, anchoring, z-indices, scrollbars (and how they're different across operating systems), media queries, word-wrapping, box sizing, etc. And that's just the CSS side.*

Or you can just use one of the 20000 available such components. A combobox is a pain to implement in native code without a GUI library too.


It very much is not. One example: to prevent your flex container with an height from expanding to more than that height, you need to set the min-height to 0. There is surely a good reason for that (I know there is, and I don't care why it is technically necessary), but this means that to use a very modern layout mechanism (flex) in a way that makes sense for the user (e.g. you want an app that is limited to the height of the page) you need to use another css rule that doesn't make apparent sense for a reason that you can understand only if you have a deep grasp on CSS in its entirety.


Tailwind with Shadcn/Ui or similar. Then borrow from other tailwind examples as needed, flowbite, tailwindui etc.

It is what I do. I end up with a modern looking site that is clean and doesn’t win any design awards. But I can focus on functionality.


If you are looking for a pragmatic solution, Tailwind can help you move faster. You still need to know about CSS tho, but you can learn along the way.

Steps:

Go through Tailwind getting started docs.

Buy Tailwind UI.

Copy/paste a layout and wire it with the backend.

Go through Tailwind UI components, pick whatever you want to display, modify as necessary.

Learn along the way.


I'm terrible with design, but what I went with was Tailwind + commercial TailwindUI library, which was more than worth the money. Got many compliments on my app's UI, which is funny considering how non-intuitive I find design to be.


this sounds interesting. Will look into it. Thanks


* It takes practice.

* Stop thinking in terms of classes/composition/modules. Stop crying about how hard life is, putting text to screen, and making excuses that somebody or some framework isn’t doing it for you. Get your head right.

* First, get cozy with the DOM. It’s a tree model, like a file system. This is the compile target of the browser. If this a bridge too far then thrown up your hands and just give up.

* Second, most, but not all of, CSS properties cascade down the tree. Practice will make this knowledge muscle memory.

* Third, learn the box model. This is tiny and should become second nature. Super tiny, so no excuses here.

That’s it. Really. Again, if this is a bridge too far maybe rapid experimentation in the browser is something you should out source at 6 figures or you could just spend a week learning it.


ok


We all kinda hate it but if you want to build UIs on the web you probably have to learn it. Start with mastering flexboxes

https://flexboxfroggy.com/

After that maybe allow yourself to look into something like cross platform flutter. https://docs.flutter.dev/ui/layout

That and the other native stuff (ios, android, the 10 windows layout languages) is not really any easier. UIs are tough to do well.


Today, I think it's also possible to work in higher levels and not need to know the ins and outs of CSS as much anymore. They're more "nice-to-haves" rather than "must-haves", and you can usually Google/StackOverflow your way out of rabbit holes as you encounter them, not needing to learn all of it at once beforehand.

I'm a frontend dev who grew up with CSS, but some of my coworkers started after that era and still contribute valuable work. A lot of it is in higher levels of abstraction now, such as component libraries (whether built in-house or third-party or, often, a forked/extended version of an open-source one). The CSS is already mostly defined for you by these systems and for the most part they're fine.

Yes, your UIs end up looking a bit generic, like the modern version of "just another Bootstrap page", but I'd argue this is a good thing: that FE devs can now spend time building business logic and user flows instead of (sigh) centering divs across three browsers.


https://mantine.dev - they have a TypeScript template ready


+1 We use it for https://pinggy.io


What is your backend language? For Java there a quite some frameworks that let you do a server-side rendered app with a comprehensive set of UI components where you don't need to worry too much about styling (wicket, vaadin)

Or you just write HTML and use a classless css framework. I think holiday.css and mvp.css are both quite nice starters. And the beauty of it: you can change them with a single line (since you don't litter your markup with framework specific classes all over)

Or you try to wire up your APIs with some low-code ui builder.

Or, you sit down and read a proper book (or start with MDN), do some exercises and learn CSS. It is to stay in the web platform for quite a while, so it might pay of fast.


classless frameworks are exactly what I was looking for, thanks


Agreed, find a class-less framework to start, so that you focus on just the HTML, semantic structure first. Here's a couple of lists of such frameworks:

https://github.com/troxler/awesome-css-frameworks#class-less

https://github.com/dohliam/dropin-minimal-css

Personally, I like simple.css (https://github.com/kevquirk/simple.css)


UIs are complicated.

Don’t build one, buy one.

UI kits exist for most css frameworks - from bootstrap to tailwindcss to material design etc.

I recommend bootstrap as it is one of the most popular ones and you’ll be able to find most components available for it.


I hate CSS too. NiceGUI is something to try

https://nicegui.io/


> I don't care if it's not very customisable. I just need something to test product ideas quickly.

Take a look at the bootstrap examples: https://getbootstrap.com/docs/5.3/examples/

Find one that is roughly what you want or close to it and customize it until it fits.


I’m a backend dev who has gone through this journey. I’ve looked at everything. I don’t want to do design, but I want it stuff to look reasonable. Six months ago I probably would have said “learn react and use ChakraUI” today I will say “learn react and use park UI components”.


Tabler is really good for quick dashboard-style app prototyping

https://tabler.io/preview


Flutter - no css needed. With flutter, everything is a hierarchy of widgets in a widget tree. Widgets can have styling properties.


Are you cool with JS frameworks?

If so, you can use a higher level of abstraction that takes care of the CSS for you. If you just want to mock something up, you can use a pre-built UI system / component framework and just put together UIs declaratively, without having to worry about the underlying CSS or HTML at all. Examples include https://mui.com/ and https://chakra-ui.com/ and https://ant.design/

Edit: MUI's template selection is awesome: https://mui.com/store/#populars Just choose one that's roughly what you need, and you can one-click deploy it (to Vecel or whatever) and then hook up each page to your real APIs as you need to. This gives you a very good starting place where the basic user flows and styling are all taken care of, and you can just make small tweaks as needed.

Really easy to put together a quick UI that way. (As a frontend dev, this is how I prefer to put together UIs whenever I can.)

----------------------------

MUI also has a low-code dashboard builder: https://mui.com/toolpad/

And Vercel (creators of Next.js) is betaing an AI generated UI: https://vercel.com/blog/announcing-v0-generative-ui

Or https://www.builder.io/

----------------------------

If you don't want to use a JS framework (and I don't blame you), Tailwind is the modern version of simple declarative UIs, but it's lower-level than the previous option. https://tailwindcss.com/

Bootstrap is still around too: https://getbootstrap.com/

Lesser known options:

https://semantic-ui.com/

https://get.foundation/

https://opensource.adobe.com/spectrum-css/ or https://opensource.adobe.com/spectrum-web-components/




Guidelines | FAQ | Lists | API | Security | Legal | Apply to YC | Contact

Search: