CSS Layout Tutorial - 10 - Organizing the stylesheet Video Lecture | Learn CSS: A Comprehensive Tutorial for Web Developers - Front-End Programming

welcome to the 10th video on CSS layouts
in this video we're going to take a
little bit of time and organize our
stylesheet we're going to talk about
that because our CSS stylesheet is
starting to get larger and larger and
it's important to get control of your
code before it dominates you and the
primary objective is to be able to find
rulesets quickly and easily and if we
just keep adding massive rule sets all
the way down it'll be harder and harder
to find things so it's important early
on to get control of your code and
organize it in a meaningful manner and
then you won't pay the price later on
when potentially you could have
thousands of lines of CSS code so what I
like to do is use comments comments are
your best friend in the coding world and
in CSS we create a comment by using
forward slashes so the first part of the
comments section needs to have a forward
slash and a wildcard behind it the end
of the comments section needs to have a
wildcard in front of the forward slash
and so the browser will not read this
you can put anything in here that you
like and what I like to do is put a
bunch of equal signs and then in caps
right in layout section and then we'll
put a few more equal signs as many as
you want and there there we go and so
this clearly tells me that everything
below this is my layout section and
that's what we've been working on so
this is the body this is the header and
so that makes sense now let's go ahead
and copy this and we'll paste this down
here now remember the footer is the end
of our website this was kind of the last
section that we had so let's go ahead
and put in another set of comments here
and we're going to call this headings
section this tells me that all of my
styling for my headings is in this
section and this is a nice break and
keep in mind headings could go anywhere
in your web page so it's not really in a
logical manner like our layout section
is we can put these in any area of our
web page so I like to always have a
different heading section now in the
next video we're actually going to get
started on buttons so we'll make a
button section
and eventually we'll do CSS animation so
we'll make an animation section so it's
just important to kind of divvy up your
code in a meaningful way now you don't
have to necessarily do it this way this
is the way I like to do this but again
you can develop your own strategy some
developers will actually create a table
of contents up here and then organize it
in that way now I should also point out
that this can cover multiple lines so
you know I could make multiple lines in
here you can put as many different lines
as you want in between these two forward
slashes so just keep in mind that's
something you can do now another useful
thing with comments is to actually put
them in the rule sets so let's go ahead
and we'll just copy and paste this again
and let's say that for instance we
weren't sure if we wanted our font size
at 14 or 15 pixels so we could actually
you know let's say we were kind of
undecided but we wanted to go with 14
pixels but we also wanted to keep a rule
in here with 15 pixels and so now we
could save this we could keep this here
but and in case we wanted to use this at
a later period we could simply just
uncomment this out and put comments
around this one and then we would have
15 pixels being set in our body you can
also use this for you know any type of
rule so that's a good way to remember
different types of rules that you made
without having to use them necessarily
now in terms of this strategy you can
also keep different hex codes in here I
do that sometimes so I'll actually store
a bunch of different colors in the
comment area in a particular section and
play around with those colors so I don't
have to go look them back up I'll keep
the bunch of colors down here and then
you can kind of toggle them as you see
fit so that's also useful okay let's so
let's open up our web page and I'll just
show you that those comments did not
affect our page in any way and there you
can see we're still good to go so that's
going to do it for this video in the
next video we're going to work on the
navbar and we're going to add buttons so
we will do a whole series on buttons
see you guys in