DEV Community

Discussion on: CSS in 2020 - A Practical Guide

Collapse
 
juanpprieto profile image
Juan P. Prieto • Edited

I started using Tachyons a couple of years ago and have never looked back.

Every-time, I dive into a project not using a modular framework a part of me dies.

So, If you are not yet on this camp, stop whatever your doing now, plough through the hazy beginning and enjoy the kool-aid.

The last time I experienced this, was when switching from AI to Sketch!

Collapse
 
wilsmex profile image
FollowAndrew

I've only played with Tachyons. I'll need to invest a bit more time there sounds like

Collapse
 
maxart2501 profile image
Massimo Artizzu

I love CSS but I loathe atomic CSS toolkits with a passion.

I'm a fan of the classic rule of having HTML for the content and CSS for the presentation. Atomic CSS basically puts the presentation in HTML, and to me it's just a little more convenient than writing everything in the style attribute.

I don't want to flood my markup with lengthy class attribute. I want to keep it as clean as possible. I want to see the content there. Atomic CSS fails me hard there.

Collapse
 
examosa profile image
Jules Amonith

That's a fair point. This video compares and contrasts semantic and atomic css patterns. Maybe give it a watch!

Thread Thread
 
maxart2501 profile image
Massimo Artizzu

I just have, thanks for the suggestion!
Sadly there's nothing new for me. I know the good points of atomic CSS (or utility-first CSS), but they haven't bought me. Maybe I'll write an article about it.

It's not like I'm completely against utility classes, actually. I've reached the conclusion that using a few is quite beneficial in terms of development velocity and maintainability. Like .uppercase, or .text-small. For the rest, I think there are better solutions.

Of course I will never despise those who prefer atomic CSS. They may be smart people moved by legitimate reasons, like in the video. But, as a developer with a healthy relation with CSS and its semantic approach, I believe the compromises that come from a utility-first toolkit are not worth it.

In the end my main goal is to have a markup the looks like the final example in this article of mine: even classes would be rarely used.

Collapse
 
wilsmex profile image
FollowAndrew

Good points. The one thing I haven't yet seen a deep discussion on is (although I hate the word) SEO. It'd be interesting to know if the rise of the utility-first css frameworks are having a negative impact on SEO (more markup to less content ratio) in Google. As the video liked by @juelo it seems there is a performance boost with utility first (when gzipped), but rankings??

Thread Thread
 
maxart2501 profile image
Massimo Artizzu

CSS classes don't affect SEO and won't do it in the foreseeable future. And there's a reason for that: sites that don't use semantic class names have never been penalized for that and changing that would have a huge impact. And backlash.

Although modern crawlers could potentially infer more meaning from CSS (it's not like Google doesn't have the capability), there's no reliable way to tell how much you can infer and even if it's not actually misleading. For example, what if a class has been removed from the stylesheets but not from the markup? Or if it's been completely overridden?

Moreover, there are frameworks that completely mangle class names when compiling the project. Google's homepage itself is a classic example of this!

The performance boost of atomic CSS is one of the main advantages, but hardly noticeable on average. CSS isn't normally what makes a page stutter or load slow 😉