Print Shortlink

Managing CSS files using Require JS – I

In an earlier post on RequireJS we discussed optimized loading of JavaScript files. Let’s discuss optimized loading of CSS files using RequireJS in this post.

In this example, we’ll have index.html file that uses dev.css file. dev.css file uses two other style sheets style1.css and style2.css. The contents of the files are shown below.

//index.html
<html>
	<head>
	<link rel='stylesheet' href='resources/dev.css'>		
	</head>
	<body>
		<h1 id="msg1">Require JS app</h1>
		<h2 id="msg2">Optimizing CSS files</h2>
	</body>
</html>

//dev.css
@import url("style1.css");
@import url("style2.css");

//style1.css
#msg1{
	color : red;
}

//style2.css
#msg1{
	color : red;
}

The CSS files style1.css and style2.css have basic styling rules that are applied to index.html. On loading index.html file, the browser sends four requests to the server for loading index.html and the three CSS files. The network section in chrome browser is shown below.

In the next post, let’s discuss optimizing the loading of CSS files, so that the browser doesn’t send individual requests to load the CSS files.

Page 1 of 1

One Response

  1. Managing CSS files using RequireJS – II

    […] JS – II By Prabhu Sunderaraman on January 10, 2013 in JavaScript, RequireJS In the earlier post we created a file (index.html) that uses a stylesheet dev.css. dev.css internally refers to two […]

Leave a Reply