Changing the CQ5 generated div tag around components

Question

We are going to use CQ5 as a content platform to be consumed by another service which is the end-point for our users. As in we will be providing HTML for small sections of the front facing websites.
To alleviate any issues that might come up from this integration, we are going to add a prefix to all our CSS classes, ids, and put all our JavaScript in namespaces. The problem is the cq:include tag creates a <div> element around the component's JSP code and then adds the component name, super types, and JCR node title as CSS classes for this div. For example:
<div class="parbase image tout-image">
    <img src="..." class="prefix-our-image" />
</div>
<div class="subtitle tout-subtitle">
    <div class="prefix-our-subtitle-div prefix-subtitle">
        <h2>Header Subtitle</h2>
    </div>
</div>
Is there any way we can change the default behavior of CQ5 to prefix the css classes and IDs? At least in non-edit mode as to not break the author experience as seen by setting cq:noDecoration to true. We tried cq:cellName but didn't see that changing anything. We are using CQ5.4.

Answer 1

Hi Shelly,
I applied your suggestion to my jsp. But it still doesn't work. I added cq:noDecoration=true & added foll. lines of code to my jsp. It dosn't let me edit the component in edit mode.
%@page import="com.day.cq.wcm.api.components.IncludeOptions"%>
<%@page import="com.day.cq.wcm.api.WCMMode"%>
<%-- Set Vars --%>
<c:set var="titleLines" value="<%= properties.get("./titleLines", String[].class) %>" />
<c:if test="${empty titleLines}">
    <%-- Use page title if no title lines have been set --%>
    <c:set var="titleLines" value="<%= new String[]{resourcePage.getTitle()} %>" />
</c:if>
<%-- Component Markup --%>
<c:if test="${not empty titleLines}">
<header class="${componentName}-component ${componentName}-header ${fn:trim(compClassId)} page-header">
    <h1 class="${componentName}-headline page-title">
        <c:forEach var="title" varStatus="loop" items="${titleLines}">
            <c:if test="${not empty title}">
            <span class="${componentName}-line ${componentName}-line-${loop.count}  ${namespace}line${loop.count}">${fn:escapeXml(title)}</span>
            </c:if>
        </c:forEach>
    </h1>
</header>
</c:if>
<c:if test="${isEditMode}">
    ${editComponentTitleLabel}
    <c:if test="${empty titleLines}">
        ${fn:replace(editComponentErrorLabel, "{0}", "Please specify a title")}
    </c:if>
</c:if>
<%
if (WCMMode.fromRequest(request) != WCMMode.EDIT && WCMMode.fromRequest(request) != WCMMode.DESIGN) {
     IncludeOptions.getOptions(request, true).forceSameContext(Boolean.TRUE);
%>