nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

CSS Versioning

MRock

We have a large website with over 1000 pages. We utilize a global CSS file to control styles for some elements that are common to all of the pages. We want to be able to update the global CSS file name without having to redeploy all of the pages. So, setting the CSS file through the site's properties will not work for us. So, we were going to setup a component that accesses a DCR that would include an HTML tag that points to the global CSS file. Then, when we need to update the CSS file, we could just update the name of the CSS file in the DCR and all of the pages would pickup the new CSS file. Is there a better way to do this? Does anyone else do this and if so, can you give me some sample code?

Find more posts tagged with

Comments

Rick Poulin

We utilize a global CSS file to control styles for some elements that are common to all of the pages. We want to be able to update the global CSS file name without having to redeploy all of the pages.

Wait, what?? Why are you changing the name of the file? If, for whatever reason, you need to have a flat filesystem "versioning" of past files, you can name those whatever you want.. but your "active" version should always keep the same name, and then your problem goes away.

tbkeith

I am doing something similar.

I have a very basic component that includes a DCR that is just a textarea.

The contents of this are the link to the CSS file.

We dont change the file name as such but do add a parameter to the end for cache busting purposes.

Brett Sargeant

You can put an include file in the head section of the page, and have the call to the stylesheets (and any other scripts) in the include file. That way you only have to change the link within the include file, publish it out and it will apply to the entire site. Note you will need to have server side includes enabled on your site. e.g.

page content:
<html>

<head>

</head>

<body>

</body>

</html>

head_code.htm
<link rel="stylesheet" href="/includes/stylesheet.css" />
<script src="/includes/scripts.js" type="text/javascript"></script>