No video
Every modern site should be using PostCSS!
Рет қаралды 14,432
Күн бұрынPostCSS is the ultimate CSS tool. It’s completely customizable and incredibly quick. I'll walk you through what it is, how to use it, show you my preferred plugins, and show you how to get it working in a real project.
🔗 Key Links 🔗
- PostCSS website: postcss.org/
- VSCode extension: marketplace.visualstudio.com/...
---------------------------------------
🔗 PostCSS Plugins mentioned 🔗
- www.npmjs.com/package/postcss...
- github.com/postcss/autoprefixer
- cssnano.co/
- github.com/postcss/postcss-mi...
- github.com/postcss/postcss-ne... (for SASS nesting)
- github.com/csstools/postcss-p... (for CSS-spec nesting)
- github.com/postcss/postcss-me...
- github.com/csstools/postcss-p...
- github.com/csstools/postcss-p... (the preset for writing modern CSS)
---------------------------------------
⏲️ Timestamps ⏲️
0:00 Introduction
0:39 What is PostCSS?
0:51 How does PostCSS work?
2:11 Why use PostCSS?
3:28 What PostCSS plugins do I use?
9:17 How do I use PostCSS?
---------------------------------------
🌐 Connect With Me 🌐
- Website: codinginpublic.dev
- Blog: chrispennington.blog
- Twitter: / cpenned
- Patreon: / coding_in_public
- Buy Me a Coffee: www.buymeacoffee.com/chrispen...
@CodinginPublic Жыл бұрын
I should have mentioned, you don’t HAVE to choose between SCSS and PostCSS; many use them together. I find that using PostCSS covers most of the use cases I have for SCSS, so I don’t often reach for SCSS if I'm using PostCSS. Also …15:57 🤦♂
@hoklenghak777 Жыл бұрын
I am your new subscriber! Great contents, man!
@CodinginPublic Жыл бұрын
🙌 glad you enjoyed it!
@dgcp354 Жыл бұрын
the name of the channel is amazing.
@CodinginPublic Жыл бұрын
Hey, thanks. I definitely view myself more as a learner than a teacher so I wanted to channel to reflect that. I’m learning and coding in public in an attempt to help others as well.
@Web-Dev-Codi Жыл бұрын
Amazing! Thank You.
@CodinginPublic Жыл бұрын
You’re welcome!
@mathieulalonde 3 ай бұрын
Thank you so much! Setting-up PostCSS in Vite really should be better documented... You really helped me 🙂
@CodinginPublic 3 ай бұрын
You’re welcome!
@cranberry888 Жыл бұрын
your guide is awesome, I was just about to get into this technology. And btw, what theme do you use this time?
@CodinginPublic Жыл бұрын
Great! Glad it was a help! Haha … changed again. I think I'm using TDK Theme (a person who commented made it and mentioned it in my last video!)
@Xamy- Жыл бұрын
For the custom media plugin, what’s its advantage over CSS variables or SASS ones?
@CodinginPublic Жыл бұрын
You can’t use css variables in media queries. So this gives you a similar syntax to do the same thing.
@SeanGrimLink Жыл бұрын
You don't need autoprefixer if your using postcss-preset-env. Personally I do like the scss way of working, combining it with postcss-preset-env and cssnano.
@CodinginPublic Жыл бұрын
Yep! It’s included in preset-env by default! That works! It’s awesome to have so many great tools available!
@moneyfr Жыл бұрын
Thank you but how would you make prettier & Stylelint works with postcss ?
@CodinginPublic Жыл бұрын
They should work side-by-side. I just wouldn't use any linting plugins in POSTCSS if you’re doing linting another way. Does that help?
@perrosanchez Жыл бұрын
Hi, how are you? I've been trying various ways to work with mixins using postCSS, particularly postcss-preset-env, and when I try to call it with @import or @apply it doesn't work in any way. I am in an environment with Astro Build, following your videos! Thank you.
@CodinginPublic Жыл бұрын
Hey! Sorry for the trouble. Hmm…it's really hard to say without seeing your code? If you go to branch 5 (I think) and beyond in the Astro series you should see how I did it? I can't remember if I used either, but I know at least the @import is included in postcss-preset-env. Hope that helps!
@dein-ding Жыл бұрын
How can we suppress the @-rule warnings though? It’s extremely annoying, especially if you use something like error lens.
@CodinginPublic Жыл бұрын
There's a setting in VSCode called "Unknown at-rule" that you can change to "Ignore." Hope that helps!
@JimKernix Жыл бұрын
Inside the plugins array I use require("autoprefixer") whereas you use autoprefixer: {}. Is there a difference if which method you use?
@JimKernix Жыл бұрын
Oh, and I just noticed you use an object for the plugins but I use an array.
@CodinginPublic Жыл бұрын
Yeah, it depends if it’s a common js module basically.
@briankgarland Жыл бұрын
Is there a way to exclude something from postcss-preset-env or is it all or nothing?
@briankgarland Жыл бұрын
Got it. Just selectively disable the ones you don't want to use with a false. All are enabled by default depending on the stage level. module.exports = { plugins: [ require('postcss-preset-env')({ stage: 0, features: { 'custom-media-queries': false, } }) ] }
@CodinginPublic Жыл бұрын
Great work. Yep! that's how you select different plugins. Rather than installing preset-env, you can also just individually install a set of plugins you want.
@sulavbaral9972 Жыл бұрын
Have been using tailwind since the day I've found it got quite comfortable and works good but I think I should give this a spin too
@CodinginPublic Жыл бұрын
Well believe it or not, you’ve already been using it because Tailwind is a PostCSS plugin! The tailwind docs actually encourage you to use the autoprefixer plugin along with tailwind. :)
@namecanbeblank6311 Жыл бұрын
What theme and font are you using?
@CodinginPublic Жыл бұрын
Cascadia Code (free font by Microsoft) and Palenight Operator (I think?) for the theme.
@glorynt7925 11 ай бұрын
How to use conditional with postcss mixin?, Example: define-mixin test $value{ @if $value == red { color: red } }
@CodinginPublic 10 ай бұрын
I haven’t used that plugin! Sorry!
@kushagra-aa Жыл бұрын
Can we get a video about stylelint and postcss plugin
@CodinginPublic Жыл бұрын
I could see myself doing something on stylelint and mentioning the PostCSS plugin as an option?
@kushagra-aa Жыл бұрын
@@CodinginPublic Yess PLease!!
@notnotjake Жыл бұрын
I still don't really understand why I would want to use this over using scss
@CodinginPublic Жыл бұрын
No worries if you prefer SCSS. PostCSS lets you pick and choose which features you want to add to CSS (or which modern CSS features you want to use), it's not an entire “compiled” system like SCSS (that may not be the right term). But the idea here is both 1) you can piece-meal what you want and 2) you can mostly just write either standard CSS or future standard CSS. Many of the plugins let you write what will eventually be stable in the browsers. But a lot of people feel like you do; it's nice we have so many options!
@edhahaz 3 ай бұрын
Grabbing 500 plugins at the thrift shop improves things, instead of using sass.
@CodinginPublic 3 ай бұрын
lol what do you miss in modern CSS that scss gives you? Mixins? Loops?
@edhahaz 3 ай бұрын
@@CodinginPublic postcss seems to have a bunch of features that overlap sass. It's confusing and I have to pick each feature myself. I only care about polyfills.
@coolemur976 4 ай бұрын
There are downsides of postcss or preprocessors. 1. Yes, it's cool that you can use modern features today that wouldn't be possible with CSS. But... imagine reality... you work on big project with team and stuff, they use PostCSS and everything is great. But then you are assigned to a project that is not using PostCSS and has a lot of legacy code, and the rule of that project is "don't add PostCSS", because someone disagrees to add it. So all your fancy snippets becomes worthless and you feel bad for using old tech when you could be using the modern one. 2. Things like this makes development of pure CSS slower. So many features that could be pushed forward in CSS now are left aside with idea "oh you can just make it with PostCSS so why bother improving CSS specs, it can wait".
@perrosanchez Жыл бұрын
Hi, I only use postcss-preset-env with Astro Build, the only thing that doesn't work for me is @custom-media when I call them in an .astro file inside the @media (--lg) {}< tag. /style> how can I solve it, thank you very much for the help!
@CodinginPublic Жыл бұрын
Hmm…this might be something to ask in the Astro discord. I would ASSUME that Astro should pick that up in the bundling of your CSS and run it all through your post css plugin? But I don't know off hand? Sorry!
The Wall Street Journal
Рет қаралды 7 М.