CSS is an important part of development, but you need to make sure you get it right; otherwise you are making more work for yourself. By instilling good practice when you work, you can be sure that anything that you create will be the best it can be.
As with any task, organisation is key. Avoid randomly dropping items in as they occur to you; you should establish a structure and stick to it to ensure that you know where you are at any point.
Declare your generic items first, followed by the less generic ones; this will allow your CSS to inherit attributes, making it easier for you to override a specific style when required. Your editing will become faster because your structure makes more sense.
Work out a structure that works best for you, but also try to keep in mind other developers and future edits you may wish to make.
Here is a suggestion:
- Resets and overrides
- Links and type
- Main layout
- Secondary layout structures
- Form elements
Create a Logical Structure
You may be tempted to jump straight into coding before planning what it is you wish to create. This will lead to all kinds of problems. Instead, you should first create a logical structure for how you wish the page to look. The most experienced developers always first make sketches or wireframes before they move to development so that they can plan out not just what the final work will look like, but also work out what needs doing first.
- Draw the logical structure.
- Create an HTML structure that will support this.
- Start working on CSS.
Make HTML First
Some developers create their CSS at the same time as their HTML. A better approach is to make the entire HTML mockup first. This is because you know all the elements of your site layout, but you don’t know what CSS you will need for your design. Making the HTML layout first will enable you to visualise the page as a whole, and let you think of your CSS in a more top-down way.
Choose Names Wisely
Avoid limiting names; when selecting naming conventions, always remember future edits. Name your elements based upon what they are, rather than what they look like. If a client asks you to change the colour of links, for example, you won’t have to go back and re-name everything.
Use External Stylesheets
External stylesheets can be useful as a way to keep content and presentation separate. Put all your CSS into an external file and include it in your HTML.
Sometimes, depending upon the size and complexity of your design, it will be useful to use multiple stylesheets, as opposed to one huge one. Make sure you bear in mind the number of HTTP requests that are being made – you may find it best to develop with multiple stylesheets then combine them into one file; this way the entire file will be cached on the user’s computer without casing speed issues.
Include a Colour Reference
A simple way to avoid complications if you cannot remember the hexadecimal colour code for each element of the design is to include a colour reference at the top of your CSS file.
It would be lovely if you could use float: center to center block level elements, but it isn’t that straight forward. Instead you will need to use this code:
margin: 0 auto; // top, bottom – and left, right values, respectively – add a width to center it too.
Firebug is a great tool if you are using Firefox. Packed with features, you can use it to inspect, modify and edit your CSS in real time.
If you are using Chrome, you already have developer tools that work similar to Firebug.
Lists are a brilliant way to present your data in a structured format, where it is easy to modify the style. They are also good for making navigational menus.
Finally, here are some essential things to avoid:
Keep things organised where possible by re-using attributes, grouping elements as opposed to declaring the styles again. If your h1 elements use the same font size, colour and margin as your h2 elements, group them together with a comma.
- Using Inline Styles
Inline styles mix up content and presentation, which can be very confusing for future edits.
- DIV Wrap
It might seem easier to create a unique element style by wrapping a DIV with an ID or class around it, but you’ll start to clutter your stylesheet.
- Extra Selectors
This won’t be the end of the world, but adding extra selectors will keep your CSS from being simple, straightforward and clean.