How to Keep Track of CSS Styles
Keeping track of CSS (Cascading Style Sheet) styles presents a problem to Web designers because CSS is not a programming language. Programming languages use recursive code like "loops" and variables that hold values for reuse elsewhere in the code. In contrast, CSS code contains a lot of repetition and requires you to change every instance of a value rather than changing a single variable. Writing tight, well-organized CSS code cuts back on your work and helps you deal with these issues. Try to write code that is easy to scan with your eyes and stay away from using "inline" styles.
Other People Are Reading
Instructions
-
-
1
Write compact, efficient selectors. Instead of using "tag #id .class {}" you should try to use ".class {}" or "#id {}" as much as possible. Use "tag .class {}" when you want to select all tags of a class instead if you use that class name on other tags as well.
-
2
Group your selectors together in ways that make logical sense to you. For example, you can place all selectors that effect your website's fonts together. Use comments to separate each group of selectors:
/* Font Styles */
p {
font-family: Arial, sans-serif;
}
h1 {
font-weight: normal;
}
-
-
3
Place each selector on its own line when writing selectors in a list:
h1,
h2,
h3 {
color: blue;
}
-
4
Keep all "<link>" tags in your Web page files grouped together. Start by linking the default or main styles sheet first, and add extra style sheets in order of importance. Style sheets that target Internet Explorer should come last:
<link rel="stylesheet" href="path/to/default.css" type="text/css" />
<link rel="stylesheet" href="path/to/typography.css" type="text/css" />
<!--[if IE]><link rel="stylesheet" href="path/to/ie-fixes.css" type="text/css" /><![endif]-->
When using a CSS framework like Blueprint or 960 Grid System, put its reset and grid or column files first. Reset styles come before anything else.
-
5
Limit your use of CSS code within "<style>" tags and avoid inline styles as much as possible. When you place embed styles between "<style>" tags, those styles cannot effect other pages in your website. If many of your pages use CSS between those tags, then when you update the website, you will need to edit many files instead of one or two. Styles written inside of HTML tags are called "inline styles" and cause disorganization and conflicts when you overuse them.
-
1
Tips & Warnings
Use "!important" in your CSS code when you cannot figure out which style you are having trouble with overriding: "property: value !important;".
Try to combine your style sheets in to as few files as possible to increase page load speeds. This prevents the browser from needing to make many requests to the server.
