This course has been updated! We now recommend you take the Complete Intro to Web Development, v3 course.
Transcript from the "CSS Audience Questions" Lesson
[00:00:00]
>> [MUSIC]
[00:00:03]
>> Brian Holt: Like if I wanted to center the boxes it's actually not too hard. I'm going to go back to styling in here.
>> Brian Holt: So I have margin on here. So here I have a 10 pixel on the left and on the right and then 30 pixels on the left.
[00:00:23] If I just change this to auto and I change this to auto. Now it's actually going to center those right. Auto is just saying that this only works on left and right, it doesn't work on up and down. Please center myself in whatever my parent is right. So like if I have parent-div down here, if I say width only be like 40% of what you can actually be.
[00:01:06]
>> Brian Holt: And let's just say like a border.
>> Brian Holt: We'll say like blue or something like that I guess. Oops, I didn't want that. Anyway that kind of makes the point. [SOUND] So, you can see right here the div only takes up 40% of it's width. And these are all centered within that.
[00:01:36] So, the marginato centers it within it's parent. Right, so these ones are all being centered within the parent. So, if i said here, margin 0, and that would be pushed to the left up here, right? So these are all centered in here and not necessarily centered on the page.
[00:01:50] It's what you would expect but it's kind of weird to verbalize it. That makes sense? Follow.
>> Speaker 2: Someone commented that flexboxes were trying to solve all these problems?
>> Brian Holt: Yeah so, flexbox, which we do use a little bit on Reddit is trying to solve some of these vertical centering woes.
[00:02:13] It's been a problem for 15 years, right. And it just seems kind of silly that we have the same problem that we had 15 years ago. So there's a new model of displaying called flexbox and centering things in flexbox, vertically is trivial, like, it's really, really easy. You just have to say justify content, middle, or center or something like that, but that's for another day.
[00:02:39]
>> Speaker 2: Is it box dash flex property?
>> Brian Holt: I don't, flexbox I don't work in enough to actually remember all of the things but you have to say like.
>> Speaker 2: Is it part of CSS?
>> Brian Holt: It's CSS 3. Actually it's even beyond CSS 3, it's like 3.1. So you say display flex.
[00:03:02] As you can see, it just totally fucked up or messed up everything, sorry.
>> Speaker 2: Flexbox-flex.
>> Brian Holt: But they haven't even agreed on like I say the browser manufacturers have not even agreed about what that property should be called. [COUGH] So it's hard to use right now. But CSS tricks if you wanna look at it has a really good to toil on how to use flexbox if that's something you're interested in learning, I would highly recommend it.
[00:03:39] That's what I refer to every time I need this, because there's 30 properties around it that are useful so.
>> Brian Holt: It's difficult though, I'll throw that caveat out, cuz you have to worry about like flex direction and hustifying content versus justifying items and stuff like that. Other questions about what's going on here?
[00:04:02] Specificity make a little bit of sense to you? The more specific you are, the more it will be applied.
>> Brian Holt: As a general rule, just something I'd throw out there, is don't necessarily rely on order to solve your specificity. You can have two of them that refer to one class and then you can just put the one you want applied, below it.
[00:04:25] It's kind of a poor practice because if anyone reorganizes your CSS, which is a kind of a common thing to do, it could mess up what you were intending, so I'll just say, play it safe, use two classes instead. Another thing that I catch a lot of crap for this, so this is a highly contested subject, I never style on ID ever.
[00:04:52] Why? It's because if I need to overwride something with an ID has, it's really hard, right, you can't, cuz you gonna only have only one ID in an item right? So you can't overwride based on having two ID's. So you either have to have an ID and a class, which is really dumb, right?
[00:05:14] Or you have to use important, which you shouldn't use. Whereas if it was just a class and it had two classes, guess what you do? You throw in another class. You have three classes and you're done with it. It's requires very little rewrite if you're doing everything based on classes.
[00:05:30]
>> Brian Holt: The only time that I will style IDs, is if I can guarantee this thing is unique. I'm never going to want to style this some other place, so let's just throw an ID on it and be done with it. IDs are a specificity nightmare though. That's why you stick to classes, I don't ever style in tags, or very rarely style in tags, and I yeah, very rarely.
[00:05:54] Like I'll style like links and stuff like that, but I'll very rarely style like divs or something like that, never that. Stick to classes. You'll have a happy life if you stick to classes. Okay, other questions? All right.
>> Brian Holt: Let's see, I believe we went over this, I think, let me just make sure.
[00:06:30]
>> Brian Holt: We did.
>> Speaker 2: One just came in kinda talking about SaaS.
>> Brian Holt: Versus class and stuff like that.
>> Brian Holt: So spreading CSS is a bit of a pain. It's kind of archaic. There's no idea of nesting in CSS. Say right here if I wanted to do blog-post but I wanted to style all the h1's just inside the blog-post.
[00:07:04] You would think this would make sense right? I could just nest the rule inside of blog-post. Right so I'd have blog-post and then inside of blog-post, I'd have h1 right? And I could say color red. This doesn't work in CSS, CSS, everything has to be flat. If I wanted to do all the h1s inside of the blog post, I would have to do .blog-post h1 color red, right.
[00:07:35] So this idea of nesting doesn't exist. So some smart guys got really sick of doing that and they wrote another language called SaaS, there's one called Stylus, there's one called Less. Anyway, those are the three big ones, SaaS being the biggest and then Less and Stylus fighting it out for second place.
[00:07:58] They wrote this language that you write. This kind of more concise CSS and then you compile it. So essentially you run it through another program which then spits out normal CSS. It's very useful, we use it in Reddit, we use it in SaaS. I would recommend as you're starting out, just kind of wrapping your mind around CSS, cuz SaaS and Less introduced some really more advanced complex ideas.
[00:08:22] So it's better just to start out writing vanilla CSS and then once you get sick of writing CSS, then it's a good time to jump to SaaS cuz then you're like, everything that I hate about CSS has mostly been solved by this. So but anyway, there's a lot more than just like nesting, but that's one of the things that people really like is nesting.
[00:08:44]
>> Speaker 3: Variables, right, you can have variables in your [INAUDIBLE].
>> Brian Holt: Yeah, actually Firefox now allows you to have CSS variables. So that actually can work now in CSS, which is pretty rad. Because for example, say I had this color. I don't know say my favorite one is fog dog, fog dog.
[00:09:06] It's orange. So this color right here, say I was using it all over my CSS, right? That was like my brand color and I needed to use it everywhere. It's really annoying to have to repeat that and then say that if my brand color changes. I'm Airbnb and now I'm suddenly red instead of blue right?
[00:09:28] You would have to go back to literally every place in your CSS and change it. But if you use a variable right, you change it one place and ta-da it's changed everywhere, which is kind of nice. So, that's why variables are useful, they are in SaaS, and they just came out in modern browsers, which means we can use them in five years when everyone's caught up.