DEV Community

Discussion on: CSS Is Hard - How do you learn to use and write CSS properly?

Collapse
 
ciel profile image
Ciel • Edited

I wouldn't say it's hard. I also wouldn't necessarily say it's different.

CSS does something that honestly very few other languages or grammars do as their sole role, so it can look obsequious when compared to the rest of the stack.

I would liken CSS to hard in the same way getting out of bed every day is hard. It's not really that difficult but we're all objectively terrible at it because we're exhausted.

I'm finding a lot of success with CSS modules and BEM.

Collapse
 
defiance profile image
Defiance Black

CSS does something that honestly very few other languages or grammars do as their sole role, so it can look obsequious when compared to the rest of the stack.

I like it for this reason. Its intricacies are deep, CSS animation is crazy.

I would liken CSS to hard in the same way getting out of bed every day is hard.

Yes.

It's been like learning anything else so far, RTFM and practice. You're spot on with this;

the bulk of our tutorials, memories, books, and old websites are just filled with deprecated information.

Some of the best articles I've come across are from 2011-2014.

Collapse
 
antjanus profile image
Antonin J. (they/them)

Some of the best articles I've come across are from 2011-2014.

So true! Namely, css-tricks has always been my go to.

Thread Thread
 
ciel profile image
Ciel • Edited

Well yes. Gems do exist. But we still have new sites telling people to load script tags in the <body> tag instead as well.

Thread Thread
 
antjanus profile image
Antonin J. (they/them)

I load my script tags in the body tag. What's wrong with that?

Thread Thread
 
defiance profile image
Defiance Black

I think the pendulum did a back-and-forth on that one.

I remember reading about how it was an awful thing to do because separation of concerns -- which I think lead to the abuse of classes.

Now I read about how inline CSS is useful to optimise first page load for AMP and other stacks.

Thread Thread
 
ciel profile image
Ciel • Edited

Putting script tags in your body tag means that it'll load based on the DOM and pretty much nothing else. It can quickly lead to race conditions.

If you need to ensure a script doesn't run until the DOM is ready, but aren't using a framework that loads things, you can add the defer property to your script tag in the head section.

There's some other reasons too, but in general it's definitely a code smell to investigate.

I would be happy to elaborate on it but I don't want to sound condescending.

Thread Thread
 
defiance profile image
Defiance Black

Would you make a post about it?

DEV needs more CSS.

Thread Thread
 
ciel profile image
Ciel

If I'm able to, I'll look into it, sure.