Top 10 CSS Pro Tips to make your life as a web developer more productive. Some of the best programmers say CSS is too hard… but you might be surprised at how modern techniques can dramatically improve your code. https://fireship.io/tags/css/

00:00 CSS is too hard (myth)
00:56 1. Learn the box model
02:00 2. Firefox is Amazeballs
02:31 3. Flexbox is Fantastic
03:34 4. Grid is Great
04:23 5. Clamp it Down
05:09 Bonus: Impress your Boss
05:30 6. Aspect Ratio One-Liner
06:01 7. Variables for variables
06:46 8. Fancy Calculations
07:38 9. State Management Counter
08:18 10. Finding focus-within
09:01 Bonus: Treat an Incurable Disease

#css #learntocode #top10

Box Model https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model
Focus-within CSS dropdown https://fireship.io/snippets/basic-css-dropdown-menu/

Install the quiz app 🤓

iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp

Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment. 

My VS Code Theme

- Atom One Dark 
- vscode-icons
- Fira Code Font
2024-02-04T05:54:13.399Z
nova-2
2-general-nova
2024-01-09.29447
30089e05-99d1-4376-b32e-c263170674af
c866b295-fea3-4814-80d5-0eee9d352a5f
593a7f1f85ec819b606d3e6fc1f899f7e7f2e353baa700d5773bb8a3a88cd4ae
67875a7f-c9c4-48a0-aa55-5bdb8a91c34a
deprecated
In my recent poll with over 75,000 responses, CSS topped the list as the most painful technology web developers have to work with.
They say it's broken, chaotic, and too damn hard.
There's even conspiracy that it's bad by design to protect the app stores, but I think CSS is awesome.
It's definitely bloated and difficult to learn comprehensively, but that's only because it's had to Evolve over the last 25 years.
It came out at a time when Netscape was the top browser, and the idea of a responsive layout was more than a decade away.
A as more browsers hit the market, they all implemented CSS in different ways, leading to code that works in one browser, but not the other.
Requiring you, the developer, a thread a bunch of confusing vendor prefixes in your code just to make it work across all browsers.
So I totally get why you would hate CSS, but today is a therapy session where you'll learn how to write clean CSS us using modern features while avoiding the bad code that you shouldn't have to write in 2021.
If you're new here, like and subscribe, and leave your favorite CSS pro tip in the comments.
I'll pick a few of them to win this one of a kind t shirt next week.
The first thing you need to know is how to learn CSS.
The way not to learn CSS is to use a framework like Bootstrap or Tailwind.
They're sexy tools that can help you get a nice looking UI quickly, but if you use something like Tailwind in your project, it's like getting married.
A for 1, you won't learn CSS fundamentals, you'll learn Tailwind.
And 2, if you ever change your mind, you'll have to go through a very nasty divorce.
You want a divorce?
I have wings, Tully.
A I want to fly.
When you learn basic CSS, you'll have more control over your code, creativity, and freedom.
The best piece of advice that I didn't receive until well into my web development career, was to learn the CSS box model.
Because when you understand it, everything else in the language starts to make more sense.
In fact, it's so easy, I'll just teach you the a box model right now.
Think of every HTML element as a box.
Inside that box, you have the content, which can have a width and height.
You can add padding around that box to squeeze the content, then you can add a a border around the outside, then additional invisible space around the border called a margin.
Everything in CSS related to layout and position is influenced by the box model.
If you open up Chrome DevTools, a You can see how the box model is computed for any element on the page.
And, that brings me to tip number 2.
Don't use Chrome when debugging CSS.
Instead, check out Firefox.
Ex their dev tools are generally superior, especially when it comes to CSS.
If I inspect an element, I have a breakdown of the box model like I do in Chrome, but I can also edit properties on it directly, a and Firefox gives me a breakdown of all the properties that are influencing the box model.
It also provides useful annotations in the HTML, like when one element is causing another element to overflow.
And, Firefox also provides really nice graphics for flex and grid layout.
Speaking of which, layout or the positioning of elements relative to each other, has historically been one of the most challenging aspects of CSS.
Like the age old question of how do I center a div both horizontally a glee and vertically.
One option is to give the child absolute positioning, then move it to the bottom right corner by using the top and left properties, then translate it back 50% to put it in in the center.
That can work, but it's incredibly unintuitive.
A much better approach with modern CSS is flexbox, which allows you to create a flexible column or row anywhere in the UI.
When when an element has display flex, it also has an x and y axis on which you can align its children.
The children flow one way, which is known as a main axis and can be aligned in the center with the justify content property.
Perpendicular to that is the cross axis, and we can move our element to the center with the align items property.
A Flexbox is usually the first tool I reach for when it comes to layout, but it does have one major drawback.
If you have a big complex UI with many intersecting rows and columns, you may end up with a lot of a container or wrapper elements in your HTML.
These elements have no semantic meaning and are just there, so your CSS code has something to attach itself to.
Luckily, there's a modern CSS feature a called a grid that can obliterate much of your code.
Unlike Flexbox, which only deals with individual columns and rows, grid allows you to think about the big picture a layout.
If you've been a Web developer for a long time, it may look familiar, because it's very similar to table layout way back in the day.
It's just much more developer friendly.
A When you set an element to display grid, you can then define its children as a bunch of columns and rows.
Columns have a width, which can be defined with the grid template columns property.
A We have 3 values here separated by spaces, which means our grid has 3 columns.
Notice the f r value or fractional unit, which will responsibly share a pair of the available space with other columns in the grid.
We can also define some rows, and now, every element inside the grid will be positioned automatically.
But, the important thing to notice is the amount HTML and CSS that we've eliminated, compared to flexbox layout or, God forbid, table layout.
Now, 90% of the time when we talk about responsive layouts, a We're just talking about changing the width of something based on the available space on the device or viewport.
There are many ways you might do that.
For example, you might have article that has a preferred width of 50%, but on small screens, you wanna make it fixed at 200 pixels, or fixed at 800 pixels on large screens.
A You could do that by writing media queries that will apply CSS conditionally based on the viewport size.
The only problem with this is that media queries will make you wanna off yourself as the project grows larger.
The good news though, is that you can turn the tables by using functions like min, max, and clamp.
We could refactor this code to set the width to a a clamped value that has a minimum of 200 pixels, a max of 600, and then a preferred value of 50%, turning 13 lines of code into 1 a or a 92% code reduction.
Speaking of code reduction, here's a little bonus tip.
In CSS, we often end up with these very long, hard to read class names.
But did you know that a You can use emoji characters as class names.
Instead of flexible container, why not just use a flex emoji?
Or instead of red text, why not red lipstick?
Is that a good idea?
A, I don't know.
Give it a try at your job and let me know what your boss says about it.
We have sort of a problem here.
Yeah.
Now, this next tip is really going to blow your mind if you've ever had a 2 code responsive image or video that maintains a certain aspect ratio.
I had to do this recently on Fireship IO to embed videos with a 16 by a 9 aspect ratio, which requires this hack, where you put 56.25% padding on the top, then give the child absolute positioning.
Today, although it's not supported everywhere a cut.
We can use the aspect ratio property.
Instead of that padding nonsense, we can just define the aspect ratio on the video and we're done.
A Canadian CSS code is a big part of making it more enjoyable, but of equal importance is making your code more flexible, so that refactoring is not a total nightmare.
A great way to achieve that is with CSS custom properties or variables.
Notice how we're using the same color value in multiple places.
A If we decide to change the color, we need to modify every line of code that references it.
A better approach is to define a global variable on the root selector, which can then be referenced wherever it's needed.
A good.
And now, when you decide to change it, you only have to modify one line of code.
Variables cascade like everything else in CSS, which means you can override them by redefining them somewhere deeper in a tree.
You can also combine them to compose more complex values.
For example, we might define our RGB color based on the value of 3 other variables, a And, this flexibility will really change your life by allowing you to quickly swap out different themes for your website.
Now, CSS is not really a programming language in the traditional sense, a But it does have the ability to run basic calculations using the calc function.
It allows you to calculate a value with some basic math, but the really cool thing about it is that you can combine different units.
A like you might want to subtract 50 pixels from the current viewport width.
In our code here, we have an animation where elements drop in from the top, but we want to stagger them a so they come in one after the other.
One way to achieve that is by applying a different animation delay for every single element, but that's very repetitive and hard to refactor.
A more sophisticated approach is to define an inline CSS variable for every item that defines its order.
Then, we can define the a commision delay as a calculation of the order variable times 100 milliseconds.
And now, we can handle an infinite number of elements without increasing our CSS footprint, thanks to the combined powers of calc and variables.
Now, I know I just said CSS is not a programming language, but did you know that it actually has a state management mechanism built into it?
A You can keep track of a running count in your CSS code without ever writing a line of JavaScript.
If you want to number headings in your HTML, the naive way to do it is to manually add those numbers errors in the HTML itself, because if you ever want to splice in a new heading, you'll have to renumber everything manually.
A smarter approach might be a CSS a counter.
You can create a counter in your code using the counter reset property.
Give it a name of anything you want, then increment it whenever the a desired selector as applied.
It'll start from 0, then add 1 to every h one element in the DOM.
And now, you never have to worry about numbering things in your HTML.
A And that brings us to our final tip.
When building a complex drop down menu, you might assume that some JavaScript is involved to manage the open and close state of the menu.
But, you might be surprised a bit how far you can get with just plain CSS.
Now, you're most likely familiar with the focus pseudo class, which is applied to an element when you go into a form input or a click on a button.
The problem is that when building a drop down, you might use focus to open a menu, but then when you click on something inside that menu, it loses focus and closes.
An ex And that's when you reach for JavaScript to manage state.
However, there's another pseudo class called focus within, and it stays active if any children also have focus.
And that one simple feature can eliminate a lot of JavaScript used to toggle on and off states.
And with that, you have 10 ways to make your CSS code more enjoyable to work with.
A but remember those browser vendor prefixes I mentioned earlier in the video?
Well, that stuff's like herpes.
It's not going away.
Luckily, we do have effective medications that will make it barely noticeable.
A tool you should know about is PostCSS, which itself uses a tool called Auto Prefixer to add all the vendor prefixes automatically.
In addition, it allows you to use modern CSS features even if they're not supported on your targeted browsers.
In addition, you may look into preprocessors like Sass, Less, or a stylist, but we'll save those for a future video.
Make sure to be a subscriber and leave a comment below because next week, I'll announce the winners of the t shirt giveaway.
Thanks for watching, and I will see you in the next one.

