UnCSS your CSS! Removing Unused CSS with PostCSS & Parcel

Рет қаралды 59,558

Күн бұрын

promo.linode.com/designcourse/ - Use code 'DESIGNC19' to get $20 credit on your new Linode account!
-- Last week I released a video discussing Bootstrap. In this video, I mentioned I used PurgeCSS to remove unwanted CSS, which resulted in a drastically smaller file size. Today, we're going to use a similar tool called UnCSS with the help of PostCSS to do just that.
PostCSS allows you to chain together a number of CSS tools.
You can use PostCSS in a number of environments, and for this one, we're going to use Parcel (You can also use Gulp, Grunt, Webpack, etc..).
Uncss comes with a plugin that allows it to work with PostCSS, which is what we'll use. Uncss simply compares your HTML against your CSS, and removes any unused CSS rulesets.
Project files:
coursetro.s3.amazonaws.com/st...
Let's get started!
- - - - - - - - - - - - - - - - - - - - - -
Subscribe for NEW VIDEOS!
My site: designcourse.com
My personal FB account: logodesigner
Coursetro FB: coursetro
Coursetro's Twitter: / designcoursecom
Join my Discord! / discord
^-Chat with me and others
- - - - - - - - - - - - - - - - - - - - - -
Who is Gary Simon? Well, I'm a full stack developer with 2+ decades experience and I teach people how to design and code. I've created around 100+ courses for big brands like LinkedIn, Lynda.com, Pluralsight and Envato Network.
Now, I focus all of my time and energy on this channel and my website Coursetro.com.
Come to my discord server or add me on social media and say Hi!

Пікірлер: 74

@DesignCourse 4 жыл бұрын

Sub up if you enjoy, as always!

@justingolden21 3 жыл бұрын

I thought this said "shutup if you enjoy" and I was like wut lmao

@_the_one_1 4 жыл бұрын

as always great video! Thanks for sharing

@Github_tech_with_ty 4 жыл бұрын

Yes was looking for this

@dannyspivak6526 4 жыл бұрын

Thank you for the video, good one

@abhishreymittal 4 жыл бұрын

I might use it in the future, but still, it is always a pleasure to watch your videos... BTW when is the next NegativeSpace coming?

@DesignCourse 4 жыл бұрын

Maybe this Friday.

@davidetiosaojo8258 4 жыл бұрын

Hey Gary, love your videos!! I've been following you channel for a while now and it has been awesome... But I'm having issues with this tutorial though; I can't quite install the "parcel-bundler" I keep getting an error when I run the "npm i parcel-bundler".. Any solutions??!

@Grewal0007 4 жыл бұрын

Thank you so much Sir

@Sam-rd5bo 2 жыл бұрын

Is there a chance it can remove CSS that maybe getting used on other pages or only getting used if certain action happens? Or perhaps CSS that gets applied as new elements are created. I wonder how safe it is to use unCSS?

@ZeR0ByTe 4 жыл бұрын

Great!! thanks!!!

@_the_one_1 4 жыл бұрын

Hey Gary I am learning testing vue.js applications and did that but buying a book. Though there is not useful resources out there, I mean there are not quality videos to show you how to test vue.js applications and most of developers prefer to learn by wathing videos. Is it in your plans to create a play list "Testing vue applications with jest" ?

@oussamasethoum2755 4 жыл бұрын

Thanks.

@akash-kumar737 4 жыл бұрын

You are awesome.

@Github_tech_with_ty 4 жыл бұрын

Thank you good sir

@bjartur96 4 жыл бұрын

Does this also work if you are adding classes afterwards with JS?

@hayleykornilenko6314 4 жыл бұрын

Does this work across the entire site or just the page it is rendering for the Coverage feature?

@TM-vg2mt 4 жыл бұрын

Can you suggest me, what best framework to make a dynamic web company profiles?

4 жыл бұрын

Thanks for the video, changing the theme, can I apply uncss with an Angular project?

@AymanAlSagher 4 жыл бұрын

I have the same question! 😁

@SummerSC2 4 жыл бұрын

Yes plz I want to know that as well

@sumanchatterjee2336 3 жыл бұрын

