PostCSS in 100 Seconds

PostCSS is a tool that allows you to use modern CSS features like nesting and mixins, while supporting legacy browsers. Learn why this simple JavaScript library is one of the most popular tools in the web development industry.
#css #webdev #100SecondsOfCode
🔗 Resources
PostCSS Docs postcss.org/
Sass in 100 Seconds • Sass in 100 Seconds
📚 Topics Covered
- PostCSS vs Sass
- What is PostCSS?
- How JavaScript plugins can transform CSS
- Modern CSS features like nesting and mixins
🔥 Watch more with Fireship PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font

[@bioloitz]

Never thought a logo for a CSS tool can look so terrifying.

[@krtirtho]

Don't worry bro, fireship's Fire burns it at the end of the video

[@starrymohannad]

*DOOM Soundtrack started playing*

[@nicolasvillarroel737]

Is like from silent hill

[@swoorp]

lol true

[@ThatGuyDownInThe]

it's on the Kybalion. My favorite book of all time and pretty much my religion, very interesting it's used here.

[@pacifi5t]

All startups should hire Jeff, he can make anyone fall in love with anything in 100 seconds

[@papajohnsuk5965]

cobol

[@NicolaiWeitkemper]

You forgot dating agencies!

[@OverDrive804]

Hey that could be a good freelance business. Visit start ups and teach a technology they are using in 100 seconds.

[@BlackdestinyXX]

Yes

[@aybak3k]

professional digital marketer XD

[@kraskaska]

First Tailwind CSS, now PostCSS that powers it... good job! :)

[@vintprox]

And then there is a Windi CSS. Ah, it's all coming together ☺

[@nickschmitt8594]

I think CSS troubles people because they don't give it the time that it deserves. It's a complex beast. If given even a fraction of the time given to Js, one would feel comfortable with the CSS ecosystem.

IMO CSS has too many different concepts and rules. If you don't comply, it doesn't work and it is not obvius why. The learning feedback loop is too slow to be enjoyable. And regarding the time, people spend a lot of time in JS because is where the business logic lives.

[@WrittenInFilm]

css is actually extremely simple if you break it down. The majority of it is just a bunch of boxes, the box sizes, sizes around the boxes, and size inside the boxes.

[@nickschmitt8594]

@@WrittenInFilm I meant the tooling involved in efficiently styling a large application is complex.

[@MyALPHAguy]

CSS is actually simple... the problem is these tools that only complicates it even more.

[@SiddhantaPaul80]

CSS Works fine and for starters, it takes time to handle it properly especially for designing a large web app.

[@farlight6044]

Great content as usual! Honestly, you're one of the very few programming channels that I get really excited to watch Thank you and keep it up!

[@WrittenInFilm]

the problem with using ever evolving frameworks, is that as they become outdated your code becomes unreadable to other devs. Also it makes debugging style issues much harder and more time consuming.

[@reedlaww]

That reason is why I like Angular. The development team is pretty opinionated, but I can pick up an angular project and generally know the structure and flow of the app. Feels less like the Wild West and hoping people follow standard practices.

[@urbaniv]

@@reedlaww agreed Same why I love elm. You can take every elm code and you know how to read it

[@Erraticfox]

@@reedlaww HUGE this, I've been enjoying my recent time with svelte but I do still love how Angulars structure is.

[@cai0]

@@reedlaww totally agree. Angular might have a steeper learning curve at the beginning, but totally worth it for larger projects. The main reason it's losing traction is that most youtube videos and tutorials rarely get past a hello world or to do list.

[@cai0]

@@Erraticfox same here, experimenting with Svelte on a smaller project, but wouldn't risk it on a larger one just yet. Still quite unpolished.

[@a29stech33]

I was thinking about postcss, and you make this video, it's a miracle! Love you

[@Gregorius421]

1:18 Slight correction: the basic wikipedia pages don't use PostCSS, but instead the Less compiler's php port. PostCSS is used by a few subprojects and new ones written in Vue.

[@user-cv6kf4bk1q]

Fireship is the coolest channel to subs. They help us to keep catching up a bunch of skills that good to know. Thanks!

[@lalathealter6513]

what a unique logo style, you dont see much of this in IT nowadays

[@arslancodecorner]

How do you produce such amazing content back to back with just a 1 to 2 days gap?😳

[@jasonm9825]

Needed this right now! Cheers

[@AlainBoudard]

Best presentation of PostCSS ever 👌

