How to bypass learning CSS?

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.

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.

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.

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 ' because there is just too much syntax for an occasional user to commit all of it to memory.

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

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/

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?

You don't, have a nice day.