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.
// 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
- For a whole slew of reasons processing my level is adventagous
- The cheif benifit is there is little to no need to heed the order of any feature, you can go willy nilly and ctr will take care of you
- Media query specifity is ensured and quene last to help you sleep at night
- While it may seem a bit unintuitive to process the
ctrinstance the Object scope you just have to have a little fath and trust me on that it’s in your best intrest
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.
// 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
- Rule of thumb, don’t use the
'order'mode unless know why and how to use it properly, and even then, I recommend you use it on an individual instance basis - At face value value the
'order'mode may seem more intuitive or even correct compared to that of'level', but it’s not, and spent a signifigant amount of time so that you didn’t have to dink around with proper “ording” - A finial parting comparision;
'order'is like SkiFree and if you’re not carefull the yeti will gobble you up
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.
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
- Possible sort values
'len'ascending length sort order: a.k.a — shortest first'-len'descending length sort order: a.k.a — longest first'abc'ascending alphabetical order: a.k.a —acomes first'-abc'descending alphabetical order: a.k.a —zcomes first andibeforeefalsePreserve sort order: a.k.a — don’t sort
- The reason the sort order is by length is that it makes testing easier, it’s prettier, it makes you look kooler, plus my brain finds it easier