Here goes the first of a series about some best practice and know how in Web Site Building.

A question of structure

I you’re like me, when creating a new Website skeleton (folder structure) I used to create a folder “css” for my stylesheets and a folder “js” for my javascripts.

Nowadays I’ve changed my habits by replacing the folder “css” by a folder named “styles” or “styleSheets“. But you’ll understand why later.

I also change my habits where I used to leave every css statement in one file. While this is totally reasonable for a tiny site or a landing page it becomes less convenient for larger sites.

When considering styles in css, we logically can group some statements in categories. And we end up with a category for the typefaces, one for the structure and placements, one for the colours, one for the forms, …

And let’s not forget the famous reset.css

Reset or not

We should talk here about common practice against best practice. But why
use a reset anyway ? Well, each browser has its default way of showing things. An

<a>

tag won’t look the same on all browsers, each one having a default way of showing tags. When developing a website (webdesign) I really do need to build upon solid ground. In practice, CSS Reset is important in removing inconsistent margins, paddings, line-heights, and other attributes that can cause your web pages to look differently across various browsers.

What is important nowadays is to be consistent and browser agnostic.

You can build one reset.css  yourself or use an already existing one. I strongly suggest you use the one from Eric Meyer.

In either cases, you should put the reset css statements in your development as the first styles parsed by the browser.

So how would my final css folder structure look like ?

Well here goes an example:

project/styles/
reset.cssresets default browser styling
grid.csssupplies mixins for a grid system, such as the .col(@width) mixin above
typography.csssupplies css for font styling as well as @font-face rules
form.csscss features like buttons, forms, and dialogs
layout.cssdesign-specific layout of the site
main.cssthe main stylesheet, including all of the above

And now here is a glimps of the content of the main.css

// Main CSS style sheet
@import "reset.css";
@import "grid.css";
@import "typography.css";
@import "form.css";
@import "layout.css";

Now just call the main.css file in your html …and voilà.

A word on grids

Personnaly, I won’t go developing a web site without using a grid css framework. Grids is the best way to organise all elements in your design.

Nowadays, pages are built using blocks of information placed with a certain strategy related to each other one. A grid framework will help you CONSIDERABLY in building the layout of your site. DON’T GO WITHOUT IT ! It’s quite difficult to explain it shortly (and too long is not the moto of Sniptrichint !) but grids saved me big time and if you never used them before, try one and you’ll be convinced.

Adaptive Design

Once we talk about grids it is necessary to talk about adaptive design. Today, your site site can be viewed on different devices each having a different size and resolution then your typical computer screen. You site  should, from the ground, include an adaptive design.

A lot of actual Css Grid Frameworks propose this feature.

But I think it’s time for you to have a try.

Here are a few frameworks worth looking at :

and more…(just google it !)

 

To summarize

  • Separate structure and skin. Have separate classes for defining the way an element fits into the layout, and the way it is stylized.
  • Avoid location-dependent styling.  Instead of using this .container h2 use this h2.specialLine . The later can then be used anywhere. Smart isn’t it !

 

In part 2 we will be going one step further towards  “Object Oriented” CSS to really ease (a bit more) the workflow of building a website.