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 🇧🇩
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😅
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 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!
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.
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?
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?
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 :)
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
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
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?
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?
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" }
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?
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 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.
@@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?
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).
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.
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 TH-cam. You help many people and your channel is great!
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 🇧🇩
🇧🇩
Your channel is an absolute gold mine. Thank you so much for creating the content you do.
Need more videos like this!
Plz sir, create a full playlist for postcss .
And show other plugging that how works !
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 - th-cam.com/video/kNzoswFIU9M/w-d-xo.html
Believe*
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)
WOW! ... You've just changed my life!!!... Thank you so much, your videos are a wonderful resource.
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😅
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.
Perfect Timing for me yesterday I started looking into postCSS tutorials and who better than Kevin
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!
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!
omg the way you smile Kevin is so nice
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.
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
Great explanation kevin🙌
Amazing. Thanks, it couldn't have been better explained.
I learned a lot from your videos fam, thank you and keep up the great work
Thank you Kevin,
I always enjoy your videos!
All this video I thought why not do it all with sass,
am i missing something?
🙏🏼
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!
I just loved it... Really informative
Awesome. Thank you! Would you be able to post the occasional postcss vid highlighting what plugins you use in your workflow?
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?
My VS Code kept showing syntax errors until I installed the extension "PostCSS Language Support".
More postCSS plz
Incredible, Kevin.
I've literally been stuck all day trying to figure out how to use postcss with parcel man
Great video. And i also love Sass! Would love some dedicated Sass content. 🙌
11:45 If you are on a mac it is control + C
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?
You can use Ctrl+L instead of "clear" in terminal)
Hi! Please I need your. My output file returns '@import 'files'' instead of the content of the files. How do I fix it?
Can you please do a video on removing unused css from the project? Thank you
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 :)
It's still control+c on Mac and Linux.
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
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
PostCSS or Stylelint which to choose what ?
CSS == KEVIN
CSS evaluates
Awesomly true 😊 [ Kevin and me are besties]
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?
thnak you for your useful channel, but why we should use post-css when we can use sass(scss) instead!
Do you have to use require and module.exports or can you use ES modules?
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 :).
Also can you able to make another tutorial on postcss-uncss on a mid size project?
Any tips for cross browser css other than autoprefixing? Still new to it
Where i can read all features order by stage?
CSS knows Kevin
😂😂
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.
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
It's CTRL + C on both Mac and PC to terminate the terminal. 😊
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?
Thank you very mucho
Awesome!
on mac it's control c as well
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 love your videos my uncle
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?
Postcss does not seem to be able to cope with ES6 so one would need to use Rollup (or similar)
I was lost at open up Terminal. Where is that?!
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....
Can this work with .scss files or no. Also is this what you use for all your projects?
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"
},
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 :)
I still don't understand why I need postcss... Is it helpful when you work on big projects?
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
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
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).
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.
I have one word “wow”
thx for Ukraine ! This video is very helpful!
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
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.
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
11:50 it’s ctrl + c
Sass better?
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.
using bem in postcss needs a lot of configurations :(
y dont just use SASS? omg. Lot of steps to make it work...
Some days ago I was thinking why Kevin yet not made video on PostCSS
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 :)
👍
This Is Joe Say Hi Joe 🤣
i'm teaching Tailwind css in persian language
Looks hard
Top 🎉🎉🎉
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.
first to comment yaaaaaayy =D
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 TH-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
Give an example of what your trying to achieve first! love your site but Id like to see what your talking about before Scripting.
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)
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...