This link has been bookmarked by 228 people . It was first bookmarked on 20 May 2009, by Jose Roca.
-
29 Feb 12
-
21 Nov 11
-
13 Oct 11
-
04 Oct 11
-
28 Sep 11
-
27 Sep 11
-
Jochen FrommTips for writing CSS that is slimmer, faster and less likely to give you a headache
-
11 Aug 11
-
12 Jul 11
-
- 20 May
10 Best CSS Practices to Improve Your Code
CSS, Code, Programming
<script src="http://platform.twitter.com/widgets.js" type="text/javascript"></script> <script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
It’s really easy to find yourself wondering how your CSS got to be such a mess.Sometimes it’s the result of sloppy coding from the start, sometimes it’s because of multiple hacks and changes over time.
Whatever the cause, it doesn’t have to be that way. Writing clean, super-manageable CSS is simple when you start off on the right foot and make your code easier to maintain and edit later on.
Here are 11 tips for speeding up the process, writing CSS that is slimmer, faster and less likely to give you a headache.
<!-- BuySellAds.com Zone Code --><!-- END BuySellAds.com Zone Code -->
1. Stay Organized
-
1. Stay Organized
-
2. Title, Date and Sign
-
3. Keep a Template Library
-
4. Use Useful Naming Conventions
-
5. Hyphens Instead of Underscores
-
6. Don’t Repeat Yourself
-
7. Optimize for Lightweight Style Sheets
-
8. Write Your Base for Gecko, Then Tweak for Webkit and IE
-
9. Validate
-
10. Keep a tidy house
-
-
18 May 11
-
24 Apr 11
-
13 Mar 11
-
28 Feb 11
-
27 Feb 11
-
19 Jan 11
-
13 Jan 11
-
- Resets and overrides
- Links and type
- Main layout
- Secondary layout structures
- Form elements
- Miscellaneous
-
You’ll notice above where I declared a couple of column id’s and I called them col-alpha and col-beta. Why not just call them col-left and col-right? Think of future edits, always.
Next year you may need to redesign your site and move that left column to the right. You shouldn’t have to rename the element in your HTML and rename the id in your style sheet just to change its position.
-
5. Hyphens Instead of Underscores
Older browsers like to get glitchy with underscores in CSS, or don’t support them at all. For better backward compatibility, get into the habit of using hyphens instead. Use #col-alpha rather than #col_alpha.
-
It’s very important that you understand the order in which CSS interprets these shortcuts: top, right, bottom, left. A big clockwise circle, starting at noon.
Also, if your top and bottom, or left and right attributes are the same, you only need to use two:
-
Another quick tip for slim CSS: you don’t need to specify a unit of measure when using zero. If a margin is set to 0, you don’t need to say 0px or 0em. Zero is zero regardless of the unit of measure, and CSS understands this.
-
9. Validate
Make use of W3C’s free CSS validator. If you’re stuck and your layout isn’t doing what you want it to do, the CSS validator will be a big help in pointing out errors.
-
10. Keep a tidy house
Separate browser-specific CSS to its own individual style sheet, and include as needed with Javascript, server-side code or conditional comments. Use this method to avoid dirty CSS hacks in your main style sheets. This will keep your base CSS clean and manageable.
-
-
09 Dec 10
-
10 Nov 10
-
04 Nov 10
-
01 Nov 10
-
25 Aug 10
-
16 Aug 10
-
2. Title, Date and Sign
Let others know who wrote your CSS, when it was written and who to contact if they have questions about it. This is especially useful when designing templates or themes.
Wait a minute… what’s that bit about swatch colors? Over the years, I’ve found that adding a simple list of common colors used in my style sheets is extremely helpful during initial development and when making edits later on.
This saves you from having to open up Photoshop to sample a color from the design, or look up colors in the site’s style guide (if it has one). When you need the HTML code for that specific blue, just scroll up and copy it.
-
-
30 Jul 10
-
15 Jul 10
-
05 Jul 10
-
24 Jun 10
FredIt's really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it's the result of sloppy coding from the start, sometimes it's
-
23 Jun 10
-
10 Jun 10
-
27 Apr 10
-
13 Apr 10
-
15 Mar 10
-
05 Mar 10
-
25 Feb 10
-
14 Feb 10
-
08 Feb 10
-
31 Jan 10
-
29 Jan 10
-
27 Jan 10
Adriana Atzimba Tienda MartínezNunca está de más mantener cierto orden
css webdesign tips reference bestpractices development tutorial web
-
26 Jan 10
-
24 Jan 10
-
-
19 Jan 10
-
13 Jan 10
-
09 Jan 10
-
01 Jan 10
Ian Gray10 Best CSS Practices to Improve Your Code
css webdesign tips reference bestpractices development tutorial web
-
31 Dec 09
-
29 Dec 09
-
19 Dec 09
-
18 Dec 09
-
17 Dec 09
-
14 Dec 09
-
10 Nov 09
-
26 Oct 09
-
30 Sep 09
-
29 Sep 09
-
22 Sep 09
-
11 Aug 09
-
01 Aug 09
-
25 Jun 09
-
18 Jun 09
It's really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it's the result of sloppy coding from the start, sometimes it's
css webdesign tips reference development tutorial web design bestpractices
-
15 Jun 09
-
02 Jun 09
-
01 Jun 09
-
31 May 09
-
29 May 09
-
28 May 09
xavidixIt's really easy to find yourself wondering how your CSS got to be such a mess. Sometimes it's the result of sloppy coding from the start, sometimes it's
-
26 May 09
-
25 May 09
-
24 May 09
-
22 May 09
-
21 May 09
Would you like to comment?
Join Diigo for a free account, or sign in if you are already a member.