Always great to find a fresh video by a reliable creator ESPECIALLY when you only find out about a subject/concept just a day prior to the video being released! Thank you. I still have more to learn, but this is a great start.
Thank you Kevin. I was actually looking for a tutorial on PostCSS initial setup process. This video will help me a lot. Please make more videos on PostCSS features and benefits. Thank you once again.
Please create more PostCSS video tutorials! Please show us more plugging and advanced use of postcss! Thank you for this video also! love from Bangladesh 🇧🇩
Thank you SO MUCH for doing this video! I have been wanting to know how to use PostCSS for a little while now and how I have the step-by-step instructions right here to use in my next project! This is great!
Css supercharged 🔥♥️ Thanks KING♥️ I would also love to see some more videos or maybe a sort of big project of jamstack using its all important features. I don't know much about it except for your video😅
I don't know about him, but I would like to see everything! Hahaha But seriously, a postcss beginner series (installation/configuration/{most used,basic} plugins) would be wonderful!
I usually use PostCSS with SCSS, cssnano, and Autoprefixer. I don't have much knowledge beyond these. Any other things can be interesting, plugins, etc. Thanks!
Awesome video! Just a small note: you actually don't need to do npm init if you just want to fetch some libraries. You can just npm install in an empty folder.
Started as a hobby in 1997 or 1998... did it on and off for, and started to take it seriously in... 2006 or 2007 maybe, and started teaching it in 2014 :)
whoa i just started learning css and it looks cool aldready and that writing css in diffrent kind of folders and just made choose from previous ones and make new css in one touch
Oh and another question: Do I need PostCSS when using the React framework? Is it compatible, an useful addition or are a lot of postCSS features obsolete because of built-in features in React?
Cool stuff! If you have the patience for the setting it up you get a clean and organised workflow , can't wait for your SASS course ;) . Also like that you can use future-CSS , what got me thinking ; can it do subgrid?
When referring to "writing future css", it means writing css syntax that might be natively adopted by browsers which then gets compiled down to current css. This means that it's all current css at the end and features that are not yet supported by css can't be used as far as I know (unless you mess with the browsers' flags) _Syntactic sugar_ might be the perfect expression to describe this "future css" imo
Why use PostCSS if less / sass / scss can do exactly the same? Got my phpstorm + less compiler + autoprefix + minify for years now :-) Same same but different? Why should I use postCSS instead of my setup?
It's interesting that you put components before utilities. I use BEM and always put utilities before my blocks/components, since I want a component to always "win" over utilities. But maybe I have been doing it wrong all this time. What is your rational for putting utilities at the end?
@@IainSimmons so just to clarify, "source" is the one we use to build our website and "public" is for the one that people view on their browsers right?
I have a feeling it is faster, but also I guess you are learning to write real CSS, even if it's features that aren't yet available in most/some browsers.
@@herrlindner haha yeah maybe poor choice of words. But it's similar to how some JS frameworks add a lot of stuff over the top of (abstracting) plain, vanilla JS. People learn those patterns, sometimes without learning the underlying native patterns/APIs. Example in this video was trying to nest selectors in the SCSS way, instead of with the ampersand which will eventually make it to the CSS core. Also, we should probably be learning CSS properties instead of Sass variables and native CSS functions like calc where possible. I know there are other differences, but I expect at one point you'll be able to do pretty much everything in native CSS and won't really need SCSS, similar to how we don't really need jQuery anymore since you can do it all with equivalent vanilla JS patterns.
Do you have a video for handling blue and purple color sir? I always get stuck with this colors, on Chrome and Firefox this color like difference. If i use purple on chrome, firefox will output as blue and when i use blue on chrome, firefox will output as purple. Which one is correct?
Very well to improve organisation in a big project with many developers. But in a little project its useless and a waste of time. Why turn simple thing that work well to something more confusing…good vidz
As far what I understood... It is not relevant anymore. You should learn how to use @use and @forward instead... as @import will not be supported since october 2022. Can't get my head around... Does not make much sense to me as it worked very well and was very easy to use + DRY principal :) With this update it is way more time consuming (Iguess).
Hello Sir, I would like to use PostCSS to generate minified files from all the CSS files in a directory. Can you advice how can i achive it. I was trying the follwing NPM scripts and failed. Thanks in Advance! "scripts": { "postcss": "assets/css/*.css > assets/css/*.min.css" }
i'm not sure why but when i try to run the postcss:watch I get the folder I get the file.css buy inside it's the same as the import it just shows the @import.... anyone can help?
theres a big issues with this method in that postcss-import cannot handle root css variables and if you're importing all your stylesheets into a single css file, the styling rules get duplicated twice. from what i can see, its unsolvable.
Or Command + K on Mac when the terminal is focused, or add a keybinding for Windows: { "key": "ctrl+k", "command": "workbench.action.terminal.clear", "when": "terminalFocus" },
I still prefer SASS, but this @custom-media is fantastic, even with SASS I will change the mixins I use for breakpoinst to custom media queries, it is better to use them in the other files, no need to import the file with the mixins and it is not an @include, but a @media.
You can use Parcel along with PostCSS. Here I was using the PostCSS CLI to keep things simple, but you could use it with something like parcel to also have other stuff in your build process as well.
Just an FYI: you don't need to put semicolons at the end of every line in JS any longer. Obviously for consistency, keep doing it, but for future JS files, you don't need them.
There is sooo much in this rabbithole, imagine having to import 100+ files manually 🤣 Nope just configure it to find all the files for you with a regular expression no biggie 😉 If you leave the background purple, I'll leave a like haha.
Dear Kevin, I love your channel, I sent you an email about something that you might want to try to reproduce and try to fix! Please take a look at your spam folder, object is about 'Canadian company'. Well, thank you for all those free videos on UA-cam. You help many people and your channel is great!
Your channel is an absolute gold mine. Thank you so much for creating the content you do.
Always great to find a fresh video by a reliable creator ESPECIALLY when you only find out about a subject/concept just a day prior to the video being released! Thank you. I still have more to learn, but this is a great start.
Thank you Kevin. I was actually looking for a tutorial on PostCSS initial setup process. This video will help me a lot. Please make more videos on PostCSS features and benefits. Thank you once again.
WOW! ... You've just changed my life!!!... Thank you so much, your videos are a wonderful resource.
Please create more PostCSS video tutorials!
Please show us more plugging and advanced use of postcss!
Thank you for this video also!
love from Bangladesh 🇧🇩
🇧🇩
Would love a short to see the steps compressed in less than a minute!
PostCSS in 100 seconds
-fireship
(soon maybe)
@@maximcoppieters He did it already lmao
@@matiasribero9721 Oh, of course he did :] (just found it)
Thank you SO MUCH for doing this video! I have been wanting to know how to use PostCSS for a little while now and how I have the step-by-step instructions right here to use in my next project! This is great!
Great explanation kevin🙌
Need more videos like this!
Plz sir, create a full playlist for postcss .
And show other plugging that how works !
omg the way you smile Kevin is so nice
Css supercharged 🔥♥️
Thanks KING♥️
I would also love to see some more videos or maybe a sort of big project of jamstack using its all important features. I don't know much about it except for your video😅
I learned a lot from your videos fam, thank you and keep up the great work
Incredible, Kevin.
Perfect Timing for me yesterday I started looking into postCSS tutorials and who better than Kevin
Amazing. Thanks, it couldn't have been better explained.
If anyone tell me that this man created CSS I'll belive it
Haha, no, just been writing it for *a long* time 😅
I thought that was @Wes Bos's dad?
one of the people who has worked on css - ua-cam.com/video/kNzoswFIU9M/v-deo.html
Believe*
Excellent, Kevin! 🙏Could you do a series on PostCSS? 😇 Thanks.
Any specific things you'd like to see?
I don't know about him, but I would like to see everything! Hahaha
But seriously, a postcss beginner series (installation/configuration/{most used,basic} plugins) would be wonderful!
I usually use PostCSS with SCSS, cssnano, and Autoprefixer. I don't have much knowledge beyond these. Any other things can be interesting, plugins, etc. Thanks!
Awesome. Thank you! Would you be able to post the occasional postcss vid highlighting what plugins you use in your workflow?
Awesome video! Just a small note: you actually don't need to do npm init if you just want to fetch some libraries. You can just npm install in an empty folder.
I just loved it... Really informative
Love you videos! For how long have you been coding?
Started as a hobby in 1997 or 1998... did it on and off for, and started to take it seriously in... 2006 or 2007 maybe, and started teaching it in 2014 :)
Thank you Kevin,
I always enjoy your videos!
All this video I thought why not do it all with sass,
am i missing something?
🙏🏼
11:45 If you are on a mac it is control + C
whoa i just started learning css and it looks cool aldready and that writing css in diffrent kind of folders and just made choose from previous ones and make new css in one touch
Thank you for the tutorial! As a newbie to all of this, this feels waaay more complicated than SASS. When should I prefer postCSS over SASS?
Oh and another question: Do I need PostCSS when using the React framework? Is it compatible, an useful addition or are a lot of postCSS features obsolete because of built-in features in React?
More postCSS plz
Great video. And i also love Sass! Would love some dedicated Sass content. 🙌
This is very interesting. I always use SCSS so this feels like a good maybe for just .css files but still great to know. Thanks Kevin!
You can use both!
Finally. Do you recommend using parcel or gulp (or how it is called)?
Both are great. Depends on your needs. Vite is pretty great as well, which uses Rollup.
Cool stuff! If you have the patience for the setting it up you get a clean and organised workflow , can't wait for your SASS course ;) . Also like that you can use future-CSS , what got me thinking ; can it do subgrid?
When referring to "writing future css", it means writing css syntax that might be natively adopted by browsers which then gets compiled down to current css.
This means that it's all current css at the end and features that are not yet supported by css can't be used as far as I know (unless you mess with the browsers' flags)
_Syntactic sugar_ might be the perfect expression to describe this "future css" imo
My VS Code kept showing syntax errors until I installed the extension "PostCSS Language Support".
Any tips for cross browser css other than autoprefixing? Still new to it
Also can you able to make another tutorial on postcss-uncss on a mid size project?
Can you please do a video on removing unused css from the project? Thank you
Why use PostCSS if less / sass / scss can do exactly the same? Got my phpstorm + less compiler + autoprefix + minify for years now :-) Same same but different? Why should I use postCSS instead of my setup?
Awesome!
thnak you for your useful channel, but why we should use post-css when we can use sass(scss) instead!
It's still control+c on Mac and Linux.
CSS == KEVIN
CSS evaluates
Awesomly true 😊 [ Kevin and me are besties]
i love your videos my uncle
I've literally been stuck all day trying to figure out how to use postcss with parcel man
Morning Kevin, finally sth I can help, in VS code, to split a tab on right hand side, the short cut is ctrl + \, hope this could help :).
Do you have to use require and module.exports or can you use ES modules?
It's interesting that you put components before utilities. I use BEM and always put utilities before my blocks/components, since I want a component to always "win" over utilities. But maybe I have been doing it wrong all this time. What is your rational for putting utilities at the end?
Can we use sass along with postcss, idk why I would do that. PostCSS is similar to tailwind, I guess tailwind uses postCSS under the hood
Love the video and can't wait for the Sass course. Quick question, do you link the public/style.css in your html or the src/style.css?
public, that's the whole point, that you get a single, minified, compiled and browser supported version of your CSS
@@IainSimmons so just to clarify, "source" is the one we use to build our website and "public" is for the one that people view on their browsers right?
@@ArchaicCreationsbp yup
You can use Ctrl+L instead of "clear" in terminal)
Wondering if there's any advantage over SCSS? 🤔
I have a feeling it is faster, but also I guess you are learning to write real CSS, even if it's features that aren't yet available in most/some browsers.
@@IainSimmons Wait, what isn't real about SCSS? :o :D
@@herrlindner haha yeah maybe poor choice of words. But it's similar to how some JS frameworks add a lot of stuff over the top of (abstracting) plain, vanilla JS. People learn those patterns, sometimes without learning the underlying native patterns/APIs.
Example in this video was trying to nest selectors in the SCSS way, instead of with the ampersand which will eventually make it to the CSS core.
Also, we should probably be learning CSS properties instead of Sass variables and native CSS functions like calc where possible. I know there are other differences, but I expect at one point you'll be able to do pretty much everything in native CSS and won't really need SCSS, similar to how we don't really need jQuery anymore since you can do it all with equivalent vanilla JS patterns.
@@IainSimmons thanks for your time and explanation buddy
on mac it's control c as well
Thank you very mucho
Do you have a video for handling blue and purple color sir? I always get stuck with this colors, on Chrome and Firefox this color like difference. If i use purple on chrome, firefox will output as blue and when i use blue on chrome, firefox will output as purple. Which one is correct?
Great work but can i use global variables from Color.css in navbar.css as in @use like sass ?
I love your videos thanks a lot of....
PostCSS or Stylelint which to choose what ?
It's CTRL + C on both Mac and PC to terminate the terminal. 😊
Can this work with .scss files or no. Also is this what you use for all your projects?
Hi! Please I need your. My output file returns '@import 'files'' instead of the content of the files. How do I fix it?
Where i can read all features order by stage?
Very well to improve organisation in a big project with many developers. But in a little project its useless and a waste of time. Why turn simple thing that work well to something more confusing…good vidz
11:50 it’s ctrl + c
I was lost at open up Terminal. Where is that?!
I know that there is the @import ability in SCSS, but you've mentioned that we shouldn't use that in CSS. Could you please make it more clear why?
As far what I understood... It is not relevant anymore. You should learn how to use @use and @forward instead... as @import will not be supported since october 2022. Can't get my head around... Does not make much sense to me as it worked very well and was very easy to use + DRY principal :) With this update it is way more time consuming (Iguess).
Great video. Just one question, I've worked with PostCSS before but I just installed postcss-cli without postcss, is that okay?
It probably installs postcss as one of its own dependencies
@@IainSimmons so it suffices to install only postcss-cli + its plugins, correct?
@@mohamedyamani8502 yes, either would work, but I think it makes sense to include postcss and be explicit about it
Hello Sir, I would like to use PostCSS to generate minified files from all the CSS files in a directory. Can you advice how can i achive it. I was trying the follwing NPM scripts and failed. Thanks in Advance!
"scripts": {
"postcss": "assets/css/*.css > assets/css/*.min.css"
}
Native CSS nesting isn't supported yet or does it not matter because it gets converted?
It gets converted to what the browser can understand :)
Postcss does not seem to be able to cope with ES6 so one would need to use Rollup (or similar)
CSS knows Kevin
😂😂
i'm not sure why but when i try to run the postcss:watch I get the folder I get the file.css buy inside it's the same as the import it just shows the @import.... anyone can help?
I still don't understand why I need postcss... Is it helpful when you work on big projects?
Top 🎉🎉🎉
But you still want to run your _Live Server_ at the same time? And I guess it works great?
No reason live server wouldn't work. If you're using npm scripts or other build tools you could use it with browser sync as well
theres a big issues with this method in that postcss-import cannot handle root css variables and if you're importing all your stylesheets into a single css file, the styling rules get duplicated twice. from what i can see, its unsolvable.
This is the tiniest contribution ever I know but since you make a point about saving keystrokes, cls is shorter than clear
Or Command + K on Mac when the terminal is focused, or add a keybinding for Windows:
{
"key": "ctrl+k",
"command": "workbench.action.terminal.clear",
"when": "terminalFocus"
},
I still prefer SASS, but this @custom-media is fantastic, even with SASS I will change the mixins I use for breakpoinst to custom media queries, it is better to use them in the other files, no need to import the file with the mixins and it is not an @include, but a @media.
thx for Ukraine ! This video is very helpful!
It is better parcel or postcs ?
You can use Parcel along with PostCSS. Here I was using the PostCSS CLI to keep things simple, but you could use it with something like parcel to also have other stuff in your build process as well.
I have one word “wow”
using bem in postcss needs a lot of configurations :(
This Is Joe Say Hi Joe 🤣
Some days ago I was thinking why Kevin yet not made video on PostCSS
Sass better?
I wonder if I got SASS tutorial in this channel
I have a bunch! Just search for Kevin Powell Sass and they should show up :)
y dont just use SASS? omg. Lot of steps to make it work...
first to comment yaaaaaayy =D
👍
Looks hard
Just an FYI: you don't need to put semicolons at the end of every line in JS any longer. Obviously for consistency, keep doing it, but for future JS files, you don't need them.
i'm teaching Tailwind css in persian language
There is sooo much in this rabbithole, imagine having to import 100+ files manually 🤣
Nope just configure it to find all the files for you with a regular expression no biggie 😉
If you leave the background purple, I'll leave a like haha.
Dude it's already up there for ages an it's called scss.....
I have a lot of videos on SCSS too. PostCSS can do a lot that it can't (and Sass can do some things PostCSS can't do as well)
Give an example of what your trying to achieve first! love your site but Id like to see what your talking about before Scripting.
Dear Kevin, I love your channel, I sent you an email about something that you might want to try to reproduce and try to fix! Please take a look at your spam folder, object is about 'Canadian company'. Well, thank you for all those free videos on UA-cam. You help many people and your channel is great!
all that time it took to set it up , its supposed to make our lives easier not harder
I'm afraid you lost me with the installation nightmare.
If you think installing a few plugins and adding one additional line for each in a config file is a nightmare, you might be in the wrong business...