Breaking Bad Habits: 6 tips for coding a website

Breaking Bad Habits: 6 tips for coding a website from

Cindy said,

Can you give some good practices for coding? For example, I am uploading a bio pic, I’m using the same pic on my blog, can I use the same link? Or is it faster to upload it to each site? I would love a list of things to “never do” coding-wise because I feel like I am making things up as I go and probably slowing my site down. I’m adding all the CSS you’ve been teaching me in my platform’s “custom css” form area – is this right? Never do? Thanks Sarah!

Thanks Cindy! Two answer your two questions – you can use the same link for your photo over and over. The only reason I ever upload the same photo more than once is if it needs to have a different title and description for sharing or SEO purposes. And adding CSS to the custom area is the best way to alter things without screwing up your site.

1. No inline styles. Instead of adding a color or font to the visual/html editor for your post, add a class to the stylesheet. Then when you decide to change your whole site design and switch all the pink to green, you can go into your stylesheet, change that class and it will switch all of the instances that use it.

Here’s an example:

#content .highlight {
font-family: trebuchet ms, sans-serif;
font-size: 12px;
font-weight: bold;
text-transform: uppercase;
color: green;

<span class=”highlight”>This text is super important</span>

2. Keep your classes simple and describe the location or purpose – try “sidebar-title” instead of “fancy-gray-script-text”

3. Keep your stylesheets and pages clean – remove any classes or selectors that are not being used, put each style on its own line, indent child items to make things easier to find and use all lowercase text.

4. Use CSS shorthand…

padding-top: 4px;
padding-right: 6px;
padding-bottom: 4px;
padding-left: 10px;

can be combined into one line…

padding: 4px 6px 4px 10px;

(the order is always top, right, bottom, left)

5. Use a top-down structure for your stylesheet: global rules, header, nav, main content, sidebars, footer

6. Never use an image when you can do it with CSS (and you can do a lot!) – lighter sites load faster

What other coding rules need to not be broken?


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

  1. says

    Great tips Sarah! I also encourage others to avoid plugins as much as possible. If there’s code that can provide the same functionality, try utilizing it instead of using a bulky plugin that might weigh down your sight and slow down your loading to,e.

  2. says

    These tips are wonderful! I discovered your blog a while ago, and am thrilled at how you make coding seem so… well, doable. Thank you so much, both for the excellent tips, and the inspiration to learn more :)

  3. says

    Hi Sarah! :-)

    This padding thing is something I’ve been trying to figure out for legitimately 2 weeks….. !!!! Is there a quick way to explain how to adjust / minimize the spacing between widgets & title bar thingys in my sidebar? (My gosh I’m such a newb lol) …. I have been searching & searching and just can’t find an answer! Hope you can help lady!

    – Brooke

    • Sarah Morgan says

      Hey Brooke – You’ll need to find the widget title style in your CSS file and then adjusting/add padding-bottom or margin-bottom to put more space between it and the box below.