Utility of Inline Styles

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);
">
/*
 * - CSS is very short
 *
 * - Specificity of an attribute selector
 *
 * - Order and priorities are in CSS
 */
<!-- Hover and other states! -->
<a style="
  --text-decoration: var(--at-hover, underline);
">
<!-- 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)
 */