Different ways of Handling CSS and JavaScript in WCM

We can handle CSS and JavaScript in WCM in following three different approaches.

Approach 1: Storing the CSS as Style Sheet Component and JavaScript as File Resource Components

Note:  You can upload the JavaScript file into WCM as the File Resource Component and refer that in presentation template as below

<script  language="javascript" src="<Component name="library/test-javascript-cmpnt" format="url"/>" />

Pros:
1. Out of box component

Cons:
1. Authors can't modify the CSS in the authoring interface when they have to make changes.
2. You can not refer the File Resource components(like images) stored in WCM like below

table{  
     background-image: url(<Component name="bckImage" format="url"/>); 
}

3. Need to place CSS and JavaScript on somewhere for future changes(outside of WCM).


Approach 2: Storing CSS and Javascript as HTML Components
Store CSS styles as HTML components and then embedded those components in presentation templates inside of <style> blocks. (Same for the javascript also)

Pros:
1.Authors can modify CSS classes inside the WCM authoring.
2.Additional request to load the CSS files is not required (fewer HTTP requests generates from page)

Cons:

1. Here CSS files are rendering from WCM, Can't take the advantage of browser caching
2. Response size and time may increase as Styles are coming from the JCR.

Approach 3: Storing CSS and Javascript as Content Item under some SiteArea

Steps to implementing CSS as a content item -
a). Create a authoring template with a single Body HTML element,
b). Create a presentation template that just refer Body element (you may not use Ephox RTE element because it includes <P> tags , causing CSS Styles failed )
c). Name ContentItem as *.css ("test.css").
d). You can add the above contentItem from other presentation templates as CSS or Javascript . Make sure to append "?subtype=css" to path of content item while referring in other Presentation templates to force WCM content to be rendered with text/css as MIME type instead of text/html (default MIME type for WCM content is text/html or text/plain).
Ex:
<link rel="StyleSheet" href="/wps/wcm/myconnect/library/Site/SiteArea/test.css?subtype=css" type="text/css"/>



Following are the advantages if you naming the ContentItem as *.css
a)  When site is pre rendered for delivering content, content items stored as *.css will generate files valid CSS file to pre render
b)  Even when content served through the WCM servlet , this allows the browser to cache the CSS file

Pros:
1.Authors can modify CSS classes inside the WCM authoring portlet with normal workflow process
2.Additional request to load the CSS files is not required (fewer HTTP requests generates from page)

Cons
1. Make sure this content item (css) doesn't pick up by some navigators or menu components as it is content item


Note:
a). In Second and Third approach approach , your CSS styles or javascript can refer File Resource Components(like for background images) that stored in WCM repository as components by simply using the Component Tag as below

body{
   background-image: url(<Component name="bckImage" format="url"/>);
}

b). "subtype" query string parameter only applies to the default content renderer and will not work on URLs which is used to invoke the component renderer (i.e. which contain srv=cmpnt in the query string parameter).

c). You may need to add an extension mapping for CSS to WcmConfigService.properties in older versions. Following are steps to do this.

1. Search for the line "#mapping of mimetypes to extensions" in wcmconfigservices.properties file located under <Portal_root>\wcm\shared\app\config\wcmservices\ directory.
   
2. There is an attribute named "mimetype.list=extensiontype.gif". Add ",extensiontype.css" (no spaces, include the dot ( . ) character at the front of the string) at the end of the line.
   
3. Add a new line "extensiontype.css=text/css" (no spaces) after the "extensiontype.lzh=application/octet-stream"
   
4. Save the file.
   
5. Restart WebSphere Portal Server (WPS).