Organizing Properties

One concept that doesn't actually change the way a page is displayed but can greatly help in workflow is the idea of organizing properties. Basically it's the idea that you should consider the order of your properties in any given style and try to keep a standard for that order.

The two sets of styles below share the *exact* same properties. Now pretend that you are either coming back to this code after having written it some time ago or maybe are seeing someone else's code for the first time. Pretend you want to make a single value adjustment to the "margin-right" property. See which one makes it easier to find this property.


#style {
        margin-left:10px;
        width:600px;
        border-radius:20px;    
        position:relative;
        color:rgb(64,64,64);
        background-color:rgb(224,224,255);
        box-shadow: 10px 10px 5px black;
        display:block;    
        left:20px;      
        z-index:3;  
        line-height:1.1em;                
        margin-right:12px;
        border:1px solid black;
        height:400px;
        top:13px;        
        font-size:1.2em;
}

#style {
        display:block;
        position:relative;
        width:600px;
        height:400px;
        left:20px;
        top:13px;
        margin-left:10px;
        margin-right:12px;
        
        color:rgb(64,64,64);
        font-size:1.2em;
        line-height:1.1em;
        
        border:1px solid black;
        border-radius:20px;
        background-color:rgb(224,224,255);
        box-shadow: 10px 10px 5px black;
        
        z-index:3;
}

In the case of the first style set it should be easier to find a desired property because the author made sure to mainatin a particular order which, in this case, categorizes properties by position and size, font properties, element colors, and z-index.

It may not seem like to long of an extra time, but if you find you need to change many properties over many styles, then it can add up.

Centering Elements

Centering elements is, mysteriously, still one of the harder things to do within web design even tough you might think it one of the most essential options.

The Margin Auto Trick

Setting your margins to "auto" isn't necessairly a "trick" since it the expected behavior of having automatically sized margins on either side of an element - but it sure feels that way.


.center {
	width: 50%;
    margin-left: auto;
    margin-right: auto;
}

There's actually not much of a point to showing an example of using left and right margins set to auto since, coincidentally, you're looking at one right now. This entire page and many elements within it make use of these properties to stay centered.

Elements as tables

Quite a few browsers have default properties for tables that are different than the default properties for other elements like divs. One of those is that table content is often display centered by default. While it is traditionally discouraged to use tables as a styling effect, setting the "display" property to a value of "table" is one work around. It also is helpful in situation where you already need to define left or right margins in an otherwise centered object and don't want to introduce another level of parent/child relationships to do so.

The "Reset" Class

There are many quirks and default values that have been included in web development for many years now. You've probably already noticed quite a few of them. Mainly the way every element placed onto a brand new document seems to have a default margin or padding.

This stems from the earliest days of the internet when it was the web browser itself that defined the style of the page you were reading. We didn't have the bandwidth for too many (if any) images or styling code so only text and critical content was sent. If any given page was simply a title and a few blocks of text it was perfectly reasonable for the web browser itself to add margins, outlines, and even colors to make the reading experience better.

The problem, like much of web design, is that new browsers constantly have to take into account older websites and accomodate their different design approaches. That means the safest approach for a new browser is to change nothing.

Since most modern design theory would suggest it's usually best to default any given setting to "0" and let the user define the value we have to be creative if we want to create such an environment for web development. This can come in the form of a "reset" class.

This implementation can be as simple as something like this.


*{
	margin:0;
	padding:0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* For older web browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

Since these entires amount to rewriting the default values of page elements it's not uncommon for web developers to each keep completely different reset classes. It will always depend on the developers personal tastes.