Speaker 0: In my recent poll with over 75,000 responses, CSS topped the list as the most painful technology web developers have to work with. They say it's broken, chaotic, and too damn hard. There's even conspiracy that it's bad by design to protect the app stores, but I think CSS is awesome. It's definitely bloated and difficult to learn comprehensively, but that's only because it's had to Evolve over the last 25 years. It came out at a time when Netscape was the top browser, and the idea of a responsive layout was more than a decade away.

A as more browsers hit the market, they all implemented CSS in different ways, leading to code that works in one browser, but not the other. Requiring you, the developer, a thread a bunch of confusing vendor prefixes in your code just to make it work across all browsers. So I totally get why you would hate CSS, but today is a therapy session where you'll learn how to write clean CSS us using modern features while avoiding the bad code that you shouldn't have to write in 2021. If you're new here, like and subscribe, and leave your favorite CSS pro tip in the comments. I'll pick a few of them to win this one of a kind t shirt next week.

The first thing you need to know is how to learn CSS. The way not to learn CSS is to use a framework like Bootstrap or Tailwind. They're sexy tools that can help you get a nice looking UI quickly, but if you use something like Tailwind in your project, it's like getting married. A for 1, you won't learn CSS fundamentals, you'll learn Tailwind. And 2, if you ever change your mind, you'll have to go through a very nasty divorce.

You want a divorce? I have wings, Tully. A I want to fly. When you learn basic CSS, you'll have more control over your code, creativity, and freedom. The best piece of advice that I didn't receive until well into my web development career, was to learn the CSS box model.

Because when you understand it, everything else in the language starts to make more sense. In fact, it's so easy, I'll just teach you the a box model right now. Think of every HTML element as a box. Inside that box, you have the content, which can have a width and height. You can add padding around that box to squeeze the content, then you can add a a border around the outside, then additional invisible space around the border called a margin.

Everything in CSS related to layout and position is influenced by the box model. If you open up Chrome DevTools, a You can see how the box model is computed for any element on the page. And, that brings me to tip number 2. Don't use Chrome when debugging CSS. Instead, check out Firefox.

Ex their dev tools are generally superior, especially when it comes to CSS. If I inspect an element, I have a breakdown of the box model like I do in Chrome, but I can also edit properties on it directly, a and Firefox gives me a breakdown of all the properties that are influencing the box model. It also provides useful annotations in the HTML, like when one element is causing another element to overflow. And, Firefox also provides really nice graphics for flex and grid layout. Speaking of which, layout or the positioning of elements relative to each other, has historically been one of the most challenging aspects of CSS.

Like the age old question of how do I center a div both horizontally a glee and vertically. One option is to give the child absolute positioning, then move it to the bottom right corner by using the top and left properties, then translate it back 50% to put it in in the center. That can work, but it's incredibly unintuitive. A much better approach with modern CSS is flexbox, which allows you to create a flexible column or row anywhere in the UI. When when an element has display flex, it also has an x and y axis on which you can align its children.

The children flow one way, which is known as a main axis and can be aligned in the center with the justify content property. Perpendicular to that is the cross axis, and we can move our element to the center with the align items property. A Flexbox is usually the first tool I reach for when it comes to layout, but it does have one major drawback. If you have a big complex UI with many intersecting rows and columns, you may end up with a lot of a container or wrapper elements in your HTML. These elements have no semantic meaning and are just there, so your CSS code has something to attach itself to.

Luckily, there's a modern CSS feature a called a grid that can obliterate much of your code. Unlike Flexbox, which only deals with individual columns and rows, grid allows you to think about the big picture a layout. If you've been a Web developer for a long time, it may look familiar, because it's very similar to table layout way back in the day. It's just much more developer friendly. A When you set an element to display grid, you can then define its children as a bunch of columns and rows.

Columns have a width, which can be defined with the grid template columns property. A We have 3 values here separated by spaces, which means our grid has 3 columns. Notice the f r value or fractional unit, which will responsibly share a pair of the available space with other columns in the grid. We can also define some rows, and now, every element inside the grid will be positioned automatically. But, the important thing to notice is the amount HTML and CSS that we've eliminated, compared to flexbox layout or, God forbid, table layout.

Now, 90% of the time when we talk about responsive layouts, a We're just talking about changing the width of something based on the available space on the device or viewport. There are many ways you might do that. For example, you might have article that has a preferred width of 50%, but on small screens, you wanna make it fixed at 200 pixels, or fixed at 800 pixels on large screens. A You could do that by writing media queries that will apply CSS conditionally based on the viewport size. The only problem with this is that media queries will make you wanna off yourself as the project grows larger.

The good news though, is that you can turn the tables by using functions like min, max, and clamp. We could refactor this code to set the width to a a clamped value that has a minimum of 200 pixels, a max of 600, and then a preferred value of 50%, turning 13 lines of code into 1 a or a 92% code reduction. Speaking of code reduction, here's a little bonus tip. In CSS, we often end up with these very long, hard to read class names. But did you know that a You can use emoji characters as class names.

Instead of flexible container, why not just use a flex emoji? Or instead of red text, why not red lipstick? Is that a good idea? A, I don't know. Give it a try at your job and let me know what your boss says about it.

We have sort of a problem here. Yeah. Now, this next tip is really going to blow your mind if you've ever had a 2 code responsive image or video that maintains a certain aspect ratio. I had to do this recently on Fireship IO to embed videos with a 16 by a 9 aspect ratio, which requires this hack, where you put 56.25% padding on the top, then give the child absolute positioning. Today, although it's not supported everywhere a cut.

We can use the aspect ratio property. Instead of that padding nonsense, we can just define the aspect ratio on the video and we're done. A Canadian CSS code is a big part of making it more enjoyable, but of equal importance is making your code more flexible, so that refactoring is not a total nightmare. A great way to achieve that is with CSS custom properties or variables. Notice how we're using the same color value in multiple places.

A If we decide to change the color, we need to modify every line of code that references it. A better approach is to define a global variable on the root selector, which can then be referenced wherever it's needed. A good. And now, when you decide to change it, you only have to modify one line of code. Variables cascade like everything else in CSS, which means you can override them by redefining them somewhere deeper in a tree.

You can also combine them to compose more complex values. For example, we might define our RGB color based on the value of 3 other variables, a And, this flexibility will really change your life by allowing you to quickly swap out different themes for your website. Now, CSS is not really a programming language in the traditional sense, a But it does have the ability to run basic calculations using the calc function. It allows you to calculate a value with some basic math, but the really cool thing about it is that you can combine different units. A like you might want to subtract 50 pixels from the current viewport width.

In our code here, we have an animation where elements drop in from the top, but we want to stagger them a so they come in one after the other. One way to achieve that is by applying a different animation delay for every single element, but that's very repetitive and hard to refactor. A more sophisticated approach is to define an inline CSS variable for every item that defines its order. Then, we can define the a commision delay as a calculation of the order variable times 100 milliseconds. And now, we can handle an infinite number of elements without increasing our CSS footprint, thanks to the combined powers of calc and variables.

Now, I know I just said CSS is not a programming language, but did you know that it actually has a state management mechanism built into it? A You can keep track of a running count in your CSS code without ever writing a line of JavaScript. If you want to number headings in your HTML, the naive way to do it is to manually add those numbers errors in the HTML itself, because if you ever want to splice in a new heading, you'll have to renumber everything manually. A smarter approach might be a CSS a counter. You can create a counter in your code using the counter reset property.

Give it a name of anything you want, then increment it whenever the a desired selector as applied. It'll start from 0, then add 1 to every h one element in the DOM. And now, you never have to worry about numbering things in your HTML. A And that brings us to our final tip. When building a complex drop down menu, you might assume that some JavaScript is involved to manage the open and close state of the menu.

But, you might be surprised a bit how far you can get with just plain CSS. Now, you're most likely familiar with the focus pseudo class, which is applied to an element when you go into a form input or a click on a button. The problem is that when building a drop down, you might use focus to open a menu, but then when you click on something inside that menu, it loses focus and closes. An ex And that's when you reach for JavaScript to manage state. However, there's another pseudo class called focus within, and it stays active if any children also have focus.

