As we grow our web team at Pulse, we’ve begun to document a lot of our common practices in web development. This goes beyond a general style guideline and includes commonly used code to solve everyday problems. When it comes to CSS, there are many approaches to fairly simple problems. However, when collaborating on large projects it’s important that these problems are documented and the solution reused instead of having code written more than once.

1. CSS Reset

Whenever we start something, we always use a CSS reset stylesheet. This has become necessary since many browsers render elements differently. We patched ours from multiple projects and cut it down to suit our needs. This is of course done on purpose in order to minimize the size of the css file. Remember that every byte counts on mobile devices! There is no point in including resets for elements that will not be used in the particular project. If you’re starting off with a new project, we recommend either the Eric Meyer CSS Reset or Normalize CSS. Below is an example CSS reset snippet of that we use in some of our projects.

 

2. Centering a block

One of the questions I get asked all the time by my developer friends (not front-end) is how to center a block in the page. “But why doesn’t text-align: center work?” It’s not text… Generally, the more information you have about the block you’re trying to center, the easier it is to center it. The following code is for a foolproof solution to horizontally centering DIVs. This method works if the block has a set width or height. I recently came across Chris Coyier’s solution for “centering a block in the unknown”. He does a great job of explaining how to center a block with unknown width or height. You can find 2 solutions in the post here.¬†http://css-tricks.com/14745-centering-in-the-unknown/

CSS:

3. Working with floating blocks

I find that the biggest problem developers struggle with when using CSS is the float property. It isn’t explained well and a lot of devs end up falling back to tables. Tables are gross and should only be used for presenting tabular data. Floats are magical and can be mastered rather easily. The main problem¬†experienced when floating blocks is the parent height not adjusting to its children’s heights. This is easily mediated by the following 2 methods.
CSS:

HTML:

Preview:
floating blocks

Some other recommended sources for CSS tips are CSS-Tricks and RedTeamDesign. We read those everyday. Happy Styling!