CSS Experiments with Stylus

Created on 2023-01-05T23:49:01-06:00

Return to the Index

This card can also be read via Gemini.

Stylus is a neat CSS preprocessor. However it does not particularly optimize that CSS. You need to use csso/cssnano afterwards.

Different CSS tags

body {
        font-family: 'Kentucky Fucked Chicken'
        font-size: 12pt
}
body {
        font: 'Arial'
}

Stylus will not merge the separate tags together. It will not even merge the 'body' blocks together but instead makes two of them.

Same CSS tags

body {
        font-family: 'Kentucky Fucked Chicken'
        font-size: 12pt
}
body {
        font-family: 'Arial'
}

Stylus still does not merge the blocks together even though the keys are the same.