<p class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about why people hate CSS, some common issues, and how you can level up.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "Prismic__Sponsor_9" name="Prismic__Sponsor_9"></a>Prismic - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> Prismic is a Headless CMS that makes it easy to build website pages as a set of components. Break pages into sections of components using React, Vue, or whatever you like. Make corresponding Slices in Prismic. Start building pages dynamically in minutes. Get started at <a href= "https://prismic.io/syntax">prismic.io/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="LogRocket__Sponsor_12" name= "LogRocket__Sponsor_12"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="15" data-line-end="16"> <a id="Show_Notes_15" name="Show_Notes_15"></a>Show Notes</h2> <p class="has-line-data" data-line-start="16" data-line-end="17"> 03:20 - Layout is hard</p> <ul> <li class="has-line-data" data-line-start="17" data-line-end="19"> <code>block</code> vs <code>inline</code> vs <code>inline-block</code> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Learn what this means!</li> </ul> </li> <li class="has-line-data" data-line-start="19" data-line-end="21"> Flexbox <ul> <li class="has-line-data" data-line-start="20" data-line-end="21"> <a href= "https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a></li> </ul> </li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Grid</li> <li class="has-line-data" data-line-start="22" data-line-end="23"> Avoid floats</li> <li class="has-line-data" data-line-start="23" data-line-end="24"> <a href="https://flexbox.io/">Wes’ Flexbox Course</a></li> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://cssgrid.io/">Wes’ CSS Grid Course</a></li> <li class="has-line-data" data-line-start="25" data-line-end="27"> <a href= "https://www.leveluptutorials.com/tutorials/modern-css-layouts">Scott’s Modern CSS Layouts Course</a></li> </ul> <p class="has-line-data" data-line-start="27" data-line-end="28"> 07:43 - I can’t get my thing to get the right style</p> <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Use a scoping system like BEM, CSS in JS, CSS Modules</li> <li class="has-line-data" data-line-start="29" data-line-end="30"> Don’t style via IDs</li> <li class="has-line-data" data-line-start="30" data-line-end="32"> Avoid <code>!important</code></li> </ul> <p class="has-line-data" data-line-start="32" data-line-end="33"> 11:00 - My thing isn’t looking the way it’s coded</p> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> Dev tools</li> <li class="has-line-data" data-line-start="34" data-line-end="35"> Write CSS in the browser</li> <li class="has-line-data" data-line-start="35" data-line-end="37"> Check class names</li> </ul> <p class="has-line-data" data-line-start="37" data-line-end="38"> 12:11 - I don’t know if I can delete this CSS</p> <ul> <li class="has-line-data" data-line-start="38" data-line-end="39"> Use tools like <a href= "https://purgecss.com/">https://purgecss.com/</a></li> <li class="has-line-data" data-line-start="39" data-line-end="41"> <a href= "http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/"> http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/</a></li> </ul> <p class="has-line-data" data-line-start="41" data-line-end="42"> 15:51 - Look at things holistically</p> <h2 class="code-line" data-line-start="43" data-line-end="44"> <a id="Tweet_us_your_tasty_treats_43" name= "Tweet_us_your_tasty_treats_43"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="48" data-line-end="49"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="50" data-line-end="51"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

Hasty Treat - Why Do People Hate CSS?

Syntax - Tasty Web Development Treats