postcss

Explore "postcss" with insightful episodes like "Use Next-gen CSS Today (Post CSS Configs)" and "Writing Good CSS" from podcasts like ""Syntax - Tasty Web Development Treats" and "Syntax - Tasty Web Development Treats"" and more!

Episodes (2)

Use Next-gen CSS Today (Post CSS Configs)

In this Hasty Treat, Scott and Wes talk about next generation CSS that you can use today with PostCSS including importing, nesting, variables, media query ranges, custom media queries, and more.

Prismic - Sponsor

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 prismic.io/syntax.

Sentry - Sponsor

If you want to know what’s happening with your code, track errors and monitor performance with Sentry. Sentry’s Application Monitoring platform helps developers see performance issues, fix errors faster, and optimize their code health. Cut your time on error resolution from hours to minutes. It works with any language and integrates with dozens of other services. Syntax listeners new to Sentry can get two months for free by visiting Sentry.io and using the coupon code TASTYTREAT during sign up.

Show Notes

00:27 Welcome
01:30 Sponsor: Prismic
02:54 Sponsor: Sentry
03:53 Do we use Post CSS?
05:22 Presets and plugins
06:19 Plugins we’re using

 "postcss-import"  @import './elements/headings.css';

09:48 PostCSS Nested
12:59 Variables (Custom Properties)
15:50 Media Query Ranges
PostCSS Media Minmax
17:16 Custom Media Queries

 "postcss-media-minmax"  @media screen and (width >= 500px) and (width <= 1200px)

 "postcss-custom-media"  @custom-media --below_small (width < env(--small_bp));  @media (--above_small) {}

18:35 Env Vars

 "postcss-env-function"  env(--small_bp)

20:12 Color Function and Color Function Notation

 /* color-function */ p {   color: color(display-p3 1 0.5 0);   color: color(display-p3 1 0.5 0 / .5); }

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

Syntax - Tasty Web Development Treats

enSeptember 12, 2022

Writing Good CSS

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