1 / 10

XHTML and CSS Crash Course Presentation #5: Part 5: Efficient and clean css

XHTML and CSS Crash Course Presentation #5: Part 5: Efficient and clean css. 1. Remember about inheritance. One of the most frequent problems: Designers love to duplicate values when there is no such need :) Example: #dLayer1 { font-family: Arial, Helvetica, sans-serif; margin: 10px; }

fredericka-gaines
Download Presentation

XHTML and CSS Crash Course Presentation #5: Part 5: Efficient and clean css

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. XHTML and CSS Crash Course Presentation #5: Part 5: Efficient and clean css

  2. 1. Remember about inheritance One of the most frequent problems: Designers love to duplicate values when there is no such need :) Example: #dLayer1 { font-family: Arial, Helvetica, sans-serif; margin: 10px; } #dLayer1 p { font-family: Arial, Helvetica, sans-serif; color: #fff; }

  3. We do not need to do that... ...as values are iherited. So, we can use: #dLayer1 { font-family: Arial, Helvetica, sans-serif; margin: 10px; } #dLayer1 p { color: #fff; } and p tag will ihertit font-name from its container!

  4. 2. Missing properties separators Another problem: We're all typing too fast ;) Example: #dLayer1 { font-family: Arial, Helvetica, sans-serif; margin: 10px } The “;” sign after the last property is missing. This is not a permanent error; however, certain browsers (we all know which ones...) may go wild after we'll not use last semicolon in declaration. And if you will add selector later, but there will be no semicolon, then we can have a problem. So, Always close last property (please ;)

  5. 3. Using shorthand, but undefined properties Shorthand properties are very useful. margin: 0; or margin: 10px 10px 10px 12px; but sometimes we're using these not very proper way: Example: #dLayer1 { background: #fff; } Where it should be: #dLayer1 { background: #fff none; } - as background is a shorthand for background-image as well... Therefore no image, or image path should be defined.

  6. 4. Using units with zero values Zero is zero. Zero pixels is zero, and zero carrots is zero too :) So, as we speak: Example: #dLayer1 { margin: 0px; } Should be: #dLayer1 { margin: 0; }

  7. 5. Background image paths One of the most common errors in css is missing '' in image paths. Look: Example: #dLayer1 { background: transparent url(/images/picture.gif) no-repeat; } Should be: #dLayer1 { background: transparent url('/images/picture.gif') no-repeat; } This is very important with IE4, 5 and 5.5 – they may really go nuts without single quotes on image path.

  8. 6. Optimization example – old css to new css .menu { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 11px; line-height: 15.4px; color: #935E57; background-color: #EFEFF4; text-decoration: none; padding: 6px 8px 8px 8px;} OLD > .menu { font-family: Arial, Helvetica, sans-serif; font-weight: normal; font-size: 11px; line-height: 15.4px; color: #935E57; background-color: #EFEFF4; text-decoration: none; padding: 6px 8px 8px 8px;} <MARKED FOR CHANGE

  9. After changes: .menu { font-weight: normal; font-size: 11px; color: #935E57; background: #EFEFF4 none; text-decoration: none; padding: 6px 8px 8px 8px; } Font-family removed as it is inherited from parent element. Background-color changed to background: with none (as there's no image). Line-height: 15.4px removed as nothing like 15.4px exists. Can be changed to points, percents, em or full pixels if necessary. Tabs removed and } moved to the next line for easier reading.

  10. Summary Remember about inheritance Always close last property If you want to use shorthands, use them responsibly :) Keep in mind, that zero is always zero Always close image paths

More Related