Visual force 101 - Style tips

Custom style in visualforce pages can be tricky if you don't have much experience with it. Sure the same rules apply with any HTML page, but there are a few tips that might help move things along. When trying to do custom style, the first thing to know is in the apex:page tag.

<apex:page standardStylesheets="false" ... >

This is designed to disable the style from salesforce from showing on their standard tags like apex:blocktable etc. This allows you to customize them to your liking without having to fight their style, and allows you to use salesforce's native functionality; no need to reinvent the wheel when you don't have too.

However this does not prevent their CSS from overriding yours. Which brings me to the next rule, use long/custom class names on your tags.

 <div class="AlertsMessageBox floatL">

If you use classes like 'btn' or 'button' for example, it would force salesforce's style on whatever has that class to look like their buttons. Which can be useful when wanting to mimic their buttons, but on non button or link tags like div's or span's the style seems to be missing padding, and I have yet to find a way to force it. So instead I use the thin button as a 'disabled' button, and when 'enabled' it appears to 'grow' into the real button.

When adding style sheets and js to the page it's best to use standard HTML input and script tags.

<script type="text/javascript" language="javascript" src="{!URLFOR($Resource.SelfServiceTemplate, '/js/jquery-min.js')}" ></script>

I have noticed that when using the apex:inputs the order the render as on page load isn't always consistent with the order on the page. Now this hasn't happened in their newest releases but i still try to use the HTML one just in case. Also make sure all CSS includes are above any js on the page, it has been found that if the are mixed or the js is on the top that it will sometimes cause errors with the js and brake the page. I have never seen it, but it's a good 'best practice' standard to keep.

In certain cases you'll need to force style, and two of the best ways to do that is with the !important hack and in-line style. Both of witch is a LAST RESORT, but are still acceptable practices. 

ul li{list-style:none !important; padding:0; margin:0;}

The !important hack is used to put emphasis on the attribute it is in, making it more 'important' than anything else that may try to override it. 

<div style="font-size:11px;">

In-line style works better in that way, but is more founded upon in my eyes due to it's obvious disadvantages. While making the code look messy, it also makes it harder to manage the style in any way since its not in a stylesheet where it belongs. BUT in-line style is the the 'last line of defense' in the cascade of CSS, since it overrides all. 

Questions? 

Twitter: @SalesForceGirl  or Facebook