Structuring HTML and CSS to Make your Site “Skinnable”

Basic Tips

  • Underlying HTML code structure should be semantic and clean.
  • Look for repeated patterns, identify standard chunks of content by similar function and structure. Standardize HTML tags and class names used for these elements. Think in terms of basic reusable building blocks. Try to keep HTML structure and CSS naming schemes semantically-based but include plenty of “hooks” for flexible skinning options.
  • Separate CSS styles into two main groups: layout and design. The layout styles are the default styles which will be applied to all skinnable pages. These set up the basic structure and should be bullet-proof. Extensive cross-browser testing is vital. The second group of styles sets the design or “skin”. These consist of fonts, font colors, background colors and images, etc. To change the skin, just create different skin CSS files and swap them out. Creating new skins can either be done by writing skin CSS code from scratch or set up a WYSIWYG system to apply different visual styles (backgrounds, borders, etc.) to the standard building blocks of your web page and generate a CSS file automatically.
Leave a comment

Leave a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s