[@BlackdestinyXX]

I need more videos like this!

[@kirayamato6128]

*postcss logo is like a transmutation circle from Full Metal Alchemist Brotherhood*

[@vaisakhkm783]

Na.. It's bill cipher

[@ThatGuyDownInThe]

The logo is from the Kybalion which is my favorite book ever. This is so cool.

[@kantuo]

such clean editing 👌👌

[@emanuelescarsella3124]

I recently started using it and I loved it😍

[@enespinar9711]

Better than doc itself!!! Thankss

[@shanujha7245]

Yup, needs a full version

[@thatalbeeguy]

Omg, this tool looks incredible! Such a shame you didn't go beyond 100 seconds to tell us more about it(

[@xoldyckk176]

@Fireship please make a video on sql vs query builder vs orm. Pros and cons when to use what.

[@user-uw2db6xg9j]

Maan , whoo areee yooo , impressive 👏

[@danielvega646]

PostCSS has such a cool logo!

[@satyaranjanrout6735]

I would love to see a purge css video

[@behnamsalehi9765]

Amazing 🔥❤️

[@chiragsingla.]

I was today searching for CSS tools, found PostCSS but skipped because of logo, gonna check it out again

[@antipusrises]

I'm getting strong Coheed vibes off of that logo.

[@fallenstar358]

I am gratefull to you cuz I didn't realize it earlier

[@Optimuseq]

More video like this :) Maybe something about ASP.Net, some animation frameworks in js?

[@anb1142]

Can't wait for the tailwind CSS video

[@vaisakhkm783]

He already had done it

[@nro337]

That so cool!

[@Ra-cu3rm]

Nice video 😊

[@moh6823]

3djs in 100 secondsssssss COME ONNNNN!! I GET SO EXCITET WHEN YOU UPLOAD A VIDEO

[@novoehuevoe9340]

Thank you again

[@shoubhik]

please create a video on using postcss with tailwindcss to minimize css file size

[@mohamedelidrissi810]

Even better when used with Parcel

[@brendano1204]

Ty very helpful

[@mrindia4178]

We want post css beyond 100 seconds

[@thecashewtrader3328]

I love this channel

[@fallenstar358]

Yeeeeah O didn't know what is it so it is time to know:)))) thx^^

[@nihaalprasad7049]

Can you make a new video/course regarding Firebase 9.0? Like a complete beginners tutorial with auth,firestore etc. I was going to learn Firebase but since it has shifted to a different style it's so hard to find good tutorials regarding it. Really hoping you can make it!

[@mrherpes2971]

I love how you super animate the logo. How do you do tht?

[@DevanKS]

I am a bit confused as to what the difference between any CSS preprocessor and POSTCSS. Is it that I can have my own formats or selectivity by choosing my plugins?

[@DoctorSoulis]

Finally, CSS4!

[@nolanfrymire7316]

More postCss pls.

[@midkaa]

Finally, i can do some css

[@BrianZhang11]

thanks!

[@amarg26]

Need Stylelint in 100 sec. Also tutorial on both PostCSS and Stylelint

[@JudgeHolden]

please do a video on knockoutJs and springboot

[@fury365]

Could u make a full video on sass?

[@GauravSingh-hn8cg]

Love it

[@n0xter95]

what about doing Laravel in 100 seconds for the next video?🔜

[@Muheeb_]

Hi I just saw your comment and searched for "Laravel in 100 seconds" and he literally uploaded a video on Laravel 28 minutes ago haha. Go check it out!

[@TariqSajid]

next topic css modules and purgeCss

[@oneworldofstem7724]

Wow so fast. I really wonder what scope will you think of when you are thinking a "100s video of XXX"?

[@Brlitzkreig]

I'd love a Bootstrap in 100 seconds. That would awesome

[@maurobianchin8243]

shit

[@wintorez]

I love your contents. How can I support you?

[@mshay6658]

Phoenix LiveView in 100 seconds pls! 🔥🔥🔥

[@IAmNumber4000]

PostCSS: A tool for summoning Beelzebub

[@dolevdo]

Beyond beyond !!!!

[@ohhellothere17]

Man pls make a vid on best framework for *css*

[@AreyHawUstad]

Question: is postCSS drop in replacement for SASS features or is SASS now a plugin for postCSS ?

[@MrMudbill]

They _can_ work together, but usually that's unnecessary. You can replace SASS with PostCSS using the right plugin combination.

[@MrGuen7198]

