[Philip-J-Fry]

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.

[bspammer]

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.

[miiiiiike]

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.

[daxfohl]

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.

[gompertz]

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.