CSS Nesting and Development

All web development CSS best practices guidelines will mention nesting your css.  It can often be tricky and time consuming getting the full CSS path for an element. If you miss out one element or make one mistake, there is no display change.

Fortunately, Firebug provides an instant solution for getting the full path of an element.  Simply highlight the element in firebug, right click and choose Copy CSS Path.

CSS Path in Firebug

As I develop a page, I first use inline styling because I find it much faster.  You can change the style of an element where it is on the page, refresh and get an instant result.  After the element looks how I want it, I then move it’s CSS to a style sheet.

For example, if I am editing how a paragraph looks on a page, I will firstly just edit it to look something like this

<p style=”font-weight: bold; padding-top: 10px”>Lorem ipsum<p>

When I get things just right, I move the code to a css file, removing the “style=” part from the web page.

This entry was posted in Technical and tagged . Bookmark the permalink.

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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