Wrong confirmation ID

Email
Favorite
Favorited ×
Download
Embed
Private Content
Copy and paste this code into your blog or website Copy Customize… Close
We have emailed the verification/download link to "".
Login to your email and click the link to download the file directly.

To request the link at a different email address, update it here. Close
Validation messages. Success message. Fail message.

Check your bulk/spam folders if you can't find our mail.

Loading…

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

+ Follow

Css Architecture

by pelletized on Sep 14, 2009

7,133 views

More…

Less

5 Embeds 152

http://www.slideshare.net	135
http://pelletized.com	10
http://www.pelletized.com	5
http://localhost	1
http://translate.googleusercontent.com	1

Statistics

Favorites: 1
Downloads: 56
Comments: 0
Embed Views: 152
Views on SlideShare: 6,981
Total Views: 7,133

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
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
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?
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.
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?
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
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.
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
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?
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
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
So when writing your code, and you happen upon an area where you think you need a hack, ask yourself a few questions first
So you can see that this page is easily separated into columns and rows
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.
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?
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
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
Lets build upon an earlier example
So by adding the class to a parent element and referencing it there, we can style more common elements with less amount of code
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
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
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
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.
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
Any questions?

1 Favorite

Spase Ristov , IT Consultant at Dynabyte 6 months ago

Css Architecture — Presentation Transcript

CSS Architecture
Standards and Best Practices
“CSS starts out being a pain for everyone. Don't worry. You're not stupid, CSS is.” - John Manoogian
Reasons for this
Common issues throughout the sites
Knowledge sharing
Advice on overcoming problems
Multiple CSS files create confusionPeterson’s homepage
Combine CSS files
One master CSS file for common elements
One project level CSS file for project specific styles
One CSS file for print specific
Other CSS filesOne CSS file for each cobrandOne CSS file for IE specific styles
Inline Styles and Internal Stylesheets
Inline Styles and Internal Stylesheets
HTML Structure
Naming Conventions
Be consistent
name your elements what they are, not what they do (semantic vs. presentational)
Hacks
Hacks
THIS DOESN’T WORK!
Hacks
Hacks
Can I code it in a way that doesn’t require any specific targeting in the first place?
Can I instead use a conditional comment?
Tables aren’t the enemyThere are many places where using tables is entirely appropriate
Tables aren’t the enemy
Tables have their place, but not for layout
Main Navigation HTML (yes, that’s all there is to it!)
Main Navigation CSSThe heavy lifting
Selectors
You don’t need to add a class to every element
Selectors
Selectors
Don’t Repeat Yourself
Combine styles where possible
Don’t Repeat Yourself
Use shorthand wherever possible
Commenting
Color/Layout glossary
Flag different sections
Validation
Not just for HTML, but for CSS too
Ensures your code is error free and interpreted in the right way for browsers
Search engines
Floats
Wrapping content around an element
Horizontally, not vertically
To stop content from wrapping, you must clear the float
DON’T PANIC

Css Architecture

by pelletized on Sep 14, 2009

Accessibility

Categories

Upload Details

Usage Rights

5 Embeds 152

Statistics

Css Architecture — Presentation Transcript