When it comes to CSS, there are alots of resources and supposed "exper tips" on the web. Let's look deeply into designers who have excellent design backgrounds and have walked the walk. These CSS tips are gathered from some of the most respected designers on the planet. Below are 10 excellent principles that any web developer or designer can find useful, meaningful, or challenging. These are the true masters of CSS. Drink deep from their knowledge and take their wisdom on your next designing adventure.
1. Keep CSS simple - Peter-Paul Koch
"Browsers don't have perfect CSS support. Instead of seeking false comfort in hacks that seem all the more comfortable because of their complexity, you should accept uncertainty as a basic principle. Acceptance of the way te web currently works is the best way to go because it'll keep your sites simple."
The above sentence was said by Peter-Paul Koch. Peter-Paul Koch is a godfather of web development. While he's an old-school developer and the bulk of his web portfolio was between 1998 - 2002, he's worked with the likes of Apple and other heavyweights. Simplicity is a hard thin to achieve, especially in CSS design. Peter-Paul Koch has hit on something that rings true for not only CSS, but for web development as a whole. Simplicity is key for efficiency in coding.
2. Keep CSS declarations in one line - Jonathan Snook
Jonathan Snook is an incredibly popular designer from Ottawa, Canada, who's made his name in web standards and design. One of Jonathan Snook's tenants to coding CSS is to keep declaration in one line. Jonathan Snook goes on to give an example for single line declarations that looks like this:
Good
{font-size:18px; border:1px solid blue; color:#000; background-color:#FFF;}
Bad
h2 {
font-size:18px;
border:1px solid blue;
color:#000;
background-color:#FFF;
}
"The second one may look prettier buy it sure doesn't help me find anything. The most important thing is the ruleset, which is the part before the "{" and "}". Having everything on one line makes scanning the document much quicker."
The above sentence was said by Jonathan Snook. Not only the good example above help with quickly scanning you CSS, it also helps in keeping you CSS file smaller by removing unneeded spaces and characters.
3. Use CSS shorthand - Roger Johansson
"Most people know about and use some shorthand, but many don't make full use of these space saving properties."
The above sentence was said by Roger Johansson. Roger Johansson has a very in-depth article on the importance of CSS shorthand, and gives quite a few examples of how to use it while coding CSS. While CSS shorthand recudes the size of the stylesheet, it also helps organize and keep the code simple. Beaufitul CSS is simple CSS. Here's an example:
Not Efficient
margin-top: 1em;
margin-bottom: 0;
margin-bottom: 2em;
margin-left: 0.5em;
Efficient
margin: 1em 0 2em 0.5em;
4. Allow block elements to fill space naturally - Jonathan Snook
Mr. Snook has another piece of crucial advice that every web developer should live by allow block elements to fill space organically. The recurring theme in CSS development is, it's to not force the code to do things it isin't meant for. This means avoiding CSS hacks and finding the simplest solution possible.
"My rule of thumb is, if I set a width, I don't set margin or padding. Likewise, if I'm setting a margin or padding, I don't set a width. I set the width on the containers and then set margin and padding on the elements within them. Everything usually turns out swimmingly."
Jonathan Snook's rule of thumb is great for ensuring that your layouts won't break and that the simplest approach is used when creating layouts with block elements.
5. Set a float to clear a float - Trevor Davis
"Floating is probably one of the most important things to understand with CSS, but knowing how to clear floats is necessary too."
The above sentence was said by Trevor Davis. Trevor Davis have exellent portfolio of web layouts. His blog is an excellent resource for any web developer wanting to brush up on his design chops. In Trevor's flagship articles - "The 6 Most Important CSS Techniques You Need To Know", he's added a bugger that can save many headaches when using columns in your layouts.
6. Use negative margins - Dan Cederholm
"There are situatuons when using negative margins on an element can be easiest way to "nudge" it out from the rest, treating the exception to the rule in order to simplifu code."
The above sentence was said by Dan Cederholm. While it may seem counterintuitive to put a begative in front of any declaration, like: (margin-left: -5px), it's actually quite a good idea. Mr. Cederholyg negative margins on elements are sometimes easier than having to change every other aspect of the design to make it align the way you want.
7. Use CSS to center layouts - Dan Cederholm
Centered layouts are on the surface a very simple idea, but for some reason they don't always work as easilt as advertised. Centering layouts with CSS can be frustrating endeavor for a biginner. Dan Cederholm got a tried-and-true method that he uses frequently to achieve-layout nirvana.
Example:
#container {
margin: 0 auto;
width: xxxpx;
text-align: left;
}
Many modern designs rely on centered layouts, so using this method will at some point come in handy for web developers and designers.
8. Use the right DOCTYPE - Jeffrey Zeldman
Jeffrey Zeldman is in the upper-echelon of web designers. The DOCTYPE of a web page is one of the most overlooked aspects of desing. Using the right DOCTYPE is crucial.
"Using an incomplete or outdated DOCTYPE or no DOCTYPE at all throws these same browsers into "Quiks" mode, where the browser assumes you've written old-fashioned, invalid markup and code per the depressing industry norms of the late 1990s."
9. Center items with CSS - Wolfgang Bartelme
"Centering items is a frequent task when designing websites. But for people that are new to CSS it's mostly kind of enigma how to center for example a whole website in browsers other than IE."
Wolfgang Bartelme is a web designer with Bartelme Desing, a web design firm. Wolfgang Bartelme has created a tutorial that helps with the complicated task of centering elements with CSS. Centered elements are insanely useful, but are some hard to achieve given the design. Bartelme's tutorial ensures centered alignment by choosing the right DOCTYPE and making adding his CSS voodoo. The code nothing fancy and gets the job done, and falls directly in line with striving for simplicity in CSS.
10. Utilize text-transform commands - Trenton Moss
Trenton Moss knows web usability, He has his own web usability company that trains people in usability traning and web writting.
"One of the lesser know, but really useful CSS commands is the text-transform command. Three of the more common values for this rule are: text-transform: uppercase, text-transform: lowercase, and text-transform: capitaliza. The first rule turns all characters into capital letters, the second turns them all into small letters, and the third makes the first letter of each word a capital letter."
By using CSS to display the appearance of text on the site, it allows for change in the future and keeps things consistent over time.
Internet Reference:
10 Principles of the CSS Masters, [Online], Retrieve 4 March 2011.
No comments:
Post a Comment