Info

The key word in Cascading Style Sheets (CSS) is cascade, and it’s one of the most important, powerful, and confusing concepts to grasp. To summarize, “cascading” allows CSS declaration blocks to combine and resolve conflicting property values with other declaration blocks and style sheets. A deep dive into cascading is outside the scope of this documentation, but understanding the concept of cascading is of the utmost importance. I can not stress this enough, if you don’t understand CSS cascading, you’re going to have a bad time, and I want you to have a good time. From this point on I will assume you’re familiar and versed in the wizardry of cascading.

Let me first start off by telling you that I recommend you not alter the process order of ctr unless you have to. I’ve intentionally configured ctr in a way to make it hard, but not impossible to shoot yourself in the foot. Nonetheless, once you change the processing order all bets are off, and it’s up to you to navigate the treachery of Cascade Mountain.

ps. Cascade Mountain is better defined as a hill, not a mountain, nor does it have any connection to CSS except for the fact that it has cascade in the name, and more importantly, it’s where yours truly learned how to ski.

processBy Level

Description: The default processBy order is by level to process the ctr instance by the Object scrope level or in other words how deep the style is nested within the instance itself. That is to say, the ctr instance is processed in a Object scope fashion that proceduce selectors whose selectivity is cascading by nature.

Edit
// processBy: level (default)
// The numbers represent the order,
// in which the style is complied
ctr('.test', {
// 1
width: 111px
// 2
comp-div: {
width: 222px
// 4
comp-p: {
width: 333px
// 7
media--lg: {
width: 444px
}
}
}
medias: {
// 5
'-sm': {
width: 11px
// 8
before: {
content: 'cool'
}
}
// 6
'-md': {
width: 22px
}
}
// 3
hover-on: {
color: red
}
})
# processBy: level (default)
# The numbers represent the order,
# in which the style is complied
.test:
# 1
width: 111px
# 2
comp-div:
width: 222px
# 4
comp-p:
width: 333px
# 7
media--lg:
width: 444px
medias:
# 5
-sm:
width: 11px
# 8
before:
content: cool
# 6
-md:
width: 22px
# 3
hover-on:
color: red
.test {
width: 111px;
}
.test > div {
width: 222px;
}
.test:hover {
color: #f00;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test > div > p {
width: 333px;
}
@media (max-width: 600px) {
.test {
width: 11px;
}
}
@media (max-width: 800px) {
.test {
width: 22px;
}
}
@media (max-width: 1050px) {
.test > div > p {
width: 444px;
}
}
@media (max-width: 600px) {
.test::before {
content: "cool";
}
}
// processBy: level (default)
// The numbers represent the order,
// in which the style is complied
ctr('.test', {
  // 1
  width: 111px
  // 2
  comp-div: {
    width: 222px
    // 4
    comp-p: {
      width: 333px
      // 7
      media--lg: {
        width: 444px
      }
    }
  }
  medias: {
    // 5
    '-sm': {
      width: 11px
      // 8
      before: {
        content: 'cool'
      }
    }
    // 6
    '-md': {
      width: 22px
    }
  }
  // 3
  hover-on: {
    color: red
  }
})
.test {
  width: 111px;
}
.test > div {
  width: 222px;
}
.test:hover {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
.test > div > p {
  width: 333px;
}
@media (max-width: 600px) {
  .test {
    width: 11px;
  }
}
@media (max-width: 800px) {
  .test {
    width: 22px;
  }
}
@media (max-width: 1050px) {
  .test > div > p {
    width: 444px;
  }
}
@media (max-width: 600px) {
  .test::before {
    content: "cool";
  }
}
# processBy: level (default)
# The numbers represent the order,
# in which the style is complied
.test:
  # 1
  width: 111px
  # 2
  comp-div:
    width: 222px
    # 4
    comp-p:
      width: 333px
      # 7
      media--lg:
        width: 444px
  medias:
    # 5
    -sm:
      width: 11px
      # 8
      before:
        content: cool
    # 6
    -md:
      width: 22px
  # 3
  hover-on:
    color: red

Notes

processBy Order

Description: The String value of 'order' for the global processBy option property, processes the ctr instance recersivly in “order” through a first come first process basis. That is to say it prcess the ctr instance and all it’s features in a linear fashion from top to bottom. However, employing the 'order' processBy mode is be analogous to purchasing a gun without having an inkling of how to opperate the it besides that of Hollywood action scenes. On the other hand, the converse also holds true, and the 'order' mode grants unbridled control.

Edit
// processBy: order
// The numbers represent the order,
// in which the style is complied
ctr('.test', {
option: {
global: {
processBy: 'order'
}
}
// 1
width: 111px
// 2
comp-div: {
width: 222px
// 3
comp-p: {
width: 333px
// 4
media--lg: {
width: 444px
}
}
}
medias: {
// 5
'-sm': {
width: 11px
// 6
before: {
content: 'cool'
}
}
// 7
'-md': {
width: 22px
}
}
// 8
hover-on: {
color: red
}
})
# processBy: order
# The numbers represent the order,
# in which the style is complied
.test:
option:
global:
processBy: order
# 1
width: 111px
# 2
comp-div:
width: 222px
# 3
comp-p:
width: 333px
# 4
media--lg:
width: 444px
medias:
# 5
-sm:
width: 11px
# 6
before:
content: cool
# 7
-md:
width: 22px
# 8
hover-on:
color: red
.test {
width: 111px;
}
.test > div {
width: 222px;
}
.test > div > p {
width: 333px;
}
@media (max-width: 1050px) {
.test > div > p {
width: 444px;
}
}
@media (max-width: 600px) {
.test {
width: 11px;
}
}
@media (max-width: 600px) {
.test::before {
content: "cool";
}
}
@media (max-width: 800px) {
.test {
width: 22px;
}
}
.test:hover {
color: #f00;
transition-delay: 0s;
transition-duration: 0.5s;
transition-property: color;
transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
// processBy: order
// The numbers represent the order,
// in which the style is complied
ctr('.test', {
  option: {
    global: {
      processBy: 'order'
    }
  }
  // 1
  width: 111px
  // 2
  comp-div: {
    width: 222px
    // 3
    comp-p: {
      width: 333px
      // 4
      media--lg: {
        width: 444px
      }
    }
  }
  medias: {
    // 5
    '-sm': {
      width: 11px
      // 6
      before: {
        content: 'cool'
      }
    }
    // 7
    '-md': {
      width: 22px
    }
  }
  // 8
  hover-on: {
    color: red
  }
})
.test {
  width: 111px;
}
.test > div {
  width: 222px;
}
.test > div > p {
  width: 333px;
}
@media (max-width: 1050px) {
  .test > div > p {
    width: 444px;
  }
}
@media (max-width: 600px) {
  .test {
    width: 11px;
  }
}
@media (max-width: 600px) {
  .test::before {
    content: "cool";
  }
}
@media (max-width: 800px) {
  .test {
    width: 22px;
  }
}
.test:hover {
  color: #f00;
  transition-delay: 0s;
  transition-duration: 0.5s;
  transition-property: color;
  transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
}
# processBy: order
# The numbers represent the order,
# in which the style is complied
.test:
  option:
    global:
      processBy: order
  # 1
  width: 111px
  # 2
  comp-div:
    width: 222px
    # 3
    comp-p:
      width: 333px
      # 4
      media--lg:
        width: 444px
  medias:
    # 5
    -sm:
      width: 11px
      # 6
      before:
        content: cool
    # 7
    -md:
      width: 22px
  # 8
  hover-on:
    color: red

Notes

Sort Order

Description: By default the sort order for the compiled ctr CSS is by length; however, this could prove to be problematic. So it is worth mentioning early on that the sort order can easily be changed via the global sort option property in the Global Option (ctrSetOption), .ctrrc.yml, or on an individual ctr instance basis.

Edit
ctr('.test', {
option: {
global: {
// Preserve sort order
sort: false
}
}
font-size: 1em
color: red
border-radius: 10px
background-position-x: center
background-repeat-x: no-repeat
overflow: hidden
width: 100vw
})
.test:
option:
global:
# Preserve sort order
sort: false
font-size: 1em
color: red
border-radius: 10px
background-position-x: center
background-repeat-x: no-repeat
overflow: hidden
width: 100vw
.test {
font-size: 1em;
color: #f00;
border-radius: 10px;
background-position-x: center;
background-repeat-x: no-repeat;
overflow: hidden;
width: 100vw;
}
ctr('.test', {
  option: {
    global: {
      // Preserve sort order
      sort: false
    }
  }
  font-size: 1em
  color: red
  border-radius: 10px
  background-position-x: center
  background-repeat-x: no-repeat
  overflow: hidden
  width: 100vw
})
.test {
  font-size: 1em;
  color: #f00;
  border-radius: 10px;
  background-position-x: center;
  background-repeat-x: no-repeat;
  overflow: hidden;
  width: 100vw;
}
.test:
  option:
    global:
      # Preserve sort order
      sort: false
  font-size: 1em
  color: red
  border-radius: 10px
  background-position-x: center
  background-repeat-x: no-repeat
  overflow: hidden
  width: 100vw

Notes