Create 816 - Why Your CSS Sucks.md (#1790)

shows/816 - Why Your CSS Sucks.md

@@ -0,0 +1,37 @@
+---
+number: 816
+title: Why Your CSS Sucks
+date: 1725274800000
+url: https://traffic.libsyn.com/syntax/Syntax_-_816.mp3
+youtube_url: https://www.youtube.com/watch?v=NwX9uPWs2t0
+---
+
+Scott and Wes break down why your CSS might suck—from misusing specificity to not leveraging CSS variables. Tune in as they dive into common pitfalls that are making your stylesheets a hot mess.
+
+### Show Notes
+
+* **[00:00](#t=00:00)** Welcome to Syntax!
+* **[00:33](#t=00:33)** [Breakdancing](https://olympics.com/en/paris-2024/sports/breaking) in the Olympics.
+* **[05:29](#t=05:29)** Brought to you by [Sentry.io](https://sentry.io/syntax).
+* **[05:44](#t=05:44)** Why your CSS sucks.
+* **[07:01](#t=07:01)** You’re styling the wrong element.
+* **[11:01](#t=11:01)** Nesting too deep.
+* **[12:37](#t=12:37)** You don’t understand specificity.
+* **[14:56](#t=14:56)** Your classes don’t use a system.
+* **[16:24](#t=16:24)** You’re using values instead of CSS vars.
+* **[20:16](#t=20:16)** You don’t understand block vs inline vs inline-block.
+    * [CSS Logical Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values)
+* **[21:16](#t=21:16)** You aren’t using the right tool for the job.
+    * [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox), [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).
+* **[24:15](#t=24:15)** You’re setting the value in too many places.
+* **[24:31](#t=24:31)** You’re scoping to tightly or not tightly enough.
+
+### Hit us up on Socials!
+
+Syntax: [X](https://twitter.com/syntaxfm) [Instagram](https://www.instagram.com/syntax_fm/) [Tiktok](https://www.tiktok.com/@syntaxfm) [LinkedIn](https://www.linkedin.com/company/96077407/admin/feed/posts/) [Threads](https://www.threads.net/@syntax_fm)
+
+Wes: [X](https://twitter.com/wesbos) [Instagram](https://www.instagram.com/wesbos/) [Tiktok](https://www.tiktok.com/@wesbos) [LinkedIn](https://www.linkedin.com/in/wesbos/) [Threads](https://www.threads.net/@wesbos)
+
+Scott: [X](https://twitter.com/stolinski) [Instagram](https://www.instagram.com/stolinski/) [Tiktok](https://www.tiktok.com/@stolinski) [LinkedIn](https://www.linkedin.com/in/stolinski/) [Threads](https://www.threads.net/@stolinski)
+
+Randy: [X](https://twitter.com/randyrektor) [Instagram](https://www.instagram.com/randyrektor/) [YouTube](https://www.youtube.com/@randyrektor) [Threads](https://www.threads.net/@randyrektor)