sir if i have multiple pages, each page using different css properties from my common css file(like one page using 3-4 animations and other page didn't using them), then how should i do uncss of the css which are not common for each page ?

@ramyalayan9121 4 жыл бұрын

Can you please do this with Webpack and share it with us? I've been trying to do it with Webpack for 2 hours and still no luck :/

@RockuMan 4 жыл бұрын

On the paper, uncss is a great idea, but for real world production products is more of a hassle than a practical tool: a lot of styles can’t be understood by the various uncss plugins, such as pseudo elements, dynamically injected classes etc. As the project grows, keeping track of everything uncss should “ignore” can become time consuming.

@harryadneyinternetservices 4 жыл бұрын

Nice one mate. As it happens, I had just experimented with Parcel for the first time acoup[le of minutes before watching this video, so a nice bit of serendipity, there.

@pamelahicks 4 жыл бұрын

One reason there could still be some unused css remaining is because of reset styles. For example, button { color: inherit; } would still be in your css even if every button used had a class like .btn { color: blue; } because the package found button elements and wouldn’t delete their css.

@pamelahicks 4 жыл бұрын

Nixon Kosgei presumably it wouldn’t be code you wrote yourself; in this vid the example was Bootstrap, and as far as I know, Bootstrap uses some kind of reset that would target some elements (don’t quote me on that one) like inputs and whatnot.

@pamelahicks 4 жыл бұрын

Nixon Kosgei yes and it’s not a bad thing! Just an observation I made on one of my own projects using PurgeCSS. In my example above, the button reset style for color: inherit isn’t really needed anymore but wouldn’t be removed.

@amarg26 3 жыл бұрын

Is it possible to remove unused Js from core files like jquery,jquery-ui and bootstrap.js? if yes how to do it? Wiil be great if we have new video on this. Thanks a lot.

@user-nx6un5ur4w 4 жыл бұрын

Hello! Please tell me how to do the same only on the gulp? gulp + postssss + unkss

@e11world 3 жыл бұрын

Would love to see how you can use purgecss with gulp (using it now but having a hard time adding this or unusedcss to my gulp file since I'm using var paths for css/html and so on)

@vasiovasio 3 жыл бұрын

I can recommend you to try cssnano too, it is Amazing tool!

@morespinach9832 2 жыл бұрын

How about if I have 7-8 page template types in my website. Wordpress. Using uikit framework. Can i point purgecss or postcss or uncss with that?

@yassinesafraoui4540 4 жыл бұрын

is sass using uncss, if not is there is any way to make it support it?

@danielbaychev9297 3 жыл бұрын

For anyone having the restricted policy error, Run this: Set-ExecutionPolicy RemoteSigned

@kenny1394 4 жыл бұрын

How do you save your own website's html file and css file??

@RizaHariati 2 жыл бұрын

I can't use it using React.js. I don't know where to put the file. The index.html is in the public folder. And the parcel just won't work.

@Dopefish1337 5 ай бұрын

Hello, my homepage has an index.php file instead of .html, is this still possible?

@TutoDS2014 4 жыл бұрын

Works in Laravel project

@apafly 4 жыл бұрын

I'm trying this from a Mac with this error and no wat to fix it: "Please specify a publicURL using --public-url, otherwise schema assets won't be collected" I've tried --public-url '.' --public-url index.html --public-url ./ --public-url / but didn't work

@sherifsalah5563 4 жыл бұрын

Does it keep js added classes? Because i tried purgecss with parcel before and it removed all js added classes! I just checked and it doesn't .. so its not useful at all unless you are creating one dummy page.

@krubex 4 жыл бұрын

that's what I asked myself, too. If that's really the case, it isn't that useful. Shouldn't it be possible to scan not just html files, but also js files to look for classes/id's/elements?

@vikrantmagare3836 2 жыл бұрын

Can we do this for js also

@fzmhd3324 3 жыл бұрын

sir how to configure this for multiple page website please give me a replay sir

@thebetacoders4738 3 жыл бұрын

Can you please make a tutorial kn how to remove unused Css in Angular 11????????

@bionicbrainbutt 3 жыл бұрын

No record feature on my dev panel

@alexandertorres8854 4 жыл бұрын

Curious if this can be done in Angular with Angular CLI?

@DesignCourse 4 жыл бұрын

I haven't tried. Angular uses webpack though, and PostCSS can work with webpack. I'm not sure how straight forward that would be.

@alexandertorres8854 4 жыл бұрын

@@DesignCourse would be great to see a video on using it with Angular.

@srikanthchilakabathula194 4 жыл бұрын

Grate video..your videos are soo good to watch.. *Please tell how to remove unused js*

@graphicclub868 4 жыл бұрын

wao isee your this logo design video

@andrewkiminhwan 4 жыл бұрын

has anyone tried this for django project?

@ruhankhandakar 4 жыл бұрын

do we have any unjs ???

@TheRonoxcz 4 жыл бұрын

Im wondering the same.

@MatthewChenIsAwesome 4 жыл бұрын

Parcel comes with tree-shaking, which eliminates JS dead code

@DavidElstob73 4 жыл бұрын

If you can do the same job with PurgeCSS then why make it more complex using PostCSS and UnCSS?

@DesignCourse 4 жыл бұрын

I personally like using Parcel instead of something like Gulp. So, Parcel works well with PostCSS. If you want to use PurgeCSS with Gulp or something, their docs are straight forward.

@DavidElstob73 4 жыл бұрын

@@DesignCourse yeah I guess most things are personal preference.