Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Writing Good CSS

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p class="has-line-data" data-line-start="7" data-line-end="8">In this episode of Syntax, Scott and Wes talk about writing good CSS.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> 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="12" data-line-end="13"> <a id="Netlify__Sponsor_12" name="Netlify__Sponsor_12"></a>Netlify - Sponsor</h2> <p class="has-line-data" data-line-start="13" data-line-end="14"> Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up <a href= "https://netlify.com/syntax">netlify.com/syntax</a> for more info.</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="17" data-line-end="18"> 02:11 - Frameworks</p> <ul> <li class="has-line-data" data-line-start="18" data-line-end="19"> Utility: <a href="https://tailwindcss.com/">Tailwind</a>, <a href="https://tachyons.io/">Taycons</a>, <a href= "https://bulma.io/">Bulma</a></li> <li class="has-line-data" data-line-start="19" data-line-end="20"> Frameworks: <a href= "https://get.foundation/">Foundation</a>, <a href= "https://getbootstrap.com/">Bootstrap</a></li> <li class="has-line-data" data-line-start="20" data-line-end="23"> Classless base starters: <a href= "https://github.com/dbohdan/classless-css">https://github.com/dbohdan/classless-css</a> <ul> <li class="has-line-data" data-line-start="21" data-line-end="23"> <a href="https://html5up.net/">HTML5 UP</a> / A template</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="23" data-line-end="24"> 13:37 - Preprocessors</p> <ul> <li class="has-line-data" data-line-start="24" data-line-end="25"> <a href="https://sass-lang.com/">Sass</a></li> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href="https://stylus-lang.com/">Stylus</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> <a href="http://lesscss.org/">Less</a></li> <li class="has-line-data" data-line-start="27" data-line-end="31"> Regular CSS <ul> <li class="has-line-data" data-line-start="28" data-line-end="29"> Variables</li> <li class="has-line-data" data-line-start="29" data-line-end="31"> Color functions - not yet</li> </ul> </li> </ul> <p class="has-line-data" data-line-start="31" data-line-end="32"> 19:42 - Tools</p> <ul> <li class="has-line-data" data-line-start="32" data-line-end="34"> <a href="https://postcss.org/">PostCSS</a> is like Babel for CSS. Some good plugins: <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href= "https://github.com/postcss/postcss#plugins">https://github.com/postcss/postcss#plugins</a></li> </ul> </li> <li class="has-line-data" data-line-start="34" data-line-end="35"> CSS min/max for clamp</li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href= "https://github.com/postcss/autoprefixer">Autoprefixer</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href= "https://github.com/maximkoretskiy/postcss-autoreset">Autoreset</a> - reset a component</li> <li class="has-line-data" data-line-start="37" data-line-end="38"> Gap instead of grid-gap</li> <li class="has-line-data" data-line-start="38" data-line-end="39"> <a href= "https://github.com/postcss/postcss-simple-vars">Simple-vars</a></li> <li class="has-line-data" data-line-start="39" data-line-end="40"> <a href= "https://github.com/outpunk/postcss-modules">Postcss-modules</a></li> <li class="has-line-data" data-line-start="40" data-line-end="41"> <a href="https://github.com/postcss/sugarss">SugarSS</a></li> <li class="has-line-data" data-line-start="41" data-line-end="43"> Preset env</li> </ul> <p class="has-line-data" data-line-start="43" data-line-end="44"> 34:19 - Stylint</p> <ul> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://stylelint.io/">Stylint</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> More than just a basic linter</li> <li class="has-line-data" data-line-start="46" data-line-end="48"> Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable</li> </ul> <p class="has-line-data" data-line-start="48" data-line-end="49"> 36:37 - Removing unwanted CSS</p> <ul> <li class="has-line-data" data-line-start="49" data-line-end="50"> <a href="https://purgecss.com/">PurgeCSS</a> - Tailwind uses this</li> <li class="has-line-data" data-line-start="50" data-line-end="52"> <a href="https://purifycss.online/">PurifyCSS</a></li> </ul> <p class="has-line-data" data-line-start="52" data-line-end="53"> 41:17 - Writing maintainable CSS / scoping solutions</p> <ul> <li class="has-line-data" data-line-start="53" data-line-end="55"> Component-based <ul> <li class="has-line-data" data-line-start="54" data-line-end="55"> CSS Modules</li> </ul> </li> <li class="has-line-data" data-line-start="55" data-line-end="58"> Naming Convention Based <ul> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="http://getbem.com/">BEM</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="http://smacss.com/">SMACSS</a></li> </ul> </li> <li class="has-line-data" data-line-start="58" data-line-end="60"> CSS Variables <ul> <li class="has-line-data" data-line-start="59" data-line-end="60"> Powerful when utilized with things like calc() to avoid out of sync values</li> </ul> </li> <li class="has-line-data" data-line-start="60" data-line-end="62"> Know which browsers you need to support</li> </ul> <h2 class="code-line" data-line-start="62" data-line-end="63"> <a id="Links_62" name="Links_62"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="63" data-line-end="64"> <a href= "https://syntax.fm/show/197/hasty-treat-tips-for-writing-good-css">Syntax 197: Hasty Treat - Tips For Writing Good CSS</a></li> <li class="has-line-data" data-line-start="64" data-line-end="65"> <a href="http://compass-style.org/">Compass</a></li> <li class="has-line-data" data-line-start="65" data-line-end="66"> <a href="https://www.oddbird.net/susy/">Susy</a></li> <li class="has-line-data" data-line-start="66" data-line-end="67"> <a href="https://gruntjs.com/">Grunt</a></li> <li class="has-line-data" data-line-start="67" data-line-end="68"> <a href="https://gulpjs.com/">Gulp</a></li> <li class="has-line-data" data-line-start="68" data-line-end="69"> <a href="https://github.com/callstack/linaria">Linaria</a></li> <li class="has-line-data" data-line-start="69" data-line-end="70"> <a href= "https://github.com/4Catalyzer/astroturf">Astroturf</a></li> <li class="has-line-data" data-line-start="70" data-line-end="71"> <a href= "https://developer.mozilla.org/en-US/docs/Web/Houdini">Houdini</a></li> <li class="has-line-data" data-line-start="71" data-line-end="73"> <a href="https://svelte.dev/">Svelte</a></li> </ul> <h2 class="code-line" data-line-start="73" data-line-end="74"> <a id="Syntax_Highlight_73" name="Syntax_Highlight_73"></a>Syntax Highlight</h2> <ul> <li class="has-line-data" data-line-start="74" data-line-end="76"> Dhanish Gajjar - <a href= "https://www.instagram.com/dhanishgajjar/">https://www.instagram.com/dhanishgajjar/</a></li> </ul> <h2 class="code-line" data-line-start="76" data-line-end="77"> <a id="_SIIIIICK__PIIIICKS__76" name= "_SIIIIICK__PIIIICKS__76"></a>××× SIIIIICK ××× PIIIICKS ×××</h2> <ul> <li class="has-line-data" data-line-start="77" data-line-end="78"> Scott: <a href= "https://github.com/rust-lang/rustlings">Rustlings</a></li> <li class="has-line-data" data-line-start="78" data-line-end="80"> Wes: <a href= "https://www.hbomax.com/feature/urn:hbo:feature:GX0P9SwLUP4vDIQEAAAAe?utm_id=sa%7c71700000071882016%7c58700006290539048%7cp56854383918&gclid=EAIaIQobChMIvOO7mrvk6wIVA77ACh0AlAJDEAAYASAAEgLZPfD_BwE&gclsrc=aw.ds">Class Action Park Documentary</a></li> </ul> <h2 class="code-line" data-line-start="80" data-line-end="81"> <a id="Shameless_Plugs_80" name="Shameless_Plugs_80"></a>Shameless Plugs</h2> <ul> <li class="has-line-data" data-line-start="81" data-line-end="82"> Scott: <a href="https://www.leveluptutorials.com/pro">Advanced Animating React with Framer Motion</a> - Sign up for the year and save 25%!</li> <li class="has-line-data" data-line-start="82" data-line-end="84"> Wes: <a href="https://mastergatsby.com/">Master Gatsby</a> - Use the coupon code ‘Syntax’ for $10 off!</li> </ul> <h2 class="code-line" data-line-start="84" data-line-end="85"> <a id="Tweet_us_your_tasty_treats_84" name= "Tweet_us_your_tasty_treats_84"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="85" data-line-end="86"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="86" data-line-end="87"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="87" data-line-end="88"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="88" data-line-end="89"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="89" data-line-end="90"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="90" data-line-end="91"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="91" data-line-end="92"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this episode of Syntax, Scott and Wes talk about writing good CSS.
 LogRocket - Sponsor 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 logrocket.com/syntax.
 Netlify - Sponsor Netlify is the best way to deploy and host a front-end website. All the features developers need right out of the box: Global CDN, Continuous Deployment, one click HTTPS and more. Hit up netlify.com/syntax for more info.
 Show Notes 02:11 - Frameworks
  Utility: Tailwind, Taycons, Bulma

 Frameworks: Foundation, Bootstrap

 Classless base starters: https://github.com/dbohdan/classless-css  HTML5 UP / A template

  13:37 - Preprocessors
  Sass

 Stylus

 Less

 Regular CSS  Variables
 Color functions - not yet

  19:42 - Tools
  PostCSS is like Babel for CSS. Some good plugins:  https://github.com/postcss/postcss#plugins

 CSS min/max for clamp
 Autoprefixer

 Autoreset - reset a component
 Gap instead of grid-gap
 Simple-vars

 Postcss-modules

 SugarSS

 Preset env
  34:19 - Stylint
  Stylint

 More than just a basic linter
 Capable of complex rules in your CI process - i.e. if you are using a color, make sure it’s a CSS variable
  36:37 - Removing unwanted CSS
  PurgeCSS - Tailwind uses this
 PurifyCSS

  41:17 - Writing maintainable CSS / scoping solutions
  Component-based  CSS Modules

 Naming Convention Based  BEM

 SMACSS

 CSS Variables  Powerful when utilized with things like calc() to avoid out of sync values

 Know which browsers you need to support
  Links  Syntax 197: Hasty Treat - Tips For Writing Good CSS

 Compass

 Susy

 Grunt

 Gulp

 Linaria

 Astroturf

 Houdini

 Svelte

  Syntax Highlight  Dhanish Gajjar - https://www.instagram.com/dhanishgajjar/

  ××× SIIIIICK ××× PIIIICKS ×××  Scott: Rustlings

 Wes: Class Action Park Documentary

  Shameless Plugs  Scott: Advanced Animating React with Framer Motion - Sign up for the year and save 25%!
 Wes: Master Gatsby - Use the coupon code ‘Syntax’ for $10 off!
  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Writing Good CSS

Poslechněte si podcast