Why this matters for us “Clipper Heads”
We’re used to the fact that the Clipper preprocessor hid an incredible amount of code from us application developers.
Seeing every little detail “raw” in CSS can feel overwhelming.
With a simple alias, I can trick myself back into that feeling – compact code, clear context, clean result.
Preprocessor alias for the qualified selector
Sometimes it’s the small ideas that clean up the code.
I built myself an alias for qualified selectors – and suddenly CSS feels as straightforward as Clipper once did.
The benefits at a glance
Context-based thinking: I’m “in the module” → everything automatically applies there.
Shorter code: No more endless typing, one alias is enough.
Fewer mistakes: The prefix is set automatically, no need to think whether it’s footer.app-footer or .app-footer.
Semantically close to the markup: Footer, Sheet, Datebar, Programs … styles directly mirror the structure.
Portable: If I move the markup, I only change quali – not all the selectors.
Here’s the code
&-> STYLES_FOOTER : quali = footer
Block STYLES_FOOTER
|quali|.app-footer{ … }
|quali|.app-footer nav.bottom{ … }
|quali|.app-footer .tabs{ … }
My brain now only reads:
“I’m in the module → so automatically add the prefix in front of all my class rules.”
Result after patching
footer.app-footer{ … }
footer.app-footer nav.bottom{ … }
footer.app-footer .tabs{ … }
In short
|quali| is an alias for context.
I know: “quali is always the element I’m currently working in.”
This way I write more readable code, stay close to the markup, and still end up with pure, clean CSS.