This article is intended to be a general guide on front-end development best practices for Sitecore solutions. There are a number of practices I’ve learned over the years that apply either because if the use of ASP.NET, or specifically because of how Sitecore operates. The best way to marry good front-end development with a Sitecore solution is for the front-end developer and Sitecore developer to communicate on the requirements. By knowing how pages will be built using modular Sitecore presentation components, a front-end developer can tailor HTML structure to meet the needs of content editors.

Use a `first` CSS Class Instead of a `last` CSS Class on Repeating Elements

When developing repeatable items, such as lists (e.g. ordered or unordered lists) or repetitive blocks (e.g. a consistently repeated set of divs), use a “first” class instead of a “last” class. This is because repetitive items can be developed in a Repeater (<asp:Repeater ...>) and its easier to see if you’re on the first item of a collection than the last item.

For example, say your repeater is bound to an IEnumerable<Item>. Applying the first class in the ItemDataBound method would be as simple as:

[sourcecode]
if(e.Item.ItemIndex == 0)
// code to add "first" class
[/sourcecode]

This could then yield:

[sourcecode]
<ul class="main-nav">
<li class="first">Home</li>
<li>Services</li>
<li>Products</li>
<li>Contact</li>
</ul>
[/sourcecode]

Doing the opposite with a “last” class would be more expensive because you’d need to determine the count of the collection which can be expensive and compare the current item to that:

[sourcecode]
if(e.Item.ItemIndex == dataSourceCollection.Count())
// code to add "last" class
[/sourcecode]

That code could yield something like:

[sourcecode]
<ul class="main-nav">
<li>Home</li>
<li>Services</li>
<li>Products</li>
<li class="last">Contact</li>
</ul>
[/sourcecode]

Use Classes Instead of IDs for CSS

Since ASP.NET controls use IDs, the rendered ID of an HTML element may get mangled by .NET’s Web Forms. For example, a Panel like this:
[sourcecode]
<asp:Panel ID="pnlLogin" runat="server">
Login form here
</asp:Panel>
[/sourcecode]

May get rendered to the front-end as something like this:
[sourcecode]
<div id="ctl00_pnlLogin">Login form here</div>
[/sourcecode]

Instead of writing CSS to rely on the ID, which could change, its better to use CSS classes, even for elements that only occur once. This will guarantee the CSS will always apply.

Keep jQuery in an Isolated Scope

Some of the older versions of Sitecore ship with the Prototype JavaScript library in the global scope of the DOM using the $ variable. If you use jQuery, you likely conflict with Sitecore’s use of Prototype when in Page Edit mode. To always ensure you’re not writing jQuery that can break Sitecore’s page edit ribbon, either wrap your code in a self-executing anonymous function like so:

[sourcecode]
(function($){ //
$(function(){
// the DOM is ready, do jQuery stuff
});
})(jQuery);
[/sourcecode]

Or at the very minimum, make your outer functions use the verbose jQuery function:

[sourcecode]
jQuery(function($){
// the DOM is ready, we can use $ in here now
})
[/sourcecode]

Develop HTML and CSS so Modular Components Can Be Moved Around on Pages

It’s important for front-end engineers to understand the modularity of Sitecore. Each individual component or block on the page should be self contained, meaning the CSS and JS should only scope to the structure of that component. This will allow CMS users to easily move components around without them breaking based on their location on the page.

For example, if you’re defining a basic CTA module that is re-usable, this CSS would be bad:

[css]
.two-column-layout .sidebar .cta-module .title
{
/* CSS here */
}
[/css]

The CSS is too specific and assumes the module is within a certain part of a layout. Instead, de-couple the component from the overall layout of where in the page it will be; make it more self-contained and stand-alone:

[css]
.cta-module .title
{
/* CSS here */
}
[/css]

There are front-end development frameworks available that can help with this scaffolding too, such as Twitter’s Bootstrap.

Avoid Additional HTML in <p> Tags

Sitecore’s Rich Text Field renders paragraphs automatically in <p> tags. Try to not develop HTML that expects a specific structure within a <p> tag. For example, this is probably going to be hard for content editors unless you define Rich Text Editor snippets:

[sourcecode]

Lorem <span class="someClass">ipsum</span> dolor sit amet

[/sourcecode]

On the other hand, the following example is fine because these are generic tags that the rich text editor will expose anyway:

[sourcecode]

Lorem ipsum <strong>doler</strong> sit <em>amet</em>.

[/sourcecode]

The first approach is possible, however it requires additional configuration work on a developer to expose the extra class in the rich text editor.

Avoid Front-Loading HTML for AJAX Functionality if Possible

Sometimes when AJAX-like functionality is desired, there may be an inclination to front-load all of the content on the page, then hide content until it is needed. This can work in some cases, but its important to understand how the content may scale. You may have a small amount of content at first, so it will render fine, but as editors build up more content, this could really slow down the page loads on the front-end and cause flickers. Instead, its important for front-end and Sitecore developers to communicate an approach. For example, Sitecore can easily deliver content to JavaScript in various forms:

• A Web Service (custom ASMX)
• An AJAX-like presentation device, e.g. ajax=1
• A Web Form (custom ASPX; non-layout)
• An HTTP handler (custom ASHX)

The important part is to consider how content in Sitecore will scale and be delivered to the front-end, hopefully in batches.

Your Best Practices?

Do you have any front-end development best practices that I didn’t list? Of course you do! For any Sitecore developers out there, what other things have you noticed that make development much easier for you on the front-end? Leave your ideas in the comments below.