Css Architecture

Editor's Notes

• #3: CSS started out as a broken language with little to no support, and it still has some of that reputation today, but its getting much better
• #4: I’ve noticed a few common issues throughout all of our sites that I would just like to clear up any confusion and help us all to write the best code we can
• #5: This is a lot of files to go through, especially if you are trying to find a single css rule or even worse, trying to resolve conflicts between css rules. How can we make it better?
• #6: In the cobrand specific CSS file, only elements that will change for the cobrand should be included, such as colors and fonts. Structural elements that will not change should remain in the main CSS. It is not necessary to create a new CSS file for 10 lines of CSS; rather, it would be better to add the code to an existing file.
• #7: Theres a lot going on here, and that style attribute is making things harder to read. Is there a way we can simplify this code?
• #8: Inline styles are generally a bad idea and should be avoided whenever possible. I can only think of one extremely rare case where inline styles should be used, and I’m not going to tell you because you would know it!If something is 0, it doesn’t need a unit of measurement, zero is zero in anything
• #9: When switching from table layouts to tableless layouts you may feel like you can just replace every instance of a table or td tag with a div, but this is rarely the case. Generally, the only times you should use a div tag is when there is no other tag that would make sense to use in that situation, such as structural elements like headers. Typically our pages will follow some resemblance to this structureThere may be other places where a div may be absolutely necessary, but before you automatically use a div, try to think of how the element will be used and if another tag would be better suited in its place.
• #10: Be consistent with your naming, whether you use dashes or camel case or whatever, use the same thing, and I’ve been told its good practice to follow with whats been established before, so keep that in mindEven more important is how you are naming your elements. You want to name your classes and id’s based on what that element is, like a header, or special link, and not on what color the element is or where on the page it is. It would be pretty confusing working on a class called blue-link-left if the element was actually red and on the right
• #11: I’m sure you’ve seen this somewhere in our css files, and you might be thinking to yourself right now what exactly this hack does. But guess what?
• #12: The so called “star hack” is meant to target ie browsers before ie 7, which means that anytime you write this hack, whatever you are trying to hack will still be broken in later versions of ie. But if you’ve ever worked with css and ie, you know how frustrating it can be. That’s why there is an acceptable way to target ie browsers
• #13: This is called a conditional comment, and right now is the only acceptable and official way to target ie specific browsers. The first example is saying that if the browser is less than or equal to IE 7, do thisThe second example is calling an ie specific css file for all versions of ie
• #14: So when writing your code, and you happen upon an area where you think you need a hack, ask yourself a few questions first
• #16: So you can see that this page is easily separated into columns and rows
• #17: So on this page, you might be thinking of various places where a table might be needed, like in the top navigation. But is that true? Lets look at the code.
• #18: So instead of using a table for this, which would have involved many more lines of code, and possibly some spacer images, we see that here it is a simple unordered list. And isn’t that all a navigation menu is anyway, just a list of links?
• #19: So really, we are taking out all of the presentational elements from the HTML, and putting that in the CSS. That was the original purpose of CSS, to separate content from layout, and this idea still holds true today
• #20: You can style tags directly by using the tag name with no period or hash before The difference here is that there is no class on the p tag, which means less overhead, easier to read, better maintainabilityThis is a small example, but in situations where there are a lot of the same types of elements, the benefits will be more apparent
• #21: Lets build upon an earlier example
• #22: So by adding the class to a parent element and referencing it there, we can style more common elements with less amount of code
• #23: Since these tags both look exactly the same, its better to combine the styles into one by separating with a comma, and this will make it more readable and easier to change later
• #24: Also using shorthand rules will make your code cleaner and smallerSo as we can see here, we are using shorthand rules in 3 areas, for margin, color, and font
• #25: put a color and layout glossary at the top of your css to make things like colors and sizes easier to findFlag different sections like “starTags” or “starMain” to make it easier to jump to those sections with control F
• #26: If you’ve ever asked me for help for a layout problem, my first question to you is usually “have you validated?” What might seem like a small problem can often be a symptom of a larger issue. If tags aren’t closed or even in the wrong order, it could make the entire page unpredictable in other browsers. Also there are other visitors to our sites who look only at code, which is search engines. While its not strictly proven that and invalid page will always rank lower than a valid page, (although there have been tests done) it makes sense that these spiders would have an easier time moving through our pages if they were written correctly.
• #27: It has been mentioned that floats are one of the more difficult aspects of CSS, so I thought I’d take a few moments to talk about themElements following a floated element will wrap around the floated element.So if you have content flowing around a floated element, but you don’t want it to wrap, then you need to clear the float. The best way to do it is to pick the next element and put the clear declaration on it, but sometimes that’s not possible, so you can use this code to do it
• #28: Any questions?