HTML Best Practices for Sitecore

HTML Best Practices for Sitecore

This article is general guide for the front end developer those written html code is going to integrate with Sitecore CMS. There are number of practices are followed by the font-end developer for different platforms such as asp.net, php, java etc. but I think best practice is communication between front-end developer and Sitecore developer so they can know about the requirement and html and Sitecore challenges.
I have did some front-end development and Sitecore development on some of project and notices that some time when font-end code is written by front-end agency which don’t have Sitecore integration knowledge, is following best practices on their own level but not match Sitecore requirement level.
I include my experiences and practices which I gain after working on Sitecore in few years and some source which I read from different blogs in this article.

All text should editable from Sitecore

This should always keep in mind that all text will come from Sitecore and it should be editable, whatever it is button text, tool tips, watermark, jQuery message, link text, alt text, log message etc.

Use Class attributes for CSS, not id attributes

during Sitecore integration, developer may want to use html element in back-end code so Sitecore developer would add runat attribute to the HTML. This will add some prefix with id and value of id will change at front-end this may break css and jQuery functionality
For ex. –div element like this

htmldiv

Will render like this –

cdiv

So always use the class attribute instance of id because it will give you guarantee that css will apply on front end and same for jQuery.

Don’t apply special attributes to the last item in repeating elements

When development with a “last” class would be more expensive because you’d need to determine the count of the collection. So use “first” instance of “last”. For Sitecore developer number of list items may change because all items come in dynamic way so each time developer needs to calculate the total count in the list to get the last items which is a performance drawback so apply special attributes to the first item in the list.

Avoid Additional HTML in <p> tag

since Sitecore’s Rich Text Field, renders paragraphs automatically in <p> tag. Try to not develop HTML that expects a specific structure within a <p> tag.
For ex.- Lorem ipsum <span class=””someClass””>dolor</span>
Where someClass is applying bold or italic property on the text. Front end developer can use <b> or <i> tags with in <p> tag.

Lorem ipsum <b>dolor</b> sit <em>amet</em>

Folder Structure for resource files

front end developer use different resources such as css, js, fonts, img etc and implement a folder structure for them. In Sitecore solution there may be many site that run from same solution and use the common resources for their. For example in js there some js files are commonly use of all site, common fonts may use for many sites, common css file may use for many sites, and some common images may use for different site in the same solution. One common structure should be use for storing these common resources and site specific resource may be store in the site specific folder structure.
Ex. –
/themes/common/css
/themes/common/fonts
/themes/common/img
/themes/common/js
/themes/group/css
/themes/group/fonts
/themes/group/img
/themes/group/js
/themes/markets/common/css
/themes/markets/common/fonts
/themes/markets/common/img
/themes/markets/common/js
/themes/markets/en-gb/css
/themes/markets/en-gb/fonts
/themes/markets/en-gb/img
/themes/markets/en-gb/js

Image folder structure

front end developer use some mockup images in html so Sitecore developer can get idea which size and kind of images will render in front-end. These mockup images will dynamic after Sitecore integration and these need to be delete. So images that will render through Sitecore should be place in deferent folder so it’s easy to remove in last or can add prefix to image name to identify easily.

HTML in blocks

Since we use Sublayouts for different section so for Sitecore html design it should be flexible to use it at different placeholder. For example if there any section is used as callout in the html then that callout should be as flexible so it can be place different area of page such as left side section or right side section. Also there should be a common global block section which should be compatible with other container block and placeholder.

Always try to use CSS pre-processor

always try to use css pre-processor such as LESS or SASS Instead of CSS. Because some time during Sitecore integration some html and style need to update this may also need to update css. In Css pre-processor css hierarchy is easy to understand and easy to update. Css pre-processor use different files for different sections so if there some design update of change is require the it’s easy to find the scope of the of css from different files and update in one file doesn’t impact to other html section. If CSS is delivered to the Sitecore integration team then don’t send minify css file.

JQuery should not be minify

As mention and above section for css, js fie should also need not to minify. And there should be a common js for one site in multi-site solution.

References –
Best Sitecore Practises for Front-End Developers by Mobeen Anwar
Sitecore Front-End Development Best Practices by Mark Ursino

Advertisements

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