CSS has evolved rapidly over the last 10 years. In an effort to stay abreast on some of the new fancy things css can do, I've created this practic...
For further actions, you may consider blocking this person and/or reporting abuse
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!
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
styleattribute.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.
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??
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 😉
That's a fair point. This video compares and contrasts semantic and atomic css patterns. Maybe give it a watch!
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.
I've only played with Tachyons. I'll need to invest a bit more time there sounds like
I'm really liking conic gradients, and the possibilities of CSS Houdini! How bout you?
Houdini looks great! I love it!
Unfortunately, its development is not really swift... It's taking years, really. I'd like to see something more for the other modules: layout, animations, fonts, parsing...
And much wider adoption, of course.
I swear by tailwind!
It's literally made me go from being afraid to touch CSS to being happy to get to work on my personal designs :)
It is fancy! I actually started to create my own css framework based off of css grid (wilsmex.github.io/gridwork/) and realized I was basically re-creating tailwind with what I was wanting to do... :)
Yeah, still a ways out!
Empezando a amar css / gracias.
Asi asi y de nada!