Ask HN: How to bypass learning CSS?

CSS doesn't have to be boring. Some people really like using it.

If you don't want to use css, your choices are pretty much the following:

- use unstyled html

- use a component library (although any customization is going to require css)

- use a framework that has utility classes. Again it's hard to imagine never writing a line of css.

Honestly, css is a fundamental web technology. If you want to build for the web you're going to have to learn it

If you are ok to pay for not learning CSS I suggest you to take a look at TailwindUI where there are a lot of screens already created.

Yes. Just use a framework like bootstrap to build your mvp. Then you'll need to learn a bit of bootstrap of course but it's really simple after you understand the basic concepts (layout, grid, nav etc).

If your mvp takes off you'll hire a designer to convert your bootstrap design to a professional one. Also notice that because bootstrap is so popular it would be very easy for a designer to build upon the bootstrap css classes.

> I'm simply dreading CSS

What’s the problem?

The best way is to hire a front end designer that has done the learning for you.

Bulma or bootstrap or pay someone to do it for you. Honestly, though, try to shake the idea that learning anything is dreadful. Whether it’s css, JavaScript, or quantum physics, learn as much as you can about everything you can. Then, if you need help with your css you can know what it’s worth to you to pay someone else to do it.

There is a library called MVP.css which has a solid set of rules on the semantic html tags. Could get you far enough but positioning / flex box will be needed.

frameworks as all other mentioned but dont expect it to solve all your problems though eventually you will have to learn abit if you are doing it solo, i find doing it after a heavy 'backend' session is refreshing, instantly seeing results can be very nice when other stuff gets hard.

Water.css and pinegrow could be options for you, but as others have pointed out its best to just embrace learning css or pay someone to do it for you.

Bootstrap and tailwind would be my other recommendations as they’re well documented and pragmatic.

I would recommend Fomantic UI https://fomantic-ui.com/ (active community fork of Semantic UI) + Semantic UI React https://react.semantic-ui.com/ (which is a React wrapper over Semantic UI, but works with Fomantic UI as well). Almost no CSS writing is necessary, customizability of the React components via props should be enough for MVP and even further.

If you don't want anything bespoke then there are lots of UI libraries around - Tailwind, Bootstrap, Chakra, Fluent, etc.

If you need anything more custom then you have no choice besides diving into HTML and CSS (getting the HTML right makes the CSS much easier). Or pay someone.

I recommend learning it. I never did and I think it stunted me. The few times I did need to go deep with something, it was actually quite intuitive, interesting, and powerful. But I think I ended up spending so much time working around things just because I didn't know what I was doing, that it would have been more efficient just to sit down and learn it at the beginning.

Try to get the preconception that it's boring grunt work out of your head and just dedicate some time to learn it. You'll be much happier later.

Do start with a framework though.

Dreading CSS? But CSS is awesome! [1]

On a serious note, yes, CSS can indeed be dreadful. I learnt CSS back in 2001 when geocities.com/username was the equivalent of today's username.github.io. The web was simpler and wacky. My approach back then was to design simple websites and then tweak it little by little by adding CSS. Much like learning shell scripting, I think it takes a lot of practice to become fluent in CSS. After encountering a lot of weird issues and learning to resolve them or work around them, one learns to be able to write good CSS quickly that does what is desired while avoiding all its surprises and pitfalls.

My biggest learning moments while learning CSS were also some of the most frustrating moments, e.g., very long words breaking float containment, floats breaking div containment, etc. and then searching blogs on the web (Stack Overflow did not exist yet) to find a fix! A typical fix would look like black magic, e.g., add 'overflow: hidden' for Firefox and IE7, add another 'display: block' for IE6, and hope for the best!

After writing HTML and CSS in this manner like a caveman for those 4 years initially, Firebug arrived in 2005. Firebug, the precursor to today's integrated developer tools, was a game changer! I no longer needed to set backgrounds and borders around every HTML element to figure out how they were rendered and what was breaking. Firebug allowed me to inspect the box model and reason about it with ease. Using the browser developer tools and becoming fluent with the CSS box model is critical to learning CSS these days, I think. In fact, these days, I just open the browser developer tools and edit the styles on the fly to see the results live without having to refresh or rebuild the page. Learning CSS has become easier than before, although not as easy as I would like.

