>> I feel like we need a sign like junior-
>> I know.
>> Dev for life.
Which reminds me of the too legit to quit
and we did this as kids. We made-
>> I don't remember that.
>> You don't remember doing the hand signs?
>> No, I just know the song.
>> We were so cool. Junior dev for life.
Hi. I'm Burke Holland.
>> I'm Aimee Knight.
>> This is five things about CSS.
>> Table flip.
>> Thing number one, this interview is over.
Number one, how does the browser
parse CSS at a high level?
>> Yeah, high level. So, there's
layout, paint, and composite.
So, layout is just the position and size of things.
Paint is actually hooking into
your computer and drawing
the actual pixels to the screen and
then composite something a little bit newer
the action of taking
those painted parts and putting
them together into layers.
>> So, what about just
setting everything to position fixed,
wouldn't just fix all of our problems?
>> I don't think that's what the users want.
>> That's how I code CSS.
Whenever anything doesn't work in CSS,
just set position fixed and move on with your life.
>> Or you could just do absolute or you could just
do negative margins and push
everything off the page and the user sees nothing.
>> Exactly. CSS is wonderful.
Thing number two, the browser has to parse
HTML, JavaScript, and CSS.
Well, what's the difference between the browser parsing,
the HTML, and the CSS?
>> So, the first thing CSS is
render blocking because the CSS has to be
completely done before it
can actually pull in the JavaScript.
>> So, it has to parse the CSS
before it can even start parsing the JavaScript?
>> Yeah. Because you can you imagine JavaScript comes in,
changes colors of things,
it's going to be like super jarring
for the user to see that.
Then also your JavaScript is
reaching for things inside your render tree,
and so if your CSS is reordering things and
the JavaScript hasn't- and
the CSS hasn't been loaded yet,
then JavaScript is going to get wrong answers.
>> Right. That would be a problem.
>> Yes.
>> So, the HTML is parsed first?
>> So, the HTML.
Yes. Well, or they could go at the same time.
Basically you get your HTML,
you get your CSS, and they get
mashed up together into something called the render tree.
>> CSS is context free.
What does that mean exactly?
>> So, CSS being context free it would be better
if we actually maybe talked about HTML for a little bit.
>> Okay.
>> So, HTML you can think about it like
a 10-year-old kid writes some HTML,
forget to close a tag.
The browser needs to account for the fact
that that 10-year-old hasn't
closed a tag or somebody forgets.
So, the browser has to have actual code,
it has to have context
of specifically what it's on at that point.
It has that context around what's around it,
where CSS doesn't because you
have to give it the browser valid CSS.
>> If it doesn't then it just doesn't work.
>> Yes.
>> So, does this mean that you don't- I think
what you're trying to say is that you don't need
semicolons in JavaScript. Is that right?
>> You don't need semicolons in JavaScript, yes?
>> Yeah,I think that's what you're trying to say.
>> I like them.
>> I do too and I don't understand why,
why are whispering? Thing number three.
Now, I've heard of the dumb which
is the document or the page that's loading.
But there's such thing as a CSSOM.
>> Yeah.
>> CSSOM.
>> I don't know how you actually pronounce it but-
>> CSSOM.
>> Sure.
>> What is that?
>> We can make that up. So, it's a CSS object model.
So, it really is kind of
you can think of it like the DOM.
So it's just like AST tree like structure.
You need to have the DOM and need to have
the CSS object model because we're going to get mashed
up together into something called the
render tree that the browser uses to
actually paint and draw
everything in the correct order and stuff like that.
But the CSS object model and
the DOM the key there is just remember they're not
one to one because if we imagine your DOM is
going to have a script tags or a head element,
meta tags stuff like that,
whereas a CSS object model,
if it's not rendered to the screen,
it's not in the object model for the CSS.
>> Interesting. CSSOM is
much harder to pronounce than DOM.
>> Yes.
>> It's just some hard much more difficult acronym.
>> Yeah. Now you got me thinking, how can I pronounce it?
>> CSSOM.
>> It sounds very like-
>> CSSOM. But see that would not- that's not CSS at all.
It be like CSS [inaudible].
Thing number four. If I'm a JavaScript developer,
can I just be honest and say,
"Why do I even need to know CSS?
Do I really even need to know it?"
>> Yeah, that's how I used to be too,
and then I realized when I got purely front unroll
that my CSS skills sucked.
>> Mine are bad.
>> So, what do I need to know?
I mean there's a couple of things.
Like you want to stay up to date on your CSS skills.
Like Flexbox is way
more performant than using a floated layout.
It's also way easier to use.
>> Are you saying no float left anymore? No flexbox?
>> Yeah. Don't float.
I heard somebody say float the other day,
I was like, "No! Don't do that!".
>> Float, clearing floats.
>> "Why do you like pain? Don't do that."
Besides that, I think
you need to stay excited about CSS to an extent as well.
The other thing too to keep in mind,
so JavaScript is not always the best choice for styling.
JavaScript wasn't created for styling necessarily.
So, with CSS a lot of
these properties automatically are
going to hook into your GPU,
so they're going to be faster.
>> Right. So, when you say look into the GPU,
what do we mean by that?
For people who don't know,
why is that more important than just not having the GPU?
>> Yeah. So, CPU is just going to
like take a lot more time.
That's back to compositing.
Compositing uses the GPU,
so there are certain properties like transform,
opacity, stuff like that.
Those are the things that you would want to use.
>> Right. And that makes it much,
much faster more performant.
>> Yeah, yeah.
>> There's so much you can do with CSS now.
If you don't believe us, you should check out CodePen.
You can do a lot with CSS
before you even need JavaScript.
Sorry JavaScript developers.
>> I still love JavaScript though.
>> Me too.
>> Don't tell CSS people I said that.
>> I'm not trading JavaScript for CSS any
day soon. Number five.
What would you say trips people up the most about CSS?
This is a tough question. Because whoa.
>> Yeah. I did a little curveball
actually before I did my talk on this,
and specificity in the index were really high up there.
So, specificity, like the cascade
everybody's like screw it.
This just doesn't make any sense,
but it's just code.
It's just called the browser understands.
So, there's like
a systematic mathematical way to go about it.
You just need to know which selector you're using.
You need to know how it's calculated,
what the value of it is.
As far as the index goes,
I don't think most people realize,
I didn't until I started digging into this stuff that
z-index is all about a stacking context.
Stacking context you have your root stacking
context which is created by the document.
Then you can have local sagging contacts
which is created by certain properties.
So, z-index is going to create a local stacking context.
So, you need to understand if I have this section of
the page that I want to move
under this section of the page,
then this section needs to be
within the same stacking context as this section.
>> Whoa! That was confusing even just to listen to.
>> Yeah. Then there's other thing
like people don't realize that
certain properties that you're using besides
the index will create a new stacking context.
So, I've talked to developers who've spent
days trying to figure out where in
the world this new stacking context is coming.
But opacity transforms again.
Those are a great new stacking context.
>> This specificity thing I think is interesting.
Number one, because saying
the word specificity is very hard and also because I
think we've all been in that place where you
just you get so
fed up of you're like important bang, I'm done with it.
>> Yeah, all [inaudible]
>> Right. Exactly. Somebody once said
like it's Friday and porting your way to freedom.
You just want it to work.
I've done that before.
Not ashamed to say it.
The hardest thing for me about CSS is linking
the CSS in the page in the HTML page.
I can never remember what
the syntax is for the link tags.
>> We have so many built tools that do it
for us now. We don't have to.
>> You think after doing word development for 15 years,
I know how to do a link tag.
I don't and that's a problem. I'm Burke Holland.
>> I'm Aimee Knight.
>> And now you know five things
about CSS. Want to table flip?
>> Yes.
>> Table flip.