FREE CSS Selector Cheat Sheet: [https://webdevsimplified.com/specificity-cheat-sheet.html](https://webdevsimplified.com/specificity-cheat-sheet.html)

CSS has received dozens of monumental updates in the last few years, and this new CSS functions update might be one of the most impactful updates of all. In this video I will show you how to use this new function syntax from the basics all the way to advanced features while also showing you how this can be used for real world code.


📚 Materials/References:

FREE CSS Selector Cheat Sheet: [https://webdevsimplified.com/specificity-cheat-sheet.html](https://webdevsimplified.com/specificity-cheat-sheet.html)
Relative Color Video: [https://youtu.be/Acs-tJV4iAo](https://youtu.be/Acs-tJV4iAo)
CSS Layers Video: [https://youtu.be/Pr1PezCc4FU](https://youtu.be/Pr1PezCc4FU)
CSS Layers Article: [https://blog.webdevsimplified.com/2022-04/css-cascade-layers/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-bP8mrNdR-hs](https://blog.webdevsimplified.com/2022-04/css-cascade-layers/?utm_source=youtube&utm_medium=video-description&utm_term=video-id-bP8mrNdR-hs)
CSS If Video: [https://youtu.be/mvgY3GvcSCo](https://youtu.be/mvgY3GvcSCo)


🌎 Find Me Here:

My Blog: [https://blog.webdevsimplified.com](https://blog.webdevsimplified.com/)
My Courses: [https://courses.webdevsimplified.com](https://courses.webdevsimplified.com/)
Patreon: [https://www.patreon.com/WebDevSimplified](https://www.patreon.com/WebDevSimplified)
Twitter: [https://twitter.com/DevSimplified](https://twitter.com/DevSimplified)
Discord: [https://discord.gg/7StTjnR](https://discord.gg/7StTjnR)
GitHub: [https://github.com/WebDevSimplified](https://github.com/WebDevSimplified)
CodePen: [https://codepen.io/WebDevSimplified](https://codepen.io/WebDevSimplified)


⏱️ Timestamps:

00:00 - Introduction
00:27 - Function Basics
03:20 - Function Cascade
05:56 - Function Types
08:00 - Advanced Functions


#CSS #WDS #AdvancedCSS

Web Dev Simplified

CSS now supports custom functions using the @function syntax, enabling developers to create reusable logic like responsive sizing and color manipulation. Functions follow CSS cascade rules, use the 'result' property instead of return statements, support default parameters and type annotations, and can be overridden using CSS layers. Practical examples include building a transparency function and a responsive value switcher that adapts based on media queries.

I Love the NEW CSS Functions

<img src="https://media.daily.dev/image/upload/s--s9hGpkBF--/f_auto/v1767116113/ugc/content_4a2f7392-4ccf-4e59-ae7c-bda93f85a8cb?_a=BAMAK+ZW0" alt="image">
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@function" target="_blank" rel="noopener nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/<a href="https://app.daily.dev/function" data-mention-id="e9f4NaRpqz7Ukxbe6eD4W" data-mention-username="function" translate="no">@function</a></a>

I’ve created a collection of CSS functions! Feel free to contribute
<a href="https://yaireo.github.io/css-utility-functions" target="_blank" rel="noopener nofollow">https://yaireo.github.io/css-utility-functions</a>

It’s not a “game changer” because it doesn’t allow anything which wasn’t possible before (in terms of styling), but it does however improves the readability of CSS code by applying the DRY principle.

This is literally mixins from scss, so the part in which you can screw up yourself and others with too much DRY