After about two decades of making fancy layouts with CSS, I have now gone back to making really simple web pages that just show a header, the content, and a footer. It feels much calmer this way! Yes, I know that MVPs these days are not built like this anymore. Nevertheless, starting simple and doing simple tweaks, at least for a hobby project could be a good way to learn CSS in my opinion!

[1] https://i.imgur.com/9qzBYbH.jpeg

Learn flex box for positioning. Learn how z indexes and stacking order works Learn about css specificity

Don't use a library that will conflict with the styles

You should be good with these

Flexbox has made stuff a lot easier for me. I had this bookmarked while learning : https://css-tricks.com/snippets/css/a-guide-to-flexbox/

CSS doesn't have to be annoying or boring. Understand the Box Model https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_...

I find that a lot of front end developers don't really understand the box model and everything they do is just learned patterns.

Once you understand how things are laid out then it becomes so much more fun and easy.

Now the hard part is the actual design but I wouldn't say that's your job as a developer unless you want to be a designer. Some of the funnest front end work I've done is taking someone's Sketch file and implementing it in CSS. Seeing things come together into an interactive web page.

If you don't want to write CSS or do any design then use a component library like bootstrap, tailwind, etc. Especially for an MVP.

But if you want something more bespoke then get someone to design a web page with documentation of all the sizing like font sizes, margins, padding etc. And learn to implement that, it's a lot easier than many people think. Especially now that you don't need to care about IE.

I am also in the position of not loving CSS but having to use it here and there when I build my own thing. However I'd say that the more I use it the more tolerable it becomes, and I have even begun liking certain aspects of it. The main resources I keep coming back to are:

1. https://css-tricks.com/snippets/css/complete-guide-grid/

2. https://css-tricks.com/snippets/css/a-guide-to-flexbox/

3. Googling 'css <thing I want to do>' because there is just too much syntax for an occasional user to commit all of it to memory.

To learn just enough CSS for your MVP:

Understand the box model

Understand flex box basics

Understand padding and margin

Experiment with laying out simple elements on a single HTML file (where you can iterate more quickly), then when you have what you want, make those same changes in your React app

If you spend one hour on each of these, you may be surprised by how capable you’ve become. The rest, as others have said, you will pick up naturally as you work on your project.

asasasas

I don't think using bootstrap is a good idea if you don't know any css at all, some very easy things might work out, but there will be some issues, there always are. I remember a freelance gig I once had for a saas company, they didn't have a mobile site at all, table designs, html generated server side via some clandestine php "framework"....I had to add * {border:1px solid redl} To even see what was happening, even the desktop view had max width 1200px I think. The whole CSS had to be done from scratch, so many server generated pages after submitting a post request had no or hard to trace CSS rules, often in the HTML. My point is, all this could have been prevented if proper css would have been used from the beginning. In the owners defense, the page was made around the release of the css2 standard. Just learn the basics, css today is not as bad as it used to be, now that browsers are somewhat compatible and and responsive design is simplified with things like flexbox, it's not that hard , especially for a MVP. Frameworks are ok, until something apparently unpredictable happens or breaks, just like many things didn't work as intended when people with no JS knowledge jumped right on jQuery.

You can't.

(Someone needed to tell them.)

Good question! I hear it all the time.

This is also like saying. I want to learn how to build an app, is there any way to bypass the annoying part of having a database.

And like saying, is there anyway to bypass writing a front-end user interface.

It’s part of the stack! Just learn it, like you learned everything else. Once you learn CSS and the box model. You will find that it is easier than every other concept in web development.

I make MVPs in the style of GMail, Google Calendar, etc, using Google’s ‘Material Design’ style.

I bolt together pre-made components.

No CSS required if you’re just bolting together standard components like lists, buttons, menus, and images with accompanying text cards.

My favourite implementation of this is Callstack’s Paper because I can use it for websites and apps.

Demo:

https://react-native-web-paper-example.netlify.app/

Getting started:

  git clone git@github.com:callstack/react-native-paper.git

  yarn bootstrap

  yarn example web

Here's what I do: every time someone (usually a junior though not always) complains about CSS being boring or not worth their precious time, I tell them to come up with a solution to render all his boring stuff that no developer worth their salt would do because CSS is for the noobs, right?

I tell them they can use 2d canvas, pixijs, threejs or anything that would work in a browser. Amusingly, I haven't had a single taker in a decade