And that one simple feature can eliminate a lot of JavaScript used to toggle on and off states. And with that, you have 10 ways to make your CSS code more enjoyable to work with. A but remember those browser vendor prefixes I mentioned earlier in the video? Well, that stuff's like herpes. It's not going away.

Luckily, we do have effective medications that will make it barely noticeable. A tool you should know about is PostCSS, which itself uses a tool called Auto Prefixer to add all the vendor prefixes automatically. In addition, it allows you to use modern CSS features even if they're not supported on your targeted browsers. In addition, you may look into preprocessors like Sass, Less, or a stylist, but we'll save those for a future video. Make sure to be a subscriber and leave a comment below because next week, I'll announce the winners of the t shirt giveaway.

Thanks for watching, and I will see you in the next one.
In my recent poll with over 75,000 responses, CSS topped the list as the most painful technology web developers have to work with. They say it's broken, chaotic, and too damn hard. There's even conspiracy that it's bad by design to protect the app stores, but I think CSS is awesome. It's definitely bloated and difficult to learn comprehensively, but that's only because it's had to Evolve over the last 25 years. It came out at a time when Netscape was the top browser, and the idea of a responsive layout was more than a decade away. A as more browsers hit the market, they all implemented CSS in different ways, leading to code that works in one browser, but not the other. Requiring you, the developer, a thread a bunch of confusing vendor prefixes in your code just to make it work across all browsers. So I totally get why you would hate CSS, but today is a therapy session where you'll learn how to write clean CSS us using modern features while avoiding the bad code that you shouldn't have to write in 2021. If you're new here, like and subscribe, and leave your favorite CSS pro tip in the comments. I'll pick a few of them to win this one of a kind t shirt next week. The first thing you need to know is how to learn CSS. The way not to learn CSS is to use a framework like Bootstrap or Tailwind.
They're sexy tools that can help you get a nice looking UI quickly, but if you use something like Tailwind in your project, it's like getting married. A for 1, you won't learn CSS fundamentals, you'll learn Tailwind. And 2, if you ever change your mind, you'll have to go through a very nasty divorce.
fashion
You want a divorce? I have wings, Tully. A I want to fly. When you learn basic CSS, you'll have more control over your code, creativity, and freedom. The best piece of advice that I didn't receive until well into my web development career, was to learn the CSS box model. Because when you understand it, everything else in the language starts to make more sense. In fact, it's so easy, I'll just teach you the a box model right now. Think of every HTML element as a box. Inside that box, you have the content, which can have a width and height. You can add padding around that box to squeeze the content, then you can add a a border around the outside, then additional invisible space around the border called a margin. Everything in CSS related to layout and position is influenced by the box model. If you open up Chrome DevTools, a You can see how the box model is computed for any element on the page. And, that brings me to tip number 2. Don't use Chrome when debugging CSS. Instead, check out Firefox. Ex their dev tools are generally superior, especially when it comes to CSS. If I inspect an element, I have a breakdown of the box model like I do in Chrome, but I can also edit properties on it directly, a and Firefox gives me a breakdown of all the properties that are influencing the box model. It also provides useful annotations in the HTML, like when one element is causing another element to overflow. And, Firefox also provides really nice graphics for flex and grid layout. Speaking of which, layout or the positioning of elements relative to each other, has historically been one of the most challenging aspects of CSS. Like the age old question of how do I center a div both horizontally a glee and vertically. One option is to give the child absolute positioning, then move it to the bottom right corner by using the top and left properties, then translate it back 50% to put it in in the center. That can work, but it's incredibly unintuitive. A much better approach with modern CSS is flexbox, which allows you to create a flexible column or row anywhere in the UI.
When when an element has display flex, it also has an x and y axis on which you can align its children. The children flow one way, which is known as a main axis and can be aligned in the center with the justify content property. Perpendicular to that is the cross axis, and we can move our element to the center with the align items property.
children
A Flexbox is usually the first tool I reach for when it comes to layout, but it does have one major drawback. If you have a big complex UI with many intersecting rows and columns, you may end up with a lot of a container or wrapper elements in your HTML. These elements have no semantic meaning and are just there, so your CSS code has something to attach itself to. Luckily, there's a modern CSS feature a called a grid that can obliterate much of your code. Unlike Flexbox, which only deals with individual columns and rows, grid allows you to think about the big picture a layout. If you've been a Web developer for a long time, it may look familiar, because it's very similar to table layout way back in the day. It's just much more developer friendly. A When you set an element to display grid, you can then define its children as a bunch of columns and rows. Columns have a width, which can be defined with the grid template columns property. A We have 3 values here separated by spaces, which means our grid has 3 columns. Notice the f r value or fractional unit, which will responsibly share a pair of the available space with other columns in the grid. We can also define some rows, and now, every element inside the grid will be positioned automatically. But, the important thing to notice is the amount HTML and CSS that we've eliminated, compared to flexbox layout or, God forbid, table layout. Now, 90% of the time when we talk about responsive layouts, a We're just talking about changing the width of something based on the available space on the device or viewport. There are many ways you might do that. For example, you might have article that has a preferred width of 50%, but on small screens, you wanna make it fixed at 200 pixels, or fixed at 800 pixels on large screens.
A You could do that by writing media queries that will apply CSS conditionally based on the viewport size. The only problem with this is that media queries will make you wanna off yourself as the project grows larger. The good news though, is that you can turn the tables by using functions like min, max, and clamp.
media
social media
multimedia
We could refactor this code to set the width to a a clamped value that has a minimum of 200 pixels, a max of 600, and then a preferred value of 50%, turning 13 lines of code into 1 a or a 92% code reduction.
Speaking of code reduction, here's a little bonus tip. In CSS, we often end up with these very long, hard to read class names. But did you know that a You can use emoji characters as class names. Instead of flexible container, why not just use a flex emoji? Or instead of red text, why not red lipstick? Is that a good idea? A, I don't know. Give it a try at your job and let me know what your boss says about it. We have sort of a problem here.
cosmetics
Yeah. Now, this next tip is really going to blow your mind if you've ever had a 2 code responsive image or video that maintains a certain aspect ratio. I had to do this recently on Fireship IO to embed videos with a 16 by a 9 aspect ratio, which requires this hack, where you put 56.25% padding on the top, then give the child absolute positioning.
animation
video gaming
Today, although it's not supported everywhere a cut. We can use the aspect ratio property. Instead of that padding nonsense, we can just define the aspect ratio on the video and we're done. A Canadian CSS code is a big part of making it more enjoyable, but of equal importance is making your code more flexible, so that refactoring is not a total nightmare. A great way to achieve that is with CSS custom properties or variables. Notice how we're using the same color value in multiple places.
canada
graphic design
A If we decide to change the color, we need to modify every line of code that references it. A better approach is to define a global variable on the root selector, which can then be referenced wherever it's needed. A good. And now, when you decide to change it, you only have to modify one line of code. Variables cascade like everything else in CSS, which means you can override them by redefining them somewhere deeper in a tree. You can also combine them to compose more complex values. For example, we might define our RGB color based on the value of 3 other variables, a And, this flexibility will really change your life by allowing you to quickly swap out different themes for your website.
Now, CSS is not really a programming language in the traditional sense, a But it does have the ability to run basic calculations using the calc function. It allows you to calculate a value with some basic math, but the really cool thing about it is that you can combine different units. A like you might want to subtract 50 pixels from the current viewport width. In our code here, we have an animation where elements drop in from the top, but we want to stagger them a so they come in one after the other. One way to achieve that is by applying a different animation delay for every single element, but that's very repetitive and hard to refactor. A more sophisticated approach is to define an inline CSS variable for every item that defines its order. Then, we can define the a commision delay as a calculation of the order variable times 100 milliseconds.
animation
programming
And now, we can handle an infinite number of elements without increasing our CSS footprint, thanks to the combined powers of calc and variables. Now, I know I just said CSS is not a programming language, but did you know that it actually has a state management mechanism built into it? A You can keep track of a running count in your CSS code without ever writing a line of JavaScript. If you want to number headings in your HTML, the naive way to do it is to manually add those numbers errors in the HTML itself, because if you ever want to splice in a new heading, you'll have to renumber everything manually. A smarter approach might be a CSS a counter. You can create a counter in your code using the counter reset property. Give it a name of anything you want, then increment it whenever the a desired selector as applied. It'll start from 0, then add 1 to every h one element in the DOM. And now, you never have to worry about numbering things in your HTML. A And that brings us to our final tip. When building a complex drop down menu, you might assume that some JavaScript is involved to manage the open and close state of the menu. But, you might be surprised a bit how far you can get with just plain CSS. Now, you're most likely familiar with the focus pseudo class, which is applied to an element when you go into a form input or a click on a button. The problem is that when building a drop down, you might use focus to open a menu, but then when you click on something inside that menu, it loses focus and closes. An ex And that's when you reach for JavaScript to manage state. However, there's another pseudo class called focus within, and it stays active if any children also have focus. And that one simple feature can eliminate a lot of JavaScript used to toggle on and off states. And with that, you have 10 ways to make your CSS code more enjoyable to work with. A but remember those browser vendor prefixes I mentioned earlier in the video? Well, that stuff's like herpes. It's not going away. Luckily, we do have effective medications that will make it barely noticeable. A tool you should know about is PostCSS, which itself uses a tool called Auto Prefixer to add all the vendor prefixes automatically. In addition, it allows you to use modern CSS features even if they're not supported on your targeted browsers. In addition, you may look into preprocessors like Sass, Less, or a stylist, but we'll save those for a future video. Make sure to be a subscriber and leave a comment below because next week, I'll announce the winners of the t shirt giveaway. Thanks for watching, and I will see you in the next one.
In my recent poll with over 75,000 responses, CSS topped the list as the most painful technology web developers have to work with. They say it's broken, chaotic, and too damn hard. There's even conspiracy that it's bad by design to protect the app stores, but I think CSS is awesome. It's definitely bloated and difficult to learn comprehensively, but that's only because it's had to Evolve over the last 25 years. It came out at a time when Netscape was the top browser, and the idea of a responsive layout was more than a decade away. A as more browsers hit the market, they all implemented CSS in different ways, leading to code that works in one browser, but not the other. Requiring you, the developer, a thread a bunch of confusing vendor prefixes in your code just to make it work across all browsers. So I totally get why you would hate CSS, but today is a therapy session where you'll learn how to write clean CSS us using modern features while avoiding the bad code that you shouldn't have to write in 2021. If you're new here, like and subscribe, and leave your favorite CSS pro tip in the comments. I'll pick a few of them to win this one of a kind t shirt next week. The first thing you need to know is how to learn CSS. The way not to learn CSS is to use a framework like Bootstrap or Tailwind. They're sexy tools that can help you get a nice looking UI quickly, but if you use something like Tailwind in your project, it's like getting married. A for 1, you won't learn CSS fundamentals, you'll learn Tailwind. And 2, if you ever change your mind, you'll have to go through a very nasty divorce. You want a divorce? I have wings, Tully. A I want to fly. When you learn basic CSS, you'll have more control over your code, creativity, and freedom. The best piece of advice that I didn't receive until well into my web development career, was to learn the CSS box model. Because when you understand it, everything else in the language starts to make more sense. In fact, it's so easy, I'll just teach you the a box model right now. Think of every HTML element as a box. Inside that box, you have the content, which can have a width and height. You can add padding around that box to squeeze the content, then you can add a a border around the outside, then additional invisible space around the border called a margin. Everything in CSS related to layout and position is influenced by the box model. If you open up Chrome DevTools, a You can see how the box model is computed for any element on the page. And, that brings me to tip number 2. Don't use Chrome when debugging CSS. Instead, check out Firefox. Ex their dev tools are generally superior, especially when it comes to CSS. If I inspect an element, I have a breakdown of the box model like I do in Chrome, but I can also edit properties on it directly, a and Firefox gives me a breakdown of all the properties that are influencing the box model. It also provides useful annotations in the HTML, like when one element is causing another element to overflow. And, Firefox also provides really nice graphics for flex and grid layout. Speaking of which, layout or the positioning of elements relative to each other, has historically been one of the most challenging aspects of CSS. Like the age old question of how do I center a div both horizontally a glee and vertically. One option is to give the child absolute positioning, then move it to the bottom right corner by using the top and left properties, then translate it back 50% to put it in in the center. That can work, but it's incredibly unintuitive. A much better approach with modern CSS is flexbox, which allows you to create a flexible column or row anywhere in the UI. When when an element has display flex, it also has an x and y axis on which you can align its children. The children flow one way, which is known as a main axis and can be aligned in the center with the justify content property. Perpendicular to that is the cross axis, and we can move our element to the center with the align items property. A Flexbox is usually the first tool I reach for when it comes to layout, but it does have one major drawback. If you have a big complex UI with many intersecting rows and columns, you may end up with a lot of a container or wrapper elements in your HTML. These elements have no semantic meaning and are just there, so your CSS code has something to attach itself to. Luckily, there's a modern CSS feature a called a grid that can obliterate much of your code. Unlike Flexbox, which only deals with individual columns and rows, grid allows you to think about the big picture a layout. If you've been a Web developer for a long time, it may look familiar, because it's very similar to table layout way back in the day. It's just much more developer friendly. A When you set an element to display grid, you can then define its children as a bunch of columns and rows. Columns have a width, which can be defined with the grid template columns property. A We have 3 values here separated by spaces, which means our grid has 3 columns. Notice the f r value or fractional unit, which will responsibly share a pair of the available space with other columns in the grid. We can also define some rows, and now, every element inside the grid will be positioned automatically. But, the important thing to notice is the amount HTML and CSS that we've eliminated, compared to flexbox layout or, God forbid, table layout. Now, 90% of the time when we talk about responsive layouts, a We're just talking about changing the width of something based on the available space on the device or viewport. There are many ways you might do that. For example, you might have article that has a preferred width of 50%, but on small screens, you wanna make it fixed at 200 pixels, or fixed at 800 pixels on large screens. A You could do that by writing media queries that will apply CSS conditionally based on the viewport size. The only problem with this is that media queries will make you wanna off yourself as the project grows larger. The good news though, is that you can turn the tables by using functions like min, max, and clamp. We could refactor this code to set the width to a a clamped value that has a minimum of 200 pixels, a max of 600, and then a preferred value of 50%, turning 13 lines of code into 1 a or a 92% code reduction. Speaking of code reduction, here's a little bonus tip. In CSS, we often end up with these very long, hard to read class names. But did you know that a You can use emoji characters as class names. Instead of flexible container, why not just use a flex emoji? Or instead of red text, why not red lipstick? Is that a good idea? A, I don't know. Give it a try at your job and let me know what your boss says about it. We have sort of a problem here. Yeah. Now, this next tip is really going to blow your mind if you've ever had a 2 code responsive image or video that maintains a certain aspect ratio. I had to do this recently on Fireship IO to embed videos with a 16 by a 9 aspect ratio, which requires this hack, where you put 56.25% padding on the top, then give the child absolute positioning. Today, although it's not supported everywhere a cut. We can use the aspect ratio property. Instead of that padding nonsense, we can just define the aspect ratio on the video and we're done. A Canadian CSS code is a big part of making it more enjoyable, but of equal importance is making your code more flexible, so that refactoring is not a total nightmare. A great way to achieve that is with CSS custom properties or variables. Notice how we're using the same color value in multiple places. A If we decide to change the color, we need to modify every line of code that references it. A better approach is to define a global variable on the root selector, which can then be referenced wherever it's needed. A good. And now, when you decide to change it, you only have to modify one line of code. Variables cascade like everything else in CSS, which means you can override them by redefining them somewhere deeper in a tree. You can also combine them to compose more complex values. For example, we might define our RGB color based on the value of 3 other variables, a And, this flexibility will really change your life by allowing you to quickly swap out different themes for your website. Now, CSS is not really a programming language in the traditional sense, a But it does have the ability to run basic calculations using the calc function. It allows you to calculate a value with some basic math, but the really cool thing about it is that you can combine different units. A like you might want to subtract 50 pixels from the current viewport width. In our code here, we have an animation where elements drop in from the top, but we want to stagger them a so they come in one after the other. One way to achieve that is by applying a different animation delay for every single element, but that's very repetitive and hard to refactor. A more sophisticated approach is to define an inline CSS variable for every item that defines its order. Then, we can define the a commision delay as a calculation of the order variable times 100 milliseconds. And now, we can handle an infinite number of elements without increasing our CSS footprint, thanks to the combined powers of calc and variables. Now, I know I just said CSS is not a programming language, but did you know that it actually has a state management mechanism built into it? A You can keep track of a running count in your CSS code without ever writing a line of JavaScript. If you want to number headings in your HTML, the naive way to do it is to manually add those numbers errors in the HTML itself, because if you ever want to splice in a new heading, you'll have to renumber everything manually. A smarter approach might be a CSS a counter. You can create a counter in your code using the counter reset property. Give it a name of anything you want, then increment it whenever the a desired selector as applied. It'll start from 0, then add 1 to every h one element in the DOM. And now, you never have to worry about numbering things in your HTML. A And that brings us to our final tip. When building a complex drop down menu, you might assume that some JavaScript is involved to manage the open and close state of the menu. But, you might be surprised a bit how far you can get with just plain CSS. Now, you're most likely familiar with the focus pseudo class, which is applied to an element when you go into a form input or a click on a button. The problem is that when building a drop down, you might use focus to open a menu, but then when you click on something inside that menu, it loses focus and closes. An ex And that's when you reach for JavaScript to manage state. However, there's another pseudo class called focus within, and it stays active if any children also have focus. And that one simple feature can eliminate a lot of JavaScript used to toggle on and off states. And with that, you have 10 ways to make your CSS code more enjoyable to work with. A but remember those browser vendor prefixes I mentioned earlier in the video? Well, that stuff's like herpes. It's not going away. Luckily, we do have effective medications that will make it barely noticeable. A tool you should know about is PostCSS, which itself uses a tool called Auto Prefixer to add all the vendor prefixes automatically. In addition, it allows you to use modern CSS features even if they're not supported on your targeted browsers. In addition, you may look into preprocessors like Sass, Less, or a stylist, but we'll save those for a future video. Make sure to be a subscriber and leave a comment below because next week, I'll announce the winners of the t shirt giveaway. Thanks for watching, and I will see you in the next one.
In
in
my
my
recent
recent
poll
poll
with
with
over
over
75,000
75,000
responses,
responses
CSS
css
topped
topped
the
the
list
list
as
as
the
the
most
most
painful
painful
technology
technology
web
web
developers
developers
have
have
to
to
work
work
with.
with
They
they
say
say
it's
it's
broken,
broken
chaotic,
chaotic
and
and
too
too
damn
damn
hard.
hard
There's
there's
even
even
conspiracy
conspiracy
that
that
it's
it's
bad
bad
by
by
design
design
to
to
protect
protect
the
the
app
app
stores,
stores
but
but
I
i
think
think
CSS
css
is
is
awesome.
awesome
It's
it's
definitely
definitely
bloated
bloated
and
and
difficult
difficult
to
to
learn
learn
comprehensively,
comprehensively
but
but
that's
that's
only
only
because
because
it's
it's
had
had
to
to
Evolve
evolve
over
over
the
the
last
last
25
25
years.
years
It
it
came
came
out
out
at
at
a
a
time
time
when
when
Netscape
netscape
was
was
the
the
top
top
browser,
browser
and
and
the
the
idea
idea
of
of
a
a
responsive
responsive
layout
layout
was
was
more
more
than
than
a
a
decade
decade
away.
away
A
a
as
as
more
more
browsers
browsers
hit
hit
the
the
market,
market
they
they
all
all
implemented
implemented
CSS
css
in
in
different
different
ways,
ways
leading
leading
to
to
code
code
that
that
works
works
in
in
one
one
browser,
browser
but
but
not
not
the
the
other.
other
Requiring
requiring
you,
you
the
the
developer,
developer
a
a
thread
thread
a
a
bunch
bunch
of
of
confusing
confusing
vendor
vendor
prefixes
prefixes
in
in
your
your
code
code
just
just
to
to
make
make
it
it
work
work
across
across
all
all
browsers.
browsers
So
so
I
i
totally
totally
get
get
why
why
you
you
would
would
hate
hate
CSS,
css
but
but
today
today
is
is
a
a
therapy
therapy
session
session
where
where
you'll
you'll
learn
learn
how
how
to
to
write
write
clean
clean
CSS
css
us
us
using
using
modern
modern
features
features
while
while
avoiding
avoiding
the
the
bad
bad
code
code
that
that
you
you
shouldn't
shouldn't
have
have
to
to
write
write
in
in
2021.
2021
If
if
you're
you're
new
new
here,
here
like
like
and
and
subscribe,
subscribe
and
and
leave
leave
your
your
favorite
favorite
CSS
css
pro
pro
tip
tip
in
in
the
the
comments.
comments
I'll
i'll
pick
pick
a
a
few
few
of
of
them
them
to
to
win
win
this
this
one
one
of
of
a
a
kind
kind
t
t
shirt
shirt
next
next
week.
week
The
the
first
first
thing
thing
you
you
need
need
to
to
know
know
is
is
how
how
to
to
learn
learn
CSS.
css
The
the
way
way
not
not
to
to
learn
learn
CSS
css
is
is
to
to
use
use
a
a
framework
framework
like
like
Bootstrap
bootstrap
or
or
Tailwind.
tailwind
They're
they're
sexy
sexy
tools
tools
that
that
can
can
help
help
you
you
get
get
a
a
nice
nice
looking
looking
UI
ui
quickly,
quickly
but
but
if
if
you
you
use
use
something
something
like
like
Tailwind
tailwind
in
in
your
your
project,
project
it's
it's
like
like
getting
getting
married.
married
A
a
for
for
1,
1
you
you
won't
won't
learn
learn
CSS
css
fundamentals,
fundamentals
you'll
you'll
learn
learn
Tailwind.
tailwind
And
and
2,
2
if
if
you
you
ever
ever
change
change
your
your
mind,
mind
you'll
you'll
have
have
to
to
go
go
through
through
a
a
very
very
nasty
nasty
divorce.
divorce
You
you
want
want
a
a
divorce?
divorce
I
i
have
have
wings,
wings
Tully.
tully
A
a
I
i
want
want
to
to
fly.
fly
When
when
you
you
learn
learn
basic
basic
CSS,
css
you'll
you'll
have
have
more
more
control
control
over
over
your
your
code,
code
creativity,
creativity
and
and
freedom.
freedom
The
the
best
best
piece
piece
of
of
advice
advice
that
that
I
i
didn't
didn't
receive
receive
until
until
well
well
into
into
my
my
web
web
development
development
career,
career
was
was
to
to
learn
learn
the
the
CSS
css
box
box
model.
model
Because
because
when
when
you
you
understand
understand
it,
it
everything
everything
else
else
in
in
the
the
language
language
starts
starts
to
to
make
make
more
more
sense.
sense
In
in
fact,
fact
it's
it's
so
so
easy,
easy
I'll
i'll
just
just
teach
teach
you
you
the
the
a
a
box
box
model
model
right
right
now.
now
Think
think
of
of
every
every
HTML
html
element
element
as
as
a
a
box.
box
Inside
inside
that
that
box,
box
you
you
have
have
the
the
content,
content
which
which
can
can
have
have
a
a
width
width
and
and
height.
height
You
you
can
can
add
add
padding
padding
around
around
that
that
box
box
to
to
squeeze
squeeze
the
the
content,
content
then
then
you
you
can
can
add
add
a
a
a
a
border
border
around
around
the
the
outside,
outside
then
then
additional
additional
invisible
invisible
space
space
around
around
the
the
border
border
called
called
a
a
margin.
margin
Everything
everything
in
in
CSS
css
related
related
to
to
layout
layout
and
and
position
position
is
is
influenced
influenced
by
by
the
the
box
box
model.
model
If
if
you
you
open
open
up
up
Chrome
chrome
DevTools,
devtools
a
a
You
you
can
can
see
see
how
how
the
the
box
box
model
model
is
is
computed
computed
for
for
any
any
element
element
on
on
the
the
page.
page
And,
and
that
that
brings
brings
me
me
to
to
tip
tip
number
number
2.
2
Don't
don't
use
use
Chrome
chrome
when
when
debugging
debugging
CSS.
css
Instead,
instead
check
check
out
out
Firefox.
firefox
Ex
ex
their
their
dev
dev
tools
tools
are
are
generally
generally
superior,
superior
especially
especially
when
when
it
it
comes
comes
to
to
CSS.
css
If
if
I
i
inspect
inspect
an
an
element,
element
I
i
have
have
a
a
breakdown
breakdown
of
of
the
the
box
box
model
model
like
like
I
i
do
do
in
in
Chrome,
chrome
but
but
I
i
can
can
also
also
edit
edit
properties
properties
on
on
it
it
directly,
directly
a
a
and
and
Firefox
firefox
gives
gives
me
me
a
a
breakdown
breakdown
of
of
all
all
the
the
properties
properties
that
that
are
are
influencing
influencing
the
the
box
box
model.
model
It
it
also
also
provides
provides
useful
useful
annotations
annotations
in
in
the
the
HTML,
html
like
like
when
when
one
one
element
element
is
is
causing
causing
another
another
element
element
to
to
overflow.
overflow
And,
and
Firefox
firefox
also
also
provides
provides
really
really
nice
nice
graphics
graphics
for
for
flex
flex
and
and
grid
grid
layout.
layout
Speaking
speaking
of
of
which,
which
layout
layout
or
or
the
the
positioning
positioning
of
of
elements
elements
relative
relative
to
to
each
each
other,
other
has
has
historically
historically
been
been
one
one
of
of
the
the
most
most
challenging
challenging
aspects
aspects
of
of
CSS.
css
Like
like
the
the
age
age
old
old
question
question
of
of
how
how
do
do
I
i
center
center
a
a
div
div
both
both
horizontally
horizontally
a
a
glee
glee
and
and
vertically.
vertically
One
one
option
option
is
is
to
to
give
give
the
the
child
child
absolute
absolute
positioning,
positioning
then
then
move
move
it
it
to
to
the
the
bottom
bottom
right
right
corner
corner
by
by
using
using
the
the
top
top
and
and
left
left
properties,
properties
then
then
translate
translate
it
it
back
back
50%
50%
to
to
put
put
it
it
in
in
in
in
the
the
center.
center
That
that
can
can
work,
work
but
but
it's
it's
incredibly
incredibly
unintuitive.
unintuitive
A
a
much
much
better
better
approach
approach
with
with
modern
modern
CSS
css
is
is
flexbox,
flexbox
which
which
allows
allows
you
you
to
to
create
create
a
a
flexible
flexible
column
column
or
or
row
row
anywhere
anywhere
in
in
the
the
UI.
ui
When
when
when
when
an
an
element
element
has
has
display
display
flex,
flex
it
it
also
also
has
has
an
an
x
x
and
and
y
y
axis
axis
on
on
which
which
you
you
can
can
align
align
its
its
children.
children
The
the
children
children
flow
flow
one
one
way,
way
which
which
is
is
known
known
as
as
a
a
main
main
axis
axis
and
and
can
can
be
be
aligned
aligned
in
in
the
the
center
center
with
with
the
the
justify
justify
content
content
property.
property
Perpendicular
perpendicular
to
to
that
that
is
is
the
the
cross
cross
axis,
axis
and
and
we
we
can
can
move
move
our
our
element
element
to
to
the
the
center
center
with
with
the
the
align
align
items
items
property.
property
A
a
Flexbox
flexbox
is
is
usually
usually
the
the
first
first
tool
tool
I
i
reach
reach
for
for
when
when
it
it
comes
comes
to
to
layout,
layout
but
but
it
it
does
does
have
have
one
one
major
major
drawback.
drawback
If
if
you
you
have
have
a
a
big
big
complex
complex
UI
ui
with
with
many
many
intersecting
intersecting
rows
rows
and
and
columns,
columns
you
you
may
may
end
end
up
up
with
with
a
a
lot
lot
of
of
a
a
container
container
or
or
wrapper
wrapper
elements
elements
in
in
your
your
HTML.
html
These
these
elements
elements
have
have
no
no
semantic
semantic
meaning
meaning
and
and
are
are
just
just
there,
there
so
so
your
your
CSS
css
code
code
has
has
something
something
to
to
attach
attach
itself
itself
to.
to
Luckily,
luckily
there's
there's
a
a
modern
modern
CSS
css
feature
feature
a
a
called
called
a
a
grid
grid
that
that
can
can
obliterate
obliterate
much
much
of
of
your
your
code.
code
Unlike
unlike
Flexbox,
flexbox
which
which
only
only
deals
deals
with
with
individual
individual
columns
columns
and
and
rows,
rows
grid
grid
allows
allows
you
you
to
to
think
think
about
about
the
the
big
big
picture
picture
a
a
layout.
layout
If
if
you've
you've
been
been
a
a
Web
web
developer
developer
for
for
a
a
long
long
time,
time
it
it
may
may
look
look
familiar,
familiar
because
because
it's
it's
very
very
similar
similar
to
to
table
table
layout
layout
way
way
back
back
in
in
the
the
day.
day
It's
it's
just
just
much
much
more
more
developer
developer
friendly.
friendly
A
a
When
when
you
you
set
set
an
an
element
element
to
to
display
display
grid,
grid
you
you
can
can
then
then
define
define
its
its
children
children
as
as
a
a
bunch
bunch
of
of
columns
columns
and
and
rows.
rows
Columns
columns
have
have
a
a
width,
width
which
which
can
can
be
be
defined
defined
with
with
the
the
grid
grid
template
template
columns
columns
property.
property
A
a
We
we
have
have
3
3
values
values
here
here
separated
separated
by
by
spaces,
spaces
which
which
means
means
our
our
grid
grid
has
has
3
3
columns.
columns
Notice
notice
the
the
f
f
r
r
value
value
or
or
fractional
fractional
unit,
unit
which
which
will
will
responsibly
responsibly
share
share
a
a
pair
pair
of
of
the
the
available
available
space
space
with
with
other
other
columns
columns
in
in
the
the
grid.
grid
We
we
can
can
also
also
define
define
some
some
rows,
rows
and
and
now,
now
every
every
element
element
inside
inside
the
the
grid
grid
will
will
be
be
positioned
positioned
automatically.
automatically
But,
but
the
the
important
important
thing
thing
to
to
notice
notice
is
is
the
the
amount
amount
HTML
html
and
and
CSS
css
that
that
we've
we've
eliminated,
eliminated
compared
compared
to
to
flexbox
flexbox
layout
layout
or,
or
God
god
forbid,
forbid
table
table
layout.
layout
Now,
now
90%
90%
of
of
the
the
time
time
when
when
we
we
talk
talk
about
about
responsive
responsive
layouts,
layouts
a
a
We're
we're
just
just
talking
talking
about
about
changing
changing
the
the
width
width
of
of
something
something
based
based
on
on
the
the
available
available
space
space
on
on
the
the
device
device
or
or
viewport.
viewport
There
there
are
are
many
many
ways
ways
you
you
might
might
do
do
that.
that
For
for
example,
example
you
you
might
might
have
have
article
article
that
that
has
has
a
a
preferred
preferred
width
width
of
of
50%,
50%
but
but
on
on
small
small
screens,
screens
you
you
wanna
wanna
make
make
it
it
fixed
fixed
at
at
200
200
pixels,
pixels
or
or
fixed
fixed
at
at
800
800
pixels
pixels
on
on
large
large
screens.
screens
A
a
You
you
could
could
do
do
that
that
by
by
writing
writing
media
media
queries
queries
that
that
will
will
apply
apply
CSS
css
conditionally
conditionally
based
based
on
on
the
the
viewport
viewport
size.
size
The
the
only
only
problem
problem
with
with
this
this
is
is
that
that
media
media
queries
queries
will
will
make
make
you
you
wanna
wanna
off
off
yourself
yourself
as
as
the
the
project
project
grows
grows
larger.
larger
The
the
good
good
news
news
though,
though
is
is
that
that
you
you
can
can
turn
turn
the
the
tables
tables
by
by
using
using
functions
functions
like
like
min,
min
max,
max
and
and
clamp.
clamp
We
we
could
could
refactor
refactor
this
this
code
code
to
to
set
set
the
the
width
width
to
to
a
a
a
a
clamped
clamped
value
value
that
that
has
has
a
a
minimum
minimum
of
of
200
200
pixels,
pixels
a
a
max
max
of
of
600,
600
and
and
then
then
a
a
preferred
preferred
value
value
of
of
50%,
50%
turning
turning
13
13
lines
lines
of
of
code
code
into
into
1
1
a
a
or
or
a
a
92%
92%
code
code
reduction.
reduction
Speaking
speaking
of
of
code
code
reduction,
reduction
here's
here's
a
a
little
little
bonus
bonus
tip.
tip
In
in
CSS,
css
we
we
often
often
end
end
up
up
with
with
these
these
very
very
long,
long
hard
hard
to
to
read
read
class
class
names.
names
But
but
did
did
you
you
know
know
that
that
a
a
You
you
can
can
use
use
emoji
emoji
characters
characters
as
as
class
class
names.
names
Instead
instead
of
of
flexible
flexible
container,
container
why
why
not
not
just
just
use
use
a
a
flex
flex
emoji?
emoji
Or
or
instead
instead
of
of
red
red
text,
text
why
why
not
not
red
red
lipstick?
lipstick
Is
is
that
that
a
a
good
good
idea?
idea
A,
a
I
i
don't
don't
know.
know
Give
give
it
it
a
a
try
try
at
at
your
your
job
job
and
and
let
let
me
me
know
know
what
what
your
your
boss
boss
says
says
about
about
it.
it
We
we
have
have
sort
sort
of
of
a
a
problem
problem
here.
here
Yeah.
yeah
Now,
now
this
this
next
next
tip
tip
is
is
really
really
going
going
to
to
blow
blow
your
your
mind
mind
if
if
you've
you've
ever
ever
had
had
a
a
2
2
code
code
responsive
responsive
image
image
or
or
video
video
that
that
maintains
maintains
a
a
certain
certain
aspect
aspect
ratio.
ratio
I
i
had
had
to
to
do
do
this
this
recently
recently
on
on
Fireship
fireship
IO
io
to
to
embed
embed
videos
videos
with
with
a
a
16
16
by
by
a
a
9
9
aspect
aspect
ratio,
ratio
which
which
requires
requires
this
this
hack,
hack
where
where
you
you
put
put
56.25%
56.25%
padding
padding
on
on
the
the
top,
top
then
then
give
give
the
the
child
child
absolute
absolute
positioning.
positioning
Today,
today
although
although
it's
it's
not
not
supported
supported
everywhere
everywhere
a
a
cut.
cut
We
we
can
can
use
use
the
the
aspect
aspect
ratio
ratio
property.
property
Instead
instead
of
of
that
that
padding
padding
nonsense,
nonsense
we
we
can
can
just
just
define
define
the
the
aspect
aspect
ratio
ratio
on
on
the
the
video
video
and
and
we're
we're
done.
done
A
a
Canadian
canadian
CSS
css
code
code
is
is
a
a
big
big
part
part
of
of
making
making
it
it
more
more
enjoyable,
enjoyable
but
but
of
of
equal
equal
importance
importance
is
is
making
making
your
your
code
code
more
more
flexible,
flexible
so
so
that
that
refactoring
refactoring
is
is
not
not
a
a
total
total
nightmare.
nightmare
A
a
great
great
way
way
to
to
achieve
achieve
that
that
is
is
with
with
CSS
css
custom
custom
properties
properties
or
or
variables.
variables
Notice
notice
how
how
we're
we're
using
using
the
the
same
same
color
color
value
value
in
in
multiple
multiple
places.
places
A
a
If
if
we
we
decide
decide
to
to
change
change
the
the
color,
color
we
we
need
need
to
to
modify
modify
every
every
line
line
of
of
code
code
that
that
references
references
it.
it
A
a
better
better
approach
approach
is
is
to
to
define
define
a
a
global
global
variable
variable
on
on
the
the
root
root
selector,
selector
which
which
can
can
then
then
be
be
referenced
referenced
wherever
wherever
it's
it's
needed.
needed
A
a
good.
good
And
and
now,
now
when
when
you
you
decide
decide
to
to
change
change
it,
it
you
you
only
only
have
have
to
to
modify
modify
one
one
line
line
of
of
code.
code
Variables
variables
cascade
cascade
like
like
everything
everything
else
else
in
in
CSS,
css
which
which
means
means
you
you
can
can
override
override
them
them
by
by
redefining
redefining
them
them
somewhere
somewhere
deeper
deeper
in
in
a
a
tree.
tree
You
you
can
can
also
also
combine
combine
them
them
to
to
compose
compose
more
more
complex
complex
values.
values
For
for
example,
example
we
we
might
might
define
define
our
our
RGB
rgb
color
color
based
based
on
on
the
the
value
value
of
of
3
3
other
other
variables,
variables
a
a
And,
and
this
this
flexibility
flexibility
will
will
really
really
change
change
your
your
life
life
by
by
allowing
allowing
you
you
to
to
quickly
quickly
swap
swap
out
out
different
different
themes
themes
for
for
your
your
website.
website
Now,
now
CSS
css
is
is
not
not
really
really
a
a
programming
programming
language
language
in
in
the
the
traditional
traditional
sense,
sense
a
a
But
but
it
it
does
does
have
have
the
the
ability
ability
to
to
run
run
basic
basic
calculations
calculations
using
using
the
the
calc
calc
function.
function
It
it
allows
allows
you
you
to
to
calculate
calculate
a
a
value
value
with
with
some
some
basic
basic
math,
math
but
but
the
the
really
really
cool
cool
thing
thing
about
about
it
it
is
is
that
that
you
you
can
can
combine
combine
different
different
units.
units
A
a
like
like
you
you
might
might
want
want
to
to
subtract
subtract
50
50
pixels
pixels
from
from
the
the
current
current
viewport
viewport
width.
width
In
in
our
our
code
code
here,
here
we
we
have
have
an
an
animation
animation
where
where
elements
elements
drop
drop
in
in
from
from
the
the
top,
top
but
but
we
we
want
want
to
to
stagger
stagger
them
them
a
a
so
so
they
they
come
come
in
in
one
one
after
after
the
the
other.
other
One
one
way
way
to
to
achieve
achieve
that
that
is
is
by
by
applying
applying
a
a
different
different
animation
animation
delay
delay
for
for
every
every
single
single
element,
element
but
but
that's
that's
very
very
repetitive
repetitive
and
and
hard
hard
to
to
refactor.
refactor
A
a
more
more
sophisticated
sophisticated
approach
approach
is
is
to
to
define
define
an
an
inline
inline
CSS
css
variable
variable
for
for
every
every
item
item
that
that
defines
defines
its
its
order.
order
Then,
then
we
we
can
can
define
define
the
the
a
a
commision
commision
delay
delay
as
as
a
a
calculation
calculation
of
of
the
the
order
order
variable
variable
times
times
100
100
milliseconds.
milliseconds
And
and
now,
now
we
we
can
can
handle
handle
an
an
infinite
infinite
number
number
of
of
elements
elements
without
without
increasing
increasing
our
our
CSS
css
footprint,
footprint
thanks
thanks
to
to
the
the
combined
combined
powers
powers
of
of
calc
calc
and
and
variables.
variables
Now,
now
I
i
know
know
I
i
just
just
said
said
CSS
css
is
is
not
not
a
a
programming
programming
language,
language
but
but
did
did
you
you
know
know
that
that
it
it
actually
actually
has
has
a
a
state
state
management
management
mechanism
mechanism
built
built
into
into
it?
it
A
a
You
you
can
can
keep
keep
track
track
of
of
a
a
running
running
count
count
in
in
your
your
CSS
css
code
code
without
without
ever
ever
writing
writing
a
a
line
line
of
of
JavaScript.
javascript
If
if
you
you
want
want
to
to
number
number
headings
headings
in
in
your
your
HTML,
html
the
the
naive
naive
way
way
to
to
do
do
it
it
is
is
to
to
manually
manually
add
add
those
those
numbers
numbers
errors
errors
in
in
the
the
HTML
html
itself,
itself
because
because
if
if
you
you
ever
ever
want
want
to
to
splice
splice
in
in
a
a
new
new
heading,
heading
you'll
you'll
have
have
to
to
renumber
renumber
everything
everything
manually.
manually
A
a
smarter
smarter
approach
approach
might
might
be
be
a
a
CSS
css
a
a
counter.
counter
You
you
can
can
create
create
a
a
counter
counter
in
in
your
your
code
code
using
using
the
the
counter
counter
reset
reset
property.
property
Give
give
it
it
a
a
name
name
of
of
anything
anything
you
you
want,
want
then
then
increment
increment
it
it
whenever
whenever
the
the
a
a
desired
desired
selector
selector
as
as
applied.
applied
It'll
it'll
start
start
from
from
0,
0
then
then
add
add
1
1
to
to
every
every
h
h
one
one
element
element
in
in
the
the
DOM.
dom
And
and
now,
now
you
you
never
never
have
have
to
to
worry
worry
about
about
numbering
numbering
things
things
in
in
your
your
HTML.
html
A
a
And
and
that
that
brings
brings
us
us
to
to
our
our
final
final
tip.
tip
When
when
building
building
a
a
complex
complex
drop
drop
down
down
menu,
menu
you
you
might
might
assume
assume
that
that
some
some
JavaScript
javascript
is
is
involved
involved
to
to
manage
manage
the
the
open
open
and
and
close
close
state
state
of
of
the
the
menu.
menu
But,
but
you
you
might
might
be
be
surprised
surprised
a
a
bit
bit
how
how
far
far
you
you
can
can
get
get
with
with
just
just
plain
plain
CSS.
css
Now,
now
you're
you're
most
most
likely
likely
familiar
familiar
with
with
the
the
focus
focus
pseudo
pseudo
class,
class
which
which
is
is
applied
applied
to
to
an
an
element
element
when
when
you
you
go
go
into
into
a
a
form
form
input
input
or
or
a
a
click
click
on
on
a
a
button.
button
The
the
problem
problem
is
is
that
that
when
when
building
building
a
a
drop
drop
down,
down
you
you
might
might
use
use
focus
focus
to
to
open
open
a
a
menu,
menu
but
but
then
then
when
when
you
you
click
click
on
on
something
something
inside
inside
that
that
menu,
menu
it
it
loses
loses
focus
focus
and
and
closes.
closes
An
an
ex
ex
And
and
that's
that's
when
when
you
you
reach
reach
for
for
JavaScript
javascript
to
to
manage
manage
state.
state
However,
however
there's
there's
another
another
pseudo
pseudo
class
class
called
called
focus
focus
within,
within
and
and
it
it
stays
stays
active
active
if
if
any
any
children
children
also
also
have
have
focus.
focus
And
and
that
that
one
one
simple
simple
feature
feature
can
can
eliminate
eliminate
a
a
lot
lot
of
of
JavaScript
javascript
used
used
to
to
toggle
toggle
on
on
and
and
off
off
states.
states
And
and
with
with
that,
that
you
you
have
have
10
10
ways
ways
to
to
make
make
your
your
CSS
css
code
code
more
more
enjoyable
enjoyable
to
to
work
work
with.
with
A
a
but
but
remember
remember
those
those
browser
browser
vendor
vendor
prefixes
prefixes
I
i
mentioned
mentioned
earlier
earlier
in
in
the
the
video?
video
Well,
well
that
that
stuff's
stuff's
like
like
herpes.
herpes
It's
it's
not
not
going
going
away.
away
Luckily,
luckily
we
we
do
do
have
have
effective
effective
medications
medications
that
that
will
will
make
make
it
it
barely
barely
noticeable.
noticeable
A
a
tool
tool
you
you
should
should
know
know
about
about
is
is
PostCSS,
postcss
which
which
itself
itself
uses
uses
a
a
tool
tool
called
called
Auto
auto
Prefixer
prefixer
to
to
add
add
all
all
the
the
vendor
vendor
prefixes
prefixes
automatically.
automatically
In
in
addition,
addition
it
it
allows
allows
you
you
to
to
use
use
modern
modern
CSS
css
features
features
even
even
if
if
they're
they're
not
not
supported
supported
on
on
your
your
targeted
targeted
browsers.
browsers
In
in
addition,
addition
you
you
may
may
look
look
into
into
preprocessors
preprocessors
like
like
Sass,
sass
Less,
less
or
or
a
a
stylist,
stylist
but
but
we'll
we'll
save
save
those
those
for
for
a
a
future
future
video.
video
Make
make
sure
sure
to
to
be
be
a
a
subscriber
subscriber
and
and
leave
leave
a
a
comment
comment
below
below
because
because
next
next
week,
week
I'll
i'll
announce
announce
the
the
winners
winners
of
of
the
the
t
t
shirt
shirt
giveaway.
giveaway
Thanks
thanks
for
for
watching,
watching
and
and
I
i
will
will
see
see
you
you
in
in
the
the
next
next
one.
one
success
The speaker advises against learning CSS and recommends learning the box model and other aspects of CSS to create a clean, responsive UI. They also discuss the benefits of flexible elements like a grid for responsive layouts and the use of Flexbox for responsive elements. The speaker provides tips on achieving flexible elements and the potential benefits of using CSS custom properties or variables, including emoji characters and the use of PostGeneration for automatically adding vendor prefixes to CSS code. They also mention a T-shirt giveaway and a tool called PostGeneration that allows for automatically adding vendor prefixes to CSS code.
10 CSS Pro Tips - Code this, NOT that!
In my recent poll with over 75,000 responses, CSS topped the list as the most painful technology web developers have to work with. They say it's broken, chaotic, and too damn hard. There's even conspiracy that it's bad by design to protect the app stores, but I think CSS is awesome. It's definitely bloated and difficult to learn comprehensively, but that's only because it's had to Evolve over the last 25 years. It came out at a time when Netscape was the top browser, and the idea of a responsive layout was more than a decade away. A as more browsers hit the market, they all implemented CSS in different ways, leading to code that works in one browser, but not the other. Requiring you, the developer, a thread a bunch of confusing vendor prefixes in your code just to make it work across all browsers. So I totally get why you would hate CSS, but today is a therapy session where you'll learn how to write clean CSS us using modern features while avoiding the bad code that you shouldn't have to write in 2021. If you're new here, like and subscribe, and leave your favorite CSS pro tip in the comments. I'll pick a few of them to win this one of a kind t shirt next week. The first thing you need to know is how to learn CSS. The way not to learn CSS is to use a framework like Bootstrap or Tailwind. They're sexy tools that can help you get a nice looking UI quickly, but if you use something like Tailwind in your project, it's like getting married. A for 1, you won't learn CSS fundamentals, you'll learn Tailwind. And 2, if you ever change your mind, you'll have to go through a very nasty divorce. You want a divorce? I have wings, Tully. A I want to fly. When you learn basic CSS, you'll have more control over your code, creativity, and freedom. The best piece of advice that I didn't receive until well into my web development career, was to learn the CSS box model. Because when you understand it, everything else in the language starts to make more sense. In fact, it's so easy, I'll just teach you the a box model right now. Think of every HTML element as a box. Inside that box, you have the content, which can have a width and height. You can add padding around that box to squeeze the content, then you can add a a border around the outside, then additional invisible space around the border called a margin. Everything in CSS related to layout and position is influenced by the box model. If you open up Chrome DevTools, a You can see how the box model is computed for any element on the page. And, that brings me to tip number 2. Don't use Chrome when debugging CSS. Instead, check out Firefox. Ex their dev tools are generally superior, especially when it comes to CSS. If I inspect an element, I have a breakdown of the box model like I do in Chrome, but I can also edit properties on it directly, a and Firefox gives me a breakdown of all the properties that are influencing the box model. It also provides useful annotations in the HTML, like when one element is causing another element to overflow. And, Firefox also provides really nice graphics for flex and grid layout. Speaking of which, layout or the positioning of elements relative to each other, has historically been one of the most challenging aspects of CSS. Like the age old question of how do I center a div both horizontally a glee and vertically. One option is to give the child absolute positioning, then move it to the bottom right corner by using the top and left properties, then translate it back 50% to put it in in the center. That can work, but it's incredibly unintuitive. A much better approach with modern CSS is flexbox, which allows you to create a flexible column or row anywhere in the UI. When when an element has display flex, it also has an x and y axis on which you can align its children. The children flow one way, which is known as a main axis and can be aligned in the center with the justify content property. Perpendicular to that is the cross axis, and we can move our element to the center with the align items property. A Flexbox is usually the first tool I reach for when it comes to layout, but it does have one major drawback. If you have a big complex UI with many intersecting rows and columns, you may end up with a lot of a container or wrapper elements in your HTML. These elements have no semantic meaning and are just there, so your CSS code has something to attach itself to. Luckily, there's a modern CSS feature a called a grid that can obliterate much of your code. Unlike Flexbox, which only deals with individual columns and rows, grid allows you to think about the big picture a layout. If you've been a Web developer for a long time, it may look familiar, because it's very similar to table layout way back in the day. It's just much more developer friendly. A When you set an element to display grid, you can then define its children as a bunch of columns and rows. Columns have a width, which can be defined with the grid template columns property. A We have 3 values here separated by spaces, which means our grid has 3 columns. Notice the f r value or fractional unit, which will responsibly share a pair of the available space with other columns in the grid. We can also define some rows, and now, every element inside the grid will be positioned automatically. But, the important thing to notice is the amount HTML and CSS that we've eliminated, compared to flexbox layout or, God forbid, table layout. Now, 90% of the time when we talk about responsive layouts, a We're just talking about changing the width of something based on the available space on the device or viewport. There are many ways you might do that. For example, you might have article that has a preferred width of 50%, but on small screens, you wanna make it fixed at 200 pixels, or fixed at 800 pixels on large screens. A You could do that by writing media queries that will apply CSS conditionally based on the viewport size. The only problem with this is that media queries will make you wanna off yourself as the project grows larger. The good news though, is that you can turn the tables by using functions like min, max, and clamp. We could refactor this code to set the width to a a clamped value that has a minimum of 200 pixels, a max of 600, and then a preferred value of 50%, turning 13 lines of code into 1 a or a 92% code reduction. Speaking of code reduction, here's a little bonus tip. In CSS, we often end up with these very long, hard to read class names. But did you know that a You can use emoji characters as class names. Instead of flexible container, why not just use a flex emoji? Or instead of red text, why not red lipstick? Is that a good idea? A, I don't know. Give it a try at your job and let me know what your boss says about it. We have sort of a problem here. Yeah. Now, this next tip is really going to blow your mind if you've ever had a 2 code responsive image or video that maintains a certain aspect ratio. I had to do this recently on Fireship IO to embed videos with a 16 by a 9 aspect ratio, which requires this hack, where you put 56.25% padding on the top, then give the child absolute positioning. Today, although it's not supported everywhere a cut. We can use the aspect ratio property. Instead of that padding nonsense, we can just define the aspect ratio on the video and we're done. A Canadian CSS code is a big part of making it more enjoyable, but of equal importance is making your code more flexible, so that refactoring is not a total nightmare. A great way to achieve that is with CSS custom properties or variables. Notice how we're using the same color value in multiple places. A If we decide to change the color, we need to modify every line of code that references it. A better approach is to define a global variable on the root selector, which can then be referenced wherever it's needed. A good. And now, when you decide to change it, you only have to modify one line of code. Variables cascade like everything else in CSS, which means you can override them by redefining them somewhere deeper in a tree. You can also combine them to compose more complex values. For example, we might define our RGB color based on the value of 3 other variables, a And, this flexibility will really change your life by allowing you to quickly swap out different themes for your website. Now, CSS is not really a programming language in the traditional sense, a But it does have the ability to run basic calculations using the calc function. It allows you to calculate a value with some basic math, but the really cool thing about it is that you can combine different units. A like you might want to subtract 50 pixels from the current viewport width. In our code here, we have an animation where elements drop in from the top, but we want to stagger them a so they come in one after the other. One way to achieve that is by applying a different animation delay for every single element, but that's very repetitive and hard to refactor. A more sophisticated approach is to define an inline CSS variable for every item that defines its order. Then, we can define the a commision delay as a calculation of the order variable times 100 milliseconds. And now, we can handle an infinite number of elements without increasing our CSS footprint, thanks to the combined powers of calc and variables. Now, I know I just said CSS is not a programming language, but did you know that it actually has a state management mechanism built into it? A You can keep track of a running count in your CSS code without ever writing a line of JavaScript. If you want to number headings in your HTML, the naive way to do it is to manually add those numbers errors in the HTML itself, because if you ever want to splice in a new heading, you'll have to renumber everything manually. A smarter approach might be a CSS a counter. You can create a counter in your code using the counter reset property. Give it a name of anything you want, then increment it whenever the a desired selector as applied. It'll start from 0, then add 1 to every h one element in the DOM. And now, you never have to worry about numbering things in your HTML. A And that brings us to our final tip. When building a complex drop down menu, you might assume that some JavaScript is involved to manage the open and close state of the menu. But, you might be surprised a bit how far you can get with just plain CSS. Now, you're most likely familiar with the focus pseudo class, which is applied to an element when you go into a form input or a click on a button. The problem is that when building a drop down, you might use focus to open a menu, but then when you click on something inside that menu, it loses focus and closes. An ex And that's when you reach for JavaScript to manage state. However, there's another pseudo class called focus within, and it stays active if any children also have focus. And that one simple feature can eliminate a lot of JavaScript used to toggle on and off states. And with that, you have 10 ways to make your CSS code more enjoyable to work with. A but remember those browser vendor prefixes I mentioned earlier in the video? Well, that stuff's like herpes. It's not going away. Luckily, we do have effective medications that will make it barely noticeable. A tool you should know about is PostCSS, which itself uses a tool called Auto Prefixer to add all the vendor prefixes automatically. In addition, it allows you to use modern CSS features even if they're not supported on your targeted browsers. In addition, you may look into preprocessors like Sass, Less, or a stylist, but we'll save those for a future video. Make sure to be a subscriber and leave a comment below because next week, I'll announce the winners of the t shirt giveaway. Thanks for watching, and I will see you in the next one.
The speaker advises against learning CSS and recommends learning the box model and other aspects of CSS to create a clean, responsive UI. They also discuss the benefits of flexible elements like a grid for responsive layouts and the use of Flexbox for responsive elements. The speaker provides tips on achieving flexible elements and the potential benefits of using CSS custom properties or variables, including emoji characters and the use of PostGeneration for automatically adding vendor prefixes to CSS code. They also mention a T-shirt giveaway and a tool called PostGeneration that allows for automatically adding vendor prefixes to CSS code.