A good development plan will help you see holes in the design and your thinking before you start writing code. As you plan out a site, here are some questions to be thinking about:

CMS Setup

  1. What are the post types?
  2. What are the taxonomies, and what post types do they belong to?
    1. Do we need taxonomies, or would a meta item suffice? (See panel)
  3. What are the custom meta items? What types of fields will they be?
  4. Are there any post 2 post connections?
  5. What plugins will we need for this website? (See WordPress Tips for recommended plugins.)

and, generally:

  1. How can we handle this site’s data efficiently?
  2. How can we make this site’s data easier to manage?
  3. What blocks of code are you going to reuse throughout the site? Do they need to be in a plugin, or in the theme?
  4. Use the WordPress PHP style guide for both writing code and documentation.

Only use a taxonomy if you need to display an archive page for it. If it’s just for better organization, use a custom meta item.

Markup

Markup is usually difficult to plan for. What seems simple when you look at the design can become much more complicated as you start to code it. In general, plan for these ideas:

  1. Simple is good, Simple is life.
  2. Use class names frequently. It’s better to style based on a class than a tag, because the tag may need to change.
  3. If you’re working on a complex module, try the BEM naming convention:
HTML
<div class="person">
    <div class="person-image">
        <img src="[...]">
    </div>
    <div class="person-info">
        <h3 class="person-name"></h3>
        <p class="person-title"></p>
        <p class="person-email"></p>
    </div>
</div>

Notice, I didn’t write “person-info-name,” but rather “person-name,” which keeps it simpler.

This way, we can nest for SCSS organizational purposes without adding more specificity to our CSS selectors:

SCSS
.person {
    &-image {}
    &-info {}
    &-name {}
    &-title {}
    &-email {}
}
CSS
.person {}
.person-image {}
.person-info {}
.person-name {}
.person-title {}
.person-email {}

SCSS

  1. What modules does this site have? How can we reuse styles?
  2. Modularize margins and padding as well. Look for how spacing works on the site as a whole, not just a single page.
  3. Don’t overnest your CSS. This is paramount to future site maintenance.
  4. Get the initial type styles from Typecast.
  5. When it comes to type scaling, using rem units at the module level only might work well: CSS Tricks Article
  6. For more specific tips, follow the CSS Style Guide

JavaScript/UX

Do not underestimate JavaScript! Complex user interaction effects take a hell of a lot more testing than CSS effects, and are more prone to unusual behavior.

  1. In general, follow the WordPress JavaScript style guide for writing code and documentation.