Informal HTML Conventions

Question

Magento buttons have a button/span/span structure, which I thought was silly at first. But it's really helpful for styling them, because those two elements give a designer an awful lot of flexibility without having to change the templates.

This got me to thinking that writing the templates for modules is more of a technical task than a design one. It's about writing HTML that can be everything to anyone, without any specific layout in mind.

So I have two questions: is the above thought correct, and are there any other similar conventions in Magento that I should bear in mind when writing templates? Things that aren't common sense, but obvious to the experienced developer?

Answer 1

The general advise when writing templates is to write it in such a way that it uses standard components that can be found in the main css file: /skin/frontend/default/default/css/styles.css. Marking up a price can be easily done by applying the correct CSS-classes.

There are various general CSS helper classes:

.hidden     
.nobr       
.wrap       
.a-left     
.a-center   
.a-right    
.v-top      
.v-middle   
.f-left    
.f-right     
.f-none     
.f-fix      
.no-display 
.no-margin  
.no-padding 
.no-bg      

.form-list class to mark up forms .std class for automatic markup of text .buttons-set when grouping buttons .data-table for tables .block for marking up blocks like in the sidebar, use in combination with .block-title and .block-content

There are a bunch more, I advise to look through the style.css yourself and you can do 80% of the markup of your custom module without writing a single line of CSS.