Roman Komarov
/*
* Utility of Inline Styles
* (with custom properties)
*/
/*
* Inpired by “Utility” or “Atomic” CSS
* (and JSX “props”)
* Must-read:
* “In Defense of Utility-First CSS”
* by Sarah Dayan
*
* Examples: Tailwind, Tachyons, etc.
*/
/*
* > “Might as well use inline styles”
*
* > This way of styling
* > is unanimously considered
* > a bad practice
*/
.Browser:not(#IE)::after {
content: "Only modern browsers" !important;
}
[style*='--experimental:']::before {
content: "Potential performance issues";
}
<p style="
--margin-top: var(--size-small);
">
[style*='--margin-top:'] {
margin-top: var(--margin-top);
}
/*
* - CSS is very short
*
* - Specificity of an attribute selector
*
* - Order and priorities are in CSS
*/
<!-- Media queries! -->
<aside style="
--float: var(--at-above-medium, right);
--padding: var(--above-medium, 2em);
--below-medium: 1em;
">
[style*='--below-medium:'] {
--above-medium: initial;
}
@media (min-width: 768px) {
[style*='--below-medium:'] {
--above-medium: var(--below-medium);
}
}
/* More: “Conditions for CSS Variables” by me,
*
* as well as articles by Ana Tudor:
*
* “DRY State Switching With CSS Variables:
* Part 1: The Difference of One Declaration
* Part 2: Fallbacks and Invalid Values”
*
* && “Logical Operations with CSS Variables”.
*/
/*
* Finally:
*
* - ⚠️ browser support and performance ⚠️
*
* - Future could make things better:
* - Houdini — inheritance, initial values
* - attr(data-dog length) ?
* - …native conditions? T_T
*/
/*
* Thanks!
* Experiment responsibly.
*
* These slides: kizu.dev/inline
* (with links)
*/