|
When having a custom style, would it be better to store them as static resource or just dump those styles inside Visualforce page as inline CSS?
I'm guessing development in Salesforce is different from other development. |
|||
|
|
|
There is no 'proper' way to do this, but typically the resources will end up in a static resource so that's a good way to go, although it can be rather painful to constantly zip up files and upload them. Resource bundles in MavensMate can make this setup far easier to deal with: you can edit a file and upload with a zip with a couple of keystrokes. I highly recommend this approach as it means you'll be using your intended file structure etc. within the zip file, something you'll need to consider when you're using bundled images/Javascript as well. An alternative, and handy option, during development is to use a cloud storage service like Dropbox. Put your CSS in the public folder, get a public link and then use that inside of your page to include the CSS. That way you can just hit save on the file, wait a couple of seconds and then refresh your Visualforce page to see the result. In my experience it takes no more than two to three seconds for Dropbox to sync small files like that. |
||||
|
|
|
In this case, developing on Salesforce isn't that different from other development. You have the same trade-offs between options 1 and 2 - keeping CSS separate as static resources allows multiple Visualforce pages to share the same CSS, but you have to upload the CSS to a static resource. Dropping them in the Visualforce page is quick and easy, but you'll find yourself pulling them out when you write the next Visualforce page that wants to share the styles. One more consideration - if you just have some CSS, then it's convenient to upload it directly as a static resource and access it from Visualforce like this: If you have CSS, some images, a bit of JavaScript etc, you'll probably want to zip them up and upload the zip as a static resource. In that case, you'll include the file(s) a little differently: If the CSS references other resources within the zip, for example, background images, relative URLs (e.g. |
||||
|
|
|
Storing the CSS in a static resource means that it's all in one place and can be organised within folders, you can define your structure. Therefore your code will look more cleaner and it's easier to maintain going forward. The downside here is that every time you make a change to a file, you need to zip and re-upload the file back to the static resource. Writing CSS inline will give you flexibility in terms of making changes very quickly and effectively without having to upload files every time you make a change but then on the other hand you code will look like a mess and it will be very hard to maintain, even to understand for someone else who might work on the same code. How I usually work with this is, I write all the CSS in the head of the page until I get everything right. Once I'm happy with all that, I move all that code to a file in a static resource and I replace the tags with the static resource at the end. |
|||
|
|
