Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Learn CSS

web.dev

Post reply on HN
Print view View original

191–196 of 196 posts

Re: Learn CSS

#191

Post by deergomoo »

nailer wrote: post #171
deergomoo wrote: post #136

Earlier quoted context omitted.

> Yes it does. Moving all styles into individual elements without reuse is copy and paste Tailwind all but assumes you will be using something that allows you to extract HTML into components, be that something like React or Vue, or classic partials in a server-side templating language like Twig. You reuse the entire component, rather than just the CSS, which IMO is far better aligned with how apps are actually built.…

You’re misunderstanding the relationship between components and styles. Login box and messages are separate components, but they share padding metrics, border styles, a palette, etc. Have you used tailwind before?

I use Tailwind almost exclusively these days.

My argument is that using the “mr-1 pl-2” utilities on both a login box and a message would be no more copy pasting than creating a stylesheet with “.login-box { margin-right: 0.25rem; padding-left: 0.5rem; }” and “.message { margin-right: 0.25rem; padding-left: 0.5rem; }”.

And if you’re suggesting that you would create a single CSS class with those properties to apply to both the login box and the message, then it’s my opinion that that is a broken abstraction that falls apart as soon as your designer asks if you can make the spacing in the login box a little looser.

Re: Learn CSS

#192

Post by goto11 »

magicalist wrote: post #87
goto11 wrote: post #33

Looks great! Small pet peeve regarding tutorials: When learning a new technology I don't care about the headaches people had 20 years ago. My first concern is how I use the technology and what it can do for me. The section about layout starts with: " In the early days of the web, designs more complex than a simple document were laid out with elements. Separating HTML from visual styles was made easier when CSS was wi…

> The section about layout starts with...This history lesson is not really relevant for newbies. so folks know what we're talking about: https://web.dev/learn/css/layout/#layout:-a-brief-history It's four (pretty short) sentences that give a small amount of context pretty quickly and then links to another resource if you want to know more. I'd agree with you if it were a page or two's worth of history, but there's no…

But there are many generations of cruft. Table-based layouts is just one thing, how about font-tags, quirks-mode-triggering doctypes, frames, float-based layouts, and so on. Each of these might by necessary to understand in some very specific cases of legacy code.

I'm just saying: Don't put this up front in a tutorial.

Don't explain GOTO before explaining if-else blocks.

Re: Learn CSS

#193

Post by MonaroVXR »

kklisura wrote: post #16
umut wrote: post #10

A viable alternative to all this is using tailwind, can't recommend it highly enough. When you pass the initial period where you feel like you're repeating yourself (1h max) it takes the nervousness out of your CSSing, it feels more like coding and less like schmoozing.. Just a happy user

Learning any CSS library is not alternative to learning CSS itself.

It's weird reading ycombinator and the persons above you says something else.

Re: Learn CSS

#194

Post by sodapopcan »

goto11 wrote: post #186
sodapopcan wrote: post #146

Earlier quoted context omitted.

I resent the "(ab)" in "(ab)use tables for layout"... it was all we had AND was still better at vertically centring things until Flexbox arrived!

Abuse only in the sense they were not designed for this purpose. Like people using to create margins. It is like using a screwdriver to knock in a nail because you don't have a hammer - better than nothing, but not what a screwdriver is designed for.

A table is an extension of a grid and therefore actually in the same ballpark as the proper tool for layout whereas using
to create margins is totally random (though perhaps someone could stretch an explanation).

It's of course pedantic to discuss all this now as those days are thankfully long gone :D

Re: Learn CSS

#195

Post by FractalHQ »

robertoandred wrote: post #142
NackerHughes wrote: post #116

Earlier quoted context omitted.

Sadly, the trivial CSS solutions are often not supported by some browsers that a lot of people use (apart from the obvious IE, Safari on both Mac and iOS is possibly the worst offender for this), making the godawful JavaScript solutions a tragic necessity.

lmao Safari is just fine

Safari is the bain of my existence and owes me money for the sheer amount of time I’ve had to invest in working around their god awful css and svg engines. PWA my a*.

Re: Learn CSS

#196

Post by ttroyr »

gkilmain wrote: post #144

I've essentially made my career with CSS. I've been hired solely because of my CSS skills. I am continually surprised when I interview engineers proficient in Angular / React / JS but they cannot even do a basic full page layout (think header, footer, and two adjacent content areas in the middle ). Anyone starting from scratch to try to get a career in web dev become great at CSS - its a niche no one seems to want to…

Ditto; my first career break into the web app development world came from a friend who is a really talented developer although he had never heard of flexbox. I quickly helped him fix a frustrating layout issue and he got me a job developing a React app for the government. I didn't know React at the time although I've learned a ton since. All because I spent years messing around with CSS.
Post reply on HN