Leveraging the powers of CSS

#css

--

Come hang out with other dev's in my Discord Community

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

I'm on some other places on the internet too!

If you'd like a behind the scenes and previews of what's coming up on my YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[joelpww]

I love the shade of 'magical thing called comments '

[adamandom]

"its hard to read"
my brother in christ have you seen what the html looks like without this

[TheRalic]

The main reason why I use GPT is to write comments after I'm done 😅 always forget to do them on the spot

[qmster]

My favorite part was when you called "atomic" css classes out for what they are: inline styles :D

[youngstellarobjects]

It would imho make more sense semantically to use `article > h2` instead of a class, and use a class like `lead` on that first paragraph.

[nitePhyyre]

"It's unreadable."
Yeah, ok. Because 45 lines of "lg-x md-50 md-45 bg-slate-dark-30 fg..." is clean.

[jammincoder]

Love it.

Also, I do think it's important to note that inline styling such as like Tailwind are best used with frameworks like React. Just style the components and reuse the styles instead of writing the inline styles over and over again.

[CirTap]

What, wait? **Comments? ** What kind of awesome concept is that?

[PrasanthKandhasamy]

Wait until you put another html in between.. design changes always.. it is very efficient but will become hard to maintain in the long run.. but other selectors mentioned in the video are very useful..

[felixranesberger]

For me using BEM Syntax to name my classes solves most of my problems. I think using a class for most of the stuff is alright, as long as you have a system for naming things.

[engineerlawalhamzatademola]

I prefer using class names most time to ensure that specificity only increase on purpose

[plusquare]

wait till you see tailwind combinators

[patricknelson]

But then (and I’ve had this happen): What if the editors don’t always want it? i.e. they’ll ask, rightfully “But why can’t this be optional?” and hence, we’re back to the age old programming conundrum: *Consistent Nomenclature* 😅 That said, this is just an example, and there are *tons* of situations where this combinator is super useful.

Now one thing I sorta wish we had: The _inverse_ of the adjacent sibling “+” combinator! i.e. Apply these styles to _me_ but only if it comes before another selector. Now that… would be 🔥.

[gizmostudios]

Level of burn (to Tailwind) and snark (to comments) I haven't experienced yet from Kevin :D But completely agree with writing for situational behaviour and relations over just naming everything!

[sahildas.]

nth-child() and ID's for the parent entered the chat

[DQime]

Any chance you'll make a video of the performance impact of selectors?
Like [target*="xyz"] etc.

[markojovanovic]

Yes, and variable naming isn't any better!

[AmitB]

This will be hard to maintain, it's best to still add some class that'll also describe and self-document that element instead of having to add comments for documentation in the CSS.

[bradyfractal]

With Svelte i never have to worry about classnames because css is automatically scoped to Components 😎

[ProtectedClassTest]

just wait until the client request to change the font size of one specific article.. then another... then another until it doesnt make sense anymore and you go back to the css naming limbo