Learn how to power-up your CSS with PostCSS
Vložit
- Äas pÅ™idán 16. 05. 2024
- If you're going to use the preset-env, I'd strongly recommend adding the PostCSS Language Support plugin to VS Code, so that it recognizes the CSS you are writing: marketplace.visualstudio.com/...
PostCSS is an absolutely amazing tool, so let's see how we can use it!
🔗 Links
✅ PostCSS: postcss.org
⌚ Timestamps
00:00 - Introduction
01:18 - The plugins we'll be setting up
01:32 - Installing PostCSS
04:17 - Installing our first plugin
05:06 - Adding the PostCSS config file
06:25 - Using our first plugin
07:28 - Setting up the command in our package.json
09:12 - Using the command
10:01 - Getting PostCSS to watch our files
12:09 - Installing cssnano and preset-env
14:12 - Exploring preset-env
15:37 - Setting up options for a plugin
17:57 - Custom property media queries with preset-env
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨â€ðŸŽ“ Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my CZcams channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!
![tattoo printer tutorial[ì œí’ˆë‹¨ìˆœì„ ë¬¼]](http://i.ytimg.com/vi/g40_GwEJak0/mqdefault.jpg)
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.
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 learned a lot from your videos fam, thank you and keep up the great work
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😅
Amazing. Thanks, it couldn't have been better explained.
Need more videos like this!
Plz sir, create a full playlist for postcss .
And show other plugging that how works !
Great explanation kevin🙌
I just loved it... Really informative
Perfect Timing for me yesterday I started looking into postCSS tutorials and who better than Kevin
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 - czcams.com/video/kNzoswFIU9M/video.html
Believe*
Thank you Kevin,
I always enjoy your videos!
All this video I thought why not do it all with sass,
am i missing something?
ðŸ™ðŸ¼
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)
Incredible, Kevin.
Awesome. Thank you! Would you be able to post the occasional postcss vid highlighting what plugins you use in your workflow?
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
omg the way you smile Kevin is so nice
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 🇧🇩
🇧🇩
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!
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.
Great video. And i also love Sass! Would love some dedicated Sass content. 🙌
Awesome!
More postCSS plz
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!
I love your videos thanks a lot of....
Thank you very mucho
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 :).
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?
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?
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
Any tips for cross browser css other than autoprefixing? Still new to it
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?
Great work but can i use global variables from Color.css in navbar.css as in @use like sass ?
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
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 :)
I've literally been stuck all day trying to figure out how to use postcss with parcel man
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.
Where i can read all features order by stage?
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?
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?
Also can you able to make another tutorial on postcss-uncss on a mid size project?
It's still control+c on Mac and Linux.
i love your videos my uncle
Can you please do a video on removing unused css from the project? Thank you
11:45 If you are on a mac it is control + C
on mac it's control c as well
It's CTRL + C on both Mac and PC to terminate the terminal. 😊
Postcss does not seem to be able to cope with ES6 so one would need to use Rollup (or similar)
You can use Ctrl+L instead of "clear" in terminal)
PostCSS or Stylelint which to choose what ?
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.
My VS Code kept showing syntax errors until I installed the extension "PostCSS Language Support".
Can this work with .scss files or no. Also is this what you use for all your projects?
CSS == KEVIN
CSS evaluates
Awesomly true 😊 [ Kevin and me are besties]
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
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
Hi! Please I need your. My output file returns '@import 'files'' instead of the content of the files. How do I fix 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"
}
ðŸ‘
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?
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
CSS knows Kevin
😂😂
I have one word “wowâ€
I was lost at open up Terminal. Where is that?!
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.
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?
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 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).
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
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.
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
This Is Joe Say Hi Joe 🤣
11:50 it’s ctrl + c
Looks hard
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 :)
thx for Ukraine ! This video is very helpful!
first to comment yaaaaaayy =D
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.
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.
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 CZcams. You help many people and your channel is great!
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)
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...