what is your theme (vs code) are you using in this video?

[@aruneshwarv9308]

o my god,i cant even imagine,I got interested in Tailwind after seeing video abt in this channel,so I digging their websites and got stuck by term postcss and god,came back to youtube,found this video.

[@amarg26]

Need video on husky, Git Hooks in 100 seconds, if possible stylelint too.

[@pasupasu]

Fancy!

[@mayursmahajan]

samaj mein nahi aya lekin sun ke achha laga

[@nestromae]

Tailwindcss is a postcss plugin, btw.

[@rumplstiltztinkerstein]

I'm just starting out react. Would this work together with babel transpiler?

[@krtirtho]

The unpopular tool that serves way more than any of the tools you use day to day, not even mentioning itself

[@henil0604]

We need beyond 100 seconds for PostCSS

[@jacobstamm]

After all the videos and forum posts I’ve seen on PostCSS, what I still don’t understand is what it’s worth going through the learning curve and extra configuration compared to venerated preprocessors like SASS or LESS. For example, when compiling a LESS file, just enable the autoprefixer flag, pass in a browserslist string, and you’re done. Why is this more complicated solution better? What am I missing?

[@MrMudbill]

As I understand it, PostCSS is lighter than Sass or Less out of the box, and more customizable. As a result, other tools may prefer to use PostCSS for their own extensions, features and plugins, so that you don't have to install a very sophisticated/opinionated pre-processor to use it. This also has the side effect of not always playing nice with those, so if you already use Sass and then need to use PostCSS, you might run into some trouble. At that point it might just be easier to replace Sass entirely by adding the appropriate plugins to PostCSS so that your Sass-syntax is still valid.

[@arjayarjay8856]

Nice

[@Aminsx_]

Cassandra database in 100s next?

[@alexreade9229]

Bro, I swear you're reading my mind.

[@chathurajayashanka776]

Love the video. But the background music was a little distracting.

[@reddot8100]

I love PostCSS

[@manuelgamez8074]

I didn't even know wikipedia had CSS

[@arianfallahpour123]

How do big website companies hash their classname? I see it on almost every major website, but can’t find a way to implement it

[@Dev_UI]

styled-components

[@arianfallahpour123]

@@Dev_UI I saw this, but isn’t it only for react?

[@abhiramam5752]

Module css

[@Dev_UI]

@@arianfallahpour123 yup, or css-in-js. Basically you need js to do the hash thing.

[@teacul]

mixins and nesting are possible with postcss?? goodbye preprocessors

[@4bbiss]

Ever thought about starting a podcast, or doing an audio book? You have a good speaking voice.

[@scvnthorpe__]

Why does Wikipedia of all places need a CSS processor?

[@vinayakgosale8470]

Could there be a tech-stack selector tool that updates based on input of your or your client requirements and gives you a set of tools, technologies and libraries that you might need to use?

[@ivanjermakov]

I see no issue searching for great tools for your specific use cases on the internet

[@elirane85]

Are you aware of how many "tools, technologies and libraries" solve the same problems? Any "recommended" list would be biased af. My personal advice as a coder with a couple of decades of experience, the best tool for any job is your brain ;)

[@islamibrahim8121]

Lmao, I just realised the postcss logo looks like a transmutation circle from full-metal alchemist

[@cecece775]

do some project with postcss bro

[@anb1142]

That logo reminds me of the Deadly Hollows symbol

[@realkshitijraheja]

Post css full tutorial please

[@ninjaasmoke]

I want a full course

[@TacoTed]

When are we going to get vite in 100 seconds?

[@azatecas]

even with this tool CSS remains the hardest thing in our universe

[@ionitaa]

And front-end toolkit keeps growing and growing...

[@rokibulislam6895]

The logo looks so hazardous ☣️

[@mrrishiraj88]

I am here, pals. You may start now

[@mateuszabramek7015]

Are CSS native variables bad? It looks like it looking at post CSS plugins.

[@KangJangkrik]

**seeing postCSS logo** **illuminati song plays**

[@mxo3212]

lol that Beyoncé viral

[@szymonhrabia1294]

React-Query in 100seconds please

[@facundorozada1091]

what about Microsoft Intune?

[@shateq]

I didn't watch Java in 100 seconds or there isn't any video like that! Kotlin in 100 seconds would be cool also

[@vilquid]

Do you know formspree ?

[@md.abdulhalimrafi9940]

Fanboy is here 🔥