Explicit build/serialization order for source CSS files required?

[Bart76]

Hello,

As a software developer, I am interested in using Cirrus within my company's internal projects and perhaps I might even contribute a few things in the near future. Even after intensively applying CSS in webdevelopment projects during the last two years, I still do not consider myself a CSS pro. I always like to learn new stuff and after all this time, CSS still keeps surprising me quite often.

During my first inspections of the Cirrus source code, I noticed a few noteworthy things, which I will attempt to address to you in the near future (if you don't mind). One of those things is the order in which the CSS files are serialized into the resulting "cirrus.css" output file. It seems that this ordering is alphabetical by file name.

As I have experienced in the past, the order in which CSS rules are defined is important regarding their related behavior. For example, look at the following sample code:

<style id="base-styling">
  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    position: relative;
  }

  html, body {
    height: 100%;
  }
</style>

<style id="theme-styling">
  .first,
  .first * {
    background: red;
    border: 5px solid darkred;
  }

  .second,
  .second * {
    background: green;
    border: 5px solid darkgreen;
  }
</style>

<style id="initial-styling">
  div {
    width: 100%;
    height: 100%;
    padding: 20px;
  }

  .first {
    margin: 50px;
    width: 400px;
    height: 400px;
  }
</style>

<div class="first">
  <div class="second">
    <div class="third">
    </div>
  </div>
</div>

This code will render three nested squares. As it is now, the first (outer) square will be colored red and the second (middle) and third (innermost) squares will be colored green.

If the two CSS rules in the #theme-style element are switched, like this:...

<style id="theme-styling">
  .second,
  .second * {
    background: green;
    border: 5px solid darkgreen;
  }

  .first,
  .first * {
    background: red;
    border: 5px solid darkred;
  }
</style>

...the resulting CSS styling behavior will change dramatically: all three rectangles will now be colored red!

So, since the order of the defined CSS rules seems to be quite important to the resulting styling behavior, might it be useful to investigate the current deployment strategy in some more detail and specify an explicit build order of the various CSS source files (if it turns out to be necessary to do so)?

[Spiderpig86]

Hi,

Thanks for the input. The main part of the build file that handles build order is here. There used to be a specific order that was set, but I believe I removed it seeing no adverse effects in terms of ordering. This definitely needs to be investigated further if possible. Definitely I know that the default.css and theme.css should come before all else.

[Spiderpig86]

The order in which different stylesheets are built is defined in all files defined in the builds directory here with 0.7.0. Closing this issue.