Up next in 10
How To Use Nesting In Plain CSS
412 views
Feb 7, 2024
"How To Use Nesting In Plain CSS" is an informative tutorial video aimed at web developers who want to streamline their CSS code by leveraging nesting techniques. The video demonstrates how nesting can be achieved without preprocessors like Sass or Less, using only plain CSS. Viewers are guided through the process of organizing their CSS rules more efficiently by nesting selectors within one another, thus reducing redundancy and improving code readability. Through clear demonstrations and explanations, viewers learn how to apply nesting to various CSS properties, such as typography, layout, and styling, to create cleaner and more maintainable stylesheets. Whether you're a beginner or an experienced developer, this tutorial offers valuable insights into optimizing CSS code using nesting techniques, making it easier to manage and maintain complex web projects.
View Video Transcript
0:00
I cannot believe we're finally at the point where this is real CSS
0:05
In this video, I'm going to be talking about how you can use nesting in your own CSS
0:08
and all the different pitfalls you need to watch out for. Welcome back to WebDev simplified
0:17
My name's Kyle and my job is to simplify the web for you so you can start building your dream project sooner
0:21
And in this video, I'm going to be talking all about nesting inside of CSS
0:25
We are probably wondering why I'm using code pen for this example instead of VS code
0:29
reasoning for this is because nesting in CSS is not currently supported in any browsers at all
0:34
but you can use a plugin inside of post-cSS to enable nesting, and that nesting works exactly
0:40
the same as the browser specification. Essentially what's happening here is post-ciss
0:44
takes your CSS code and converts it into CSS code that the browser can understand
0:48
varies similar to how Babel works for JavaScript. And this is different than like SaaS or
0:53
because SaaS and less are like their own language, and they have their own nesting syntax that
0:57
is completely separate from the browser, while post-cissus, all of these presets that I have here
1:02
are just built-in browser functionality that maybe is not there yet, but they've converted your
1:07
CSS to the CSS so the browser can understand, just like Babel is. So in order to understand
1:12
how this works, all you need to do is if you go to a code pin, you can click this little cog icon
1:16
say that your processor here is post-cSS, and then click that you need an add-on and just choose
1:20
the preset ENV add-on, and that's going to give you support for all of the different presets
1:25
inside a CSS. Now if we wanted to use nesting specifically I'll show you how that works
1:29
So up here we have some very basic HTML. We have an article with a couple of p tags and an
1:33
a tag. And let's say I want to style something on my article so I can come down here and
1:37
say that my article I want to have let's say a background color of red. There we go. So now
1:46
if I say that you can see that this background color has changed to red. Now I would say that I also want to change what my p tag looks only inside of that article. Well what I can do
1:55
Normally, it would be something like article followed by p, and then I could say color is green
1:59
for example. And that changes my text color to green. That's really ugly. Let's just do like white, for example
2:04
That'll look a little bit better, not quite as ugly. And you can see that now my text has changed to white, but I've duplicated this article
2:10
selector right here. It's kind of a pain. I don't want to do this, so instead you can use nesting
2:14
The way nesting works inside a CSS is you need to put an ampersand symbol, and this ampersand
2:19
symbol essentially stands for whatever your selector is above. So in our case, it stands for this article right here
2:24
And we can just put the P tag afterwards, and now if I come in here, I can say that our color is white, get rid of this code down here, and if I save, you'll see nothing at all changes because it's using this nesting right here
2:39
So what happens with this nesting simple like I said this ampersand essentially is just replacing whatever this code is outside of it So whatever your selector is here it doesn matter what it is this ampersand is going to replace that inside your CSS and work exactly the same And this ampersand is required If you used to something like SAS or less you can write code
2:56
like this and it'll work just fine. It'll automatically imply the ampersand. But as you can see here, our text color does not change. And that's because with CSS nesting, you need this
3:04
ampersand, otherwise it will not work. And you can nest as many levels deep as you want
3:09
Let's say I want to get the anchor tag inside of a paragraph. Well, I could come in here, anchors
3:13
anchor tag. And I can say here that my color is let's just do purple. Actually, I don't
3:19
even know if that's a CSS. Okay, yeah, it is a CSS color, but let's change it to something a little bit easier to see. We'll do maybe gray. And now if I save, you can see that as link right
3:27
here is changed to gray. And now that I have three different levels of nesting. Now, when you
3:31
do write nested CSS like this, it's best not to have too many different layers of nesting
3:36
because it can get kind of confusing to follow. But having really small amounts in nesting is
3:41
really nice because it makes it easy to write your code, especially when you have complex
3:45
selectors and you don't want to have to constantly repeat those selectors everywhere. Having a little bit of nesting can make your code a little bit easier and nicer to read
3:52
Another thing you can do with nesting is media queries. So I can actually nest a media query inside of here
3:57
For example, I can say app media, and let's just say min width is 500 pixels
4:04
Then what I want to do is I want to change my background to a different color
4:07
So what I do is I just say ampersand and then open up my curly braces here
4:11
And what this little bit of code is saying is just copy my selector from before, which
4:14
in our case is article. And here I'm going to change the background to blue
4:22
So now if my browser is over 500 pixels wide, you can see that this shows up as blue
4:26
And if I shrink this down below those 500 pixels, you can see it now changes to red
4:30
So I have a media query that's nested inside of my selector, and this is actually really nice
4:34
because it's kind of a pain to have to write your media queries in one place and then put all your code inside of them
4:39
Instead, you can now just kind of put your media queries inside your selector, which makes it a little bit easier to see, okay, here's all the code for my article
4:46
It doesn't matter what size my screen is. All the code for handling my article is right here in this one block of code, and it's a little
4:51
bit easier to chunk together in your brain. Now this right here covers a lot of what you need to know about CSS nesting
4:56
It's pretty simple, but there's a few gotchas that you really need to understand to fully master this concept
5:01
So what happens if we have a complex selector? Like, let's say we want to select every single article, and we're going to do this based
5:06
on the ID, because as you can see our articles have an ID, and we're also going to select sections. There are no sections on our page, but it really doesn't matter. We're
5:12
going to select articles, and we're going to select sections. And what we're going to do is we're going to select everything that's inside of those, and I want to change the background
5:19
here to red, just like that. And then what I want to do is I'm going to select the paragraph
5:26
tags inside of there, and I'm going to change the color here to white. So if we just give that
5:32
a second give it a save we should hopefully have everything change over here And it not and that just because I spelled article wrong So now if I give it a save you can see that my everything over here is changed to red And let just add a simple section in this section just like this
5:47
Make sure we close it off. We're just going to put a paragraph inside there. I'm just going to copy this down
5:52
There we go. So now we should have another section below this, and you can see that one also has that red background color
5:57
Now what happens if I want to overwrite that paragraph tag to change our color, but just for the section
6:01
So I can select my section, and inside of there I can, you know, get my paragraph tag
6:06
and inside of here I can say that my color is going to be blue, let's say. And now I'll save, and you notice that the text actually changes to blue
6:13
This is actually incorrect based on the specification for how this should work
6:18
Normally, if you have selectors that are separated by a comma like this and you specifically use nesting
6:23
it is actually going to convert the syntax to look something like this. So what would happen is it uses this is syntax, and it'll select both our article
6:31
and it'll select our section, and then it's going to select the P tag afterwards, and it's going to say color is white, just like that
6:38
That's essentially what this code right here should get converted to. And now you'll notice if I just make a quick change here, so I'll undo that, and I'll comment out just this section, so we still get our background color, and I save, you'll notice that my text is now white for both of these
6:51
The reason for that is the way that this is property works. When it does specificity, it'll take the specificity of the most specific element
6:58
In our case, this article. So this is property has a specificity of one ID and then a single element here
7:04
While down here, this has a specificity of one element followed by another element. So two elements, this is much less specific than this, and that is why our color is no longer blue
7:13
It is still that white color because of the way specificity works. Now, if you're confused by specificity, I have a full video and blog article on it
7:20
I'll link in the cards in description for you. But essentially, if you use this comma separated syntax and then you do nesting inside of that
7:27
it is actually going to convert to be using this is keyword here, and this is keyword has
7:31
specificity that works differently than if you wrote this out without nesting
7:35
For example, if I wrote this out without nesting, I would write something like this. I would say article P, and then I would say section P, and then I would say color white, just like that
7:48
Let's comment this out and comment this back out. And now when I save, you'll see that my color changes back to blue
7:53
So it's a little bit different than you would originally think that this should work, and this is something that this Post CSS plugin is not doing quite correctly
8:00
Just know if you deal with these comma-separated properties like this, it's going to use the is property, so your specificity may be different than you expect
8:08
Now, another interesting thing to consider, let's just get rid of pretty much all of this code here
8:12
so we can kind of start with a fresh slate. And what we're going to do is we're going to select our article
8:18
And inside of that article let just say background red select the P tag and the color is going to be white just like that What we had essentially at the beginning let me just make sure I put this ampersand in so that this is going to work properly now what happens if I wanted to do my nesting a
8:34
little bit differently what if what I wanted to do is I wanted to say whenever a
8:38
p is inside of an article so I did this like p is going to have a color of red
8:43
by default and then if a p is inside of an article so I would say p inside or I'm
8:48
sorry article ampersand then I want to change the color to red
8:54
Let's do black. No, let's do blue. There we go. Blue. And we're going to get rid of this code right here
9:01
So what I'm saying right here with this code is I'm saying, okay, I have a paragraph, and I'm going to change the color to red by default
9:06
You can see our text is red. And then if my paragraph is inside of an article, because we know this ampersand is the exact
9:11
same thing as the previous selector, then I should change my color to blue
9:15
You notice, though, this isn't actually working. All of my text is read, even the text here, which is not inside of an article
9:20
The reason for this is if you don't have the ampersand as the very first property on your line
9:26
you need to prefix this with the at-nest keyword, and if you do that, then it is going to work properly
9:30
Now you can see all my text that is inside of an article is blue, while all my other text is defaulting to red
9:36
So if you need to use the ampersand to select the parent selector, in our case, the p-tag here
9:41
then you need to make sure you put at nest at the beginning if that ampersand is not at the start of your line
9:46
This again works differently than how CSS nesting works in things like SaaS or
9:50
less so it's important to understand how this works. Now the very final thing I want to talk about
9:55
is going to be a big gotchew with CSS nesting that you might run into. Let's go back to what we
9:59
had before article and we're going to have our ampersand p with the color of blue just like that
10:09
Let me just get some formatting on that. There we go. So now we've changed our text to
10:14
blue inside of our articles and then let's say down here we want to change our background to
10:18
read to change our article background to red. Now if I do this, you will notice that this is technically
10:23
going to work with the post CSS plugin, but in normal CSS, once this actually rolls out
10:28
this background property and any other property that you define after your nesting is not actually
10:33
going to apply. So in normal real CSS, once this gets rolled out to the browser, everything after
10:38
your first little bit of nesting here is going to be as a set never even existed at all
10:42
So once you move over to real CSS and this is working in the browser 100%, just know that any code you put
10:48
here like this, it's just not going to apply. And that's something to keep in mind because it
10:52
may be common to write your code like this, but it's not going to work, so you need to move
10:55
this selector up to here, above your nesting, and then everything will work just fine. I cannot
11:00
wait for this to officially be supported in browsers, but I'm really glad we have Post-CSS
11:05
to be able to use this before it's even browser-ready. Now, if you want to check out any more
11:09
cutting CSS features, I'm going to have videos on those linked right over here. And with that said
11:13
thank you very much for watching and have a good day