Hacker News new | past | comments | ask | show | jobs | submit login
Ask HN: How to bypass learning CSS?
53 points by the_noob on Sept 12, 2021 | hide | past | favorite | 54 comments
I have started building an MVP by myself for a project that I've been exploring for a while . To make this project happen I picked up enough of NodeJS,React and GraphQL in order for me to be able to build it , but now I have just started to design it and I'm simply dreading CSS. Is there any way I could bypass this boring and annoying part of building the MVP? Thank you!



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.


Just reading the first section, I'm already annoyed and frustrated. It does the same thing as every CSS explanation I've ever read of explaining what but not why. Things that confuse me immediately:

* The article starts by saying there are two types of boxes. OK. Boxes have an inner and an outer display type. Already confused. Is this in addition to the two previously mentioned types? Does a box have the following: (type, inner display type, outer display type)? "First, we will explain what we mean by block box and inline box". Err what, you haven't mentioned those yet. Are they a type, an inner display type, an outer display type, or all of the above? "If a box has an outer display type of block, it will behave in the following ways". So block/inline are types of inner/outer display types? What is going on?

* Why does there need to be two distinct types of element, which seem to be randomly applied to different elements (divs are block, spans are inline)?

* Why are they called "block" and "inline" when those words don't seem to relate to their behaviour at all?

* Why does inline silently ignore width and height?

* What is an "inline direction"

* What does breaking onto a newline mean, and why do I care? Why not show a diagram?

Then my ADHD brain loses interest and concedes I will never understand.


Copy and paste your bullet points into Google and you’re 99.5% of the way to getting concise answers to your questions.

“Work was hard so I quit.” isn’t going to generate much sympathy from the people who put in the effort to learn this stuff.

If you really want to understand CSS, read “CSS: The Definitive Guide” cover to cover. I’m not kidding. Take notes and write code using every single property. Read the Flexbox and Grid chapters TWICE.

Oh, and if you’re upset about the distinction between inline and block elements just wait until you hear about the inline-block display value.. Which, coincidentally, will answer your question about inline heights.

Every browser on the planet makes use of CSS. Every non-trivial website uses CSS. It works. It’s not a toy. Approach it as you would any other advanced technology.


Combat the ADHD by trying it, fidgeting with things and see what happens. That's one nice thing about css is you can test things out and get immediate feedback. You'll learn more from fifteen minutes of directed playing around with it than from any amount of reading.

Don't let yourself create a mental barrier there. Just force yourself to spend a few minutes every day trying new things and you'll be fairly fluent in a couple weeks. It should be pretty painless and it's a skill that will be useful for the foreseeable future.


Well said. It took me years to understand this. You don't need to understand every last detail in a book to get to work. I'm a great C and C++ programmer, but when it comes to web based applications I would say I'm merely better at knowing where to fidget with the code first, rather than knowing what's really going on.

Train yourself where the best places to massage the code are and most solutions can be found within minutes.


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.


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


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.


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.


Depending on browser support, there's a good likelihood just skipping a lot of these things for CSS grid could be a shortcut. As a bonus, gap for gutters is widely supported and takes away a lot of the headaches of float and flex-based grid systems.


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.


There's also https://tailkit.com/ which has 300+ components. I ended up doing a video review[0] of it a few months ago.

[0]: https://nickjanetakis.com/blog/reviewing-tailkit-300-tailwin...


Do they have screens or components? I tought they only have modular components that you can then integrate in your project - sort of like material or ant but a bit more complex. Am I wrong?


They have both — https://tailwindui.com/#product-marketing


See https://daisyui.com/ for quality free/open-source components based on Tailwind classes


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.


Although I considered myself good at CSS, but I won't recommend you just learn it like everybody else suggesting in this thread - just build your MVP and pick up things when necessary. Here is my recommendation:

1. You're talking of MVP so I assume the UI doesn't have to be glamorous. Most of the elements you are going to leverage could be UI libs like Material-UI[0] or Ant Design[1].

2. Then, other than components, sometimes you do need some CSS handle layout and such. My choice would be CSS frameworks like Tailwind[2]. Honestly, to make good use of Tailwind sometimes require good CSS skill, but I believe people could still try Adhoc problem-driven approaches - you'll learn things along the way.

In case CSS makes you wonder after the MVP, you could try to expand styles you have been using in Tailwind, to see what's the corresponding CSS is and you'll learn.

(There's also a macro version of Tailwind named twin.macro[3] which fits React better IMO.)

(Tailwind has their official UIs (not free) [4] but I never tried them, it might work for you if you don't care about UI)

[0] https://material-ui.com/ [1] https://ant.design/ [2] https://tailwindcss.com/ [3] https://github.com/ben-rogerson/twin.macro [4] https://tailwindui.com/


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 understand the struggle and agree with most of the posters here. Just take the time to learn CSS. Javascript, HTML, and CSS can't be avoided if you want a web project.

You get infinite choices on the server (choosing Javascript might seem like a good idea, but its probably going to be the one decision holding you back the most. Ruby (Rails) PHP (Laravel) or Python (Django) would actually probably speed up your development even though you need to learn a new language to use them) but when it comes to the browser its though 3 technologies.

Since you chose React, Material-UI is a great solution but Bootstrap works wonders too. These are CSS frameworks that give you lots of working widgets out of the box that you can just tweak.

Number one best piece of advice for noobie CSS development is to BE EXPLICIT. Write 1,000 more lines of CSS then you have to because you are not trying to be clever and use the cascading nature of css to its full advantage. Instead take every HTML component on your page and give it its own class like "p-tag-45" and then write the css for just that component. It will take you longer, but things will behave the way you want them to. And as you advance your knowledge you can start refactoring it with smarter css where smarter means your web page looks and behaves exactly the same with 200 lines of css instead of 600 lines of css.

Good luck! Most people fail to ship their project. Just get it done and ship it and you are already head above water.


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.


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.


When it comes to grid I just tend to use CSS grid generators (if you search them few will popup) and they produce great CSS grids without fail. I stopped using flexbox, because for most of the things proper set grid is enough. 3rd point is sufficient for all other css needs. I tried to learn css back then but after few attempts I will more or less forget things as I use most of them once or twice in the project.


Use a component library with a decent look and feel, and/or if you want some style choices without futzing with CSS/code at all use a component library like react-bootstrap[0] or reactstrap[1] and pick a Bootstrap theme from Bootswatch[2].

I do this at my company (which for whatever reason doesn't like to hire frontend specialists) and we mostly are able to avoid writing any CSS.

[0] https://react-bootstrap.github.io/

[1] https://reactstrap.github.io

[2] https://www.bootstrapcdn.com/bootswatch/


Use react-bootstrap. Nearly all of the styling is already done. If you can live with something with simple but tasteful styling, then react-bootstrap can do the trick.

As soon as you decide to make something custom, you will need to learn CSS and several other skills.


Learn it. It takes an afternoon to learn the modern foundations. Box model, flex box and CSS grid. That’s it. Google the rest as you come upon use cases.

Why has CSS been a constant on the web when we churn through everything else? Be curious.


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


It depends on the MVP specification and your budget.

If your MVP requires a good design with good UX, and you have the budget, someone else can do it for you.

If your MVP does not require a good design or good UX, you can just download some random example and use that.

Keep in mind that using CSS, creating a design and creating a good UX are not the same thing. You can create a terrible UX with a pretty design and lots of cool CSS... Just like you can create an amazing UX and design with minimal CSS.


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


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.


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


I understand... is there any way you can make CSS less boring?


Learn it bit by bit as you actually need it.

If you make stuff capable of graceful degradation (eg for older browsers) then you can give yourself some space and time for graceful and incremental CSS upgrades!

My CSS vocab is still I think very small (and I've a couple of big chunks coming that I want to understand) but it can be used like a scalpel: tiny uses of it can do good things.

I've been writing HTML since it was a thing (90s).


Boring is a matter of perspective I guess. I find coding out API endpoints, configuring infrastructure, and building database schema to be excruciatingly boring. But building a UI in the browser and watching it come together is extremely satisfying. Gaining a solid expertise with CSS is table stakes for a web developer IMO. You can raise your nose at it and say "that's not real programming so I don't care", but it's ultimately a part of the whole package and not being able to do it makes you weaker as a developer. You should be able to look at absolutely any design and recreate it perfectly.


You can try this site: https://cssbattle.dev/

You try to match the source image using css.

You can even find youtubers who compete. I find it pretty entertaining. It helped me get from being afraid of writing styles to enjoying it.


There are lots of things on the web that gamify aspects of css: FlexBox Froggies comes to mind.

I don't really see it as boring to begin with honestly. I like building UIs, so I don't think it's boring to learn to build UIs.


You can skip a lot of the dread by using a UI toolkit like TailwindCSS, Bulma, or others.

Watch some videos on how they are used and learn from them. Check this channel out:

https://www.youtube.com/c/TailwindLabs

But, if you want to be a web developer, sooner or later you'll have to grok CSS.


You don't know half of it. When done you will always find a user able to break everything with a different browser or version, settings, an extension, an outdated machine or odd screen size etc etc. IOW: Just make it in html and have someone tweak it where required. Focus on functionality. What does the user need? I mean really need.


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.


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/


I second this comment. The above tutorial and link is a very good reference, and I believe that flexbox these days is really the only thing you'd need to learn to position things with CSS. And other than positioning, I feel that CSS for styling is much simpler and straightforward.


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.


Thanks for the inputs guys ! Since I asked this question I already have learned a thing or two about flexbox & grid , yet I'm far from being confident in these. Thank you!


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.


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


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


You can't.

(Someone needed to tell them.)


Try to find some existing template of what you need. Also try tailwind.


Hire someone else to do it, then yes. Otherwise,no


Use bootstrap or tailwind. I also hate css.


Buy a prebuild theme from themeforest.net


> I'm simply dreading CSS

What’s the problem?


I guess that some things that "should be simple" are incredibly hard to figure out for beginners in CSS.

I like css, because it is just incredibly powerful, if you know how to use it. There are still some things that could really improve (css needs a "contains" selector that allows you to e.g. select paragraphs that contain an image, without selecting paragraphs that just contain text). Certain things that are common usecases (like centering a container on a page) are not straightforward in all cases etc.

That being said a lot has improved in the last


You don't, have a nice day.




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

Search: