How to manage CSS in ModX, changes to css in filesystem have no effect, clearing cache doesn't work

Question

I am having monumental difficulty using ModX. It's great if you just upload everything once and forget out about it, but making changes to a CSS file that isn't a resource seems to be an absolute nightmare. If the CSS is loaded from a file and cached inside ModX, getting rid of that seems impossible. There is no documentation on this and I have seen a few threads about managing CSS via docs, which I want to try but I can't get a clean slate to start again.

EDIT: links to threads

I have tried clearing the cache, deleting the cache folder, deleting the css files and then deleting and clearing the cache (which I then tested to see if the css had in fact been dropped but nope, still loads even though it's non-existent from where I can see)

My question is this: what is going on here? How come I can't clear the cache properly? Is this a bug? Am I missing something fundamental to ModX? How do I start again without re-installing ModX? Should I put CSS in a document or a snippet?

No, I don't want to use Sass or cssSweet. Just raw boring normal CSS, please. I'm not building the next Facebook, just want to use this for easy back-end deployment and content management for clients.

My header is a chunk named 'header', as follows. (NOTE: the CSS is found, no issues with initial loading. I have since completely deleted the CSS file, cleared the cache and deleted the cache folder, CSS still loads somehow)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="width">

<title></title>

<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<link title="timeline-styles" rel="stylesheet" href="assets/timeline/css/timeline.css">
<link rel="stylesheet" href="assets/lightbox/dist/css/lightbox.css">

<link rel="stylesheet" href="assets/fonts/Southampton.ttf">
<link rel="stylesheet" href="assets/css/style.css">

</head>
<body id="section-body">

My main page is a template, as follows:

[[$header]]
[[$navbar]]

<div class="container">

  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <section id="section-banner" class="parallax">
        <img id="welcome-banner-words" src="images/web_ready/welcome_banner_words.png" class="w-100" alt="">
      </section>
    </div>
  </div>

  <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <section id="section-timeline" class="w-100 h-100">
        [[$timeline]]  
      </section>
    </div>
  </div>

 <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div id="section-gallery-start" class="divider"></div>       
      <section id="section-gallery" class="w-100">
        <header id="header-gallery">Party Photos!!!</header>
        <hr class="horizontal-row-style">
        <p class="para-gallery">
Please return to this section after the party to see the photos</p>
        <!--[[$gallery]]--> 
      </section>
    </div>
  </div>

 <div class="row">
    <div class="col-lg-12 col-md-12 col-sm-12">
      <div id="section-special-start" class="divider"></div>       
      <section id="section-special" class="w-100">
       <section id="section-special-intro-blurb" class="w-100 h-100">
         <header id="header-special-intro-blurb">Special Thanks</header>
         <hr class="horizontal-row-style">
         <p class="para-special-intro-blurb">
</p>
      <hr class="horizontal-row-style">
      <p class="para-special-intro-blurb">
</p>
<p class="para-special-intro-blurb">Marnie Nana and Grandma Broome</p>
<p class="para-special-intro-blurb"></p>
      </section>
      [[$special_thanks]]
      </section>
    </div>
  </div>

</div>

[[$footer]]

score 1 · Answer 1 · answered Jun 10 '19 at 10:16

1

Mate hope is not late, a simple solution is use MinifyX to process and compress your css, every time you clear the cache it creates a new compressed file with a new name, that means there is no way to save your css path in memory. Cheers.

answered Jun 10 '19 at 10:16

ysanmiguel

451
1
4
20

score 1 · Answer 2 · answered Sep 27 '20 at 20:03

When dealing with a browser's cache you can't be certain your viewers are getting the most recent copy of the files that make up the page they're looking at. So by appending a GET value to, for example, a cascading stylesheet, you can make the browser think the stylesheet is dynamic, thus reloading the file every time the modification date changes.

Below is a solution I came up with to combat this little annoyance.

lastModified MODx Extra

It's a snippet I created which you may download via the package manager. Basically, it adds a UNIX timestamp to the end of the path to your file you do not want cached.

score 0 · Answer 3 · answered Mar 10 '19 at 06:46

I commented out the link to the stylesheet and then saved my header chunk, cleared the cache and then saved the chunk again. This seems to have worked.

However, this is very hacky.

To my other related issue:

Having experimented with a few things, I have found the easiest way to implement CSS is to put it in a chunk called 'css_stylesheet', ensuring that the "Clear Cache on Save" checkbox is checked (which it is by default) so we can play with with code in a live setting if there are bugs, and then reference the chunk in style tags on the header chunk like so:

<style>
    [[$css_stylesheet]]
</style>

I guess this is ok, in general it's considered best practice to avoid nesting chunks too much, but it is only one level deep and we do use the same syntax when swapping out php includes so this is fine. It's fine.

Although it would be nice if this consideration were made more obvious in the docs. There should be some notes on translating a site from a php base to ModX, which should highlight the types of documents that should be included as static resources (i.e. bootstrap, jquery etc) and which should be as chunks (custom css, custom js etc)

score 0 · Answer 4 · answered Jun 04 '19 at 16:00

0

One other way to break cache would be to add a variable after the css url.

<link rel="stylesheet" href="assets/css/style.css?v1">

You'd have to change the value each time you saved the file, its not sustainable, but it should break css cache so you can see your work.

Really though, you shouldn't need to do anything other than clear your browser cache. I know that some browsers REALLY like to hold onto cache though.

answered Jun 04 '19 at 16:00

Jamison Mergens

37
7

I was referring to ModX' internal server cache. Clearing the browser's cache will have zero effect. – BitShift Jun 04 '19 at 23:22
What I'm saying is, sometimes even though you've updated a file, the browser will keep the old version in cache. I've seen it a number of times. One other idea would be to turn MODX caching OFF. – Jamison Mergens Jun 06 '19 at 17:25

How to manage CSS in ModX, changes to css in filesystem have no effect, clearing cache doesn't work

4 Answers4