Here are different pieces of CSS, in roughly the order I found most helpful to learn them, although the steps will overlap a bit.
know your HTML elements and attributes really well. You will not understand CSS without a good knowledge of HTML. Understanding the tree structure of HTML, the element names, the difference between id's and classes will help you know how to target your styles. Try to structure your HTML so you have to use as few selectors as possible in your CSS, because more selectors require more browser processing and, worse, make it really difficult to override styles for special cases or theme variants.
know the old school forms of layout: the box model, the difference between block and inline and inline-block, and how these affect padding, border, margin and width. Learn about floats, and when you would want to use them instead of inline block for example. Learn about positioning, especially relative, static, and absolute (fixed is more rare). Also learn the newer flexbox model: it's sometimes quirky (the last row of justified content is a travesty), but it also can come in handy and save you some of the work in creating a layout yourself in floats, for example. A good exercise is to try to recreate the layout of reasonable complex sites yourself with lots of columns and different types of lists.
Rules that aren't layout are usually pretty straight forward to understand (although animation is a little more complex). Get to know how to style backgrounds, type, shadows, transformations, etc. Lear how to style elements using the fewest possible images to reduce browser load times: when you can use CSS alone and what you have to use images for, how to crop and optimize images and sprite images.
There are a lot of common problems solved over and over again in what you might as a beginner think are slightly tricky ways. One example, which comes up less often than it used to, is when you have to use an image instead of text, how do you keep the actual text on the page for search engines and screen readers? How do you deal with images of different resolutions is a newer problem.
Learn about CSS preprocessors like Less and Sass, and how to use them efficiently so you don't end up with ridiculous amounts of code bloat. Learn how to concatenate and minify style sheets, and use automatic spriters and image optimizers. All of these tools are great, but learning the fundamentals yourself first will help you have a thorough knowledge of how the more advanced tools work.
Selection -
know your HTML elements and attributes really well. You will not understand CSS without a good knowledge of HTML. Understanding the tree structure of HTML, the element names, the difference between id's and classes will help you know how to target your styles. Try to structure your HTML so you have to use as few selectors as possible in your CSS, because more selectors require more browser processing and, worse, make it really difficult to override styles for special cases or theme variants.
Basic layout -
know the old school forms of layout: the box model, the difference between block and inline and inline-block, and how these affect padding, border, margin and width. Learn about floats, and when you would want to use them instead of inline block for example. Learn about positioning, especially relative, static, and absolute (fixed is more rare). Also learn the newer flexbox model: it's sometimes quirky (the last row of justified content is a travesty), but it also can come in handy and save you some of the work in creating a layout yourself in floats, for example. A good exercise is to try to recreate the layout of reasonable complex sites yourself with lots of columns and different types of lists.
Get familiar with other basic rules -
Rules that aren't layout are usually pretty straight forward to understand (although animation is a little more complex). Get to know how to style backgrounds, type, shadows, transformations, etc. Lear how to style elements using the fewest possible images to reduce browser load times: when you can use CSS alone and what you have to use images for, how to crop and optimize images and sprite images.
Learn the hacks/tricks -
There are a lot of common problems solved over and over again in what you might as a beginner think are slightly tricky ways. One example, which comes up less often than it used to, is when you have to use an image instead of text, how do you keep the actual text on the page for search engines and screen readers? How do you deal with images of different resolutions is a newer problem.
When you understand the fundamentals, start with the advanced tools -
Learn about CSS preprocessors like Less and Sass, and how to use them efficiently so you don't end up with ridiculous amounts of code bloat. Learn how to concatenate and minify style sheets, and use automatic spriters and image optimizers. All of these tools are great, but learning the fundamentals yourself first will help you have a thorough knowledge of how the more advanced tools work.
0 Comments