Allow end-user styling overrides

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Allow end-user styling overrides - DEV Community</title> <meta name="last-updated" content="2024-12-04 01:58:40 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1733277520"> <meta name="environment" content="production"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="main-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="main-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="main-crayons-stylesheet" /> <script src="https://assets.dev.to/assets/base-e0fa4f0ebd0f1ec157e6b07c08f9222f8c0cca3d10cfde4cd8c951b43985b10b.js" defer="defer"></script> <script src="https://assets.dev.to/assets/application-147cebefc5c4cddde055e8f5eb0055e811469b08405170e2411fbd7944b5ac04.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseInitializers-bc498cfd7bb7d2a2da59d68d0b2055cc2dd26fee3669ab88edbb396d37bc3369.js" defer="defer"></script> <script src="https://assets.dev.to/assets/baseTracking-b6bf73e5ee66633e151e7d5b7c6bbccedfa4c59e3615be97b98c4c0f543ddae7.js" defer="defer"></script> <meta name="search-script" content="https://assets.dev.to/assets/Search-cc5e8a352578866203771def747f37c3ec6a0869de0458328e0fcba3d5d2fceb.js"> <link rel="canonical" href="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467" /> <meta name="description" content="While there are different ways of adding CSS into your documents, some types should be avoided to allow for some end-user customization. Tagged with a11y, css."> <meta name="keywords" content="a11y, css, software, coding, development, engineering, inclusive, community"> <meta property="og:type" content="article" /> <meta property="og:url" content="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467" /> <meta property="og:title" content="Allow end-user styling overrides" /> <meta property="og:description" content="While there are different ways of adding CSS into your documents, some types should be avoided to allow for some end-user customization." /> <meta property="og:site_name" content="DEV Community" /> <meta name="twitter:site" content="@thepracticaldev"> <meta name="twitter:creator" content="@alvaro_montoro"> <meta name="twitter:title" content="Allow end-user styling overrides"> <meta name="twitter:description" content="While there are different ways of adding CSS into your documents, some types should be avoided to allow for some end-user customization."> <meta name="twitter:card" content="summary_large_image"> <meta name="twitter:widgets:new-embed-design" content="on"> <meta name="robots" content="max-snippet:-1, max-image-preview:large, max-video-preview:-1"> <meta property="og:image" content="https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png" /> <meta name="twitter:image:src" content="https://media2.dev.to/dynamic/image/width=1000,height=500,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png"> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> <link rel="icon" type="image/x-icon" href="https://media2.dev.to/dynamic/image/width=32,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <link rel="apple-touch-icon" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="152x152" href="https://media2.dev.to/dynamic/image/width=152,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="180x180" href="https://media2.dev.to/dynamic/image/width=180,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link rel="apple-touch-icon" sizes="167x167" href="https://media2.dev.to/dynamic/image/width=167,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png"> <link href="https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="192x192" /> <link href="https://media2.dev.to/dynamic/image/width=128,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" rel="icon" sizes="128x128" /> <meta name="apple-mobile-web-app-title" content="dev.to"> <meta name="application-name" content="dev.to"> <meta name="theme-color" content="#ffffff" media="(prefers-color-scheme: light)"> <meta name="theme-color" content="#000000" media="(prefers-color-scheme: dark)"> <link rel="search" href="https://dev.to/open-search.xml" type="application/opensearchdescription+xml" title="DEV Community" /> <meta property="forem:name" content="DEV Community" /> <meta property="forem:logo" content="https://media2.dev.to/dynamic/image/width=512,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" /> <meta property="forem:domain" content="dev.to" /> </head> <body class="sans-serif-article-body default-header" data-user-status="logged-out" data-community-name="DEV Community" data-subscription-icon="https://assets.dev.to/assets/subscription-icon-805dfa7ac7dd660f07ed8d654877270825b07a92a03841aa99a1093bd00431b2.png" data-locale="en" data-honeybadger-key="hbp_nqu4Y66HuEKlD6YRGssZuRQnPOjDm50J8Zkr" data-deployed-at="2024-11-28T14:26:33Z" data-latest-commit-id="4b49fb8266fd9b978bc78cbd8ffc1340c5bd5a1c" data-ga-tracking="UA-71991109-1" data-cookie-banner-user-context="logged_out_only" data-cookie-banner-platform-context="off" data-algolia-id="PRSOBFP46H" data-algolia-search-key="9aa7d31610cba78851c9b1f63776a9dd" data-algolia-display="true" data-ga4-tracking-id="G-TYEM8Y3JN3"> <link rel="stylesheet" href="https://assets.dev.to/assets/minimal-6206ee9219dabd8e1168cebeb1f34c12ab133f7723e45d4b24dd76b43fee1fbc.css" media="all" id="secondary-minimal-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/views-4dd5770daa5d9d443ed73a724fb1913af9b093295bf1a72307f0fb322e5df1d9.css" media="all" id="secondary-views-stylesheet" /> <link rel="stylesheet" href="https://assets.dev.to/assets/crayons-f94476cf86ce9153627fd53a77e651ec54b82b6be20ddb1bf93e3dd40b81aeab.css" media="all" id="secondary-crayons-stylesheet" /> <div id="body-styles"> <style> :root { --accent-brand-lighter-rgb: 80, 99, 301; --accent-brand-rgb: 59, 73, 223; --accent-brand-darker-rgb: 47, 58, 178; } </style> </div> <div id="audiocontent" data-podcast=""> </div> <div class="navigation-progress" id="navigation-progress"></div> <header id="topbar" class="crayons-header topbar print-hidden"> <span id="route-change-target" tabindex="-1"></span> <a href="#main-content" class="skip-content-link">Skip to content</a> <div class="crayons-header__container"> <span class="inline-block m:hidden "> <button class="c-btn c-btn--icon-alone js-hamburger-trigger mx-2"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ad8y7dyee1a7fuyedqspc2g256rwjyn0" class="crayons-icon"><title id="ad8y7dyee1a7fuyedqspc2g256rwjyn0">Navigation menu</title> <path d="M3 4h18v2H3V4zm0 7h18v2H3v-2zm0 7h18v2H3v-2z"></path> </svg> </button> </span> <a href="/" class="site-logo" aria-label="DEV Community Home"> <img class="site-logo__img" src="https://media2.dev.to/dynamic/image/quality=100/https://dev-to-uploads.s3.amazonaws.com/uploads/logos/resized_logo_UQww2soKuUsjaOGNB38o.png" style="aspect-ratio: 10 / 8" alt="DEV Community"> </a> <div class="crayons-header--search js-search-form" id="header-search"> <form accept-charset="UTF-8" method="get" action="/search" role="search"> <div class="crayons-fields crayons-fields--horizontal"> <div class="crayons-field flex-1 relative"> <input id="search-input" class="crayons-header--search-input crayons-textfield js-search-input" type="text" id="nav-search" name="q" placeholder="Find related posts..." autocomplete="off" /> <button type="submit" aria-label="Search" class="c-btn c-btn--icon-alone absolute inset-px right-auto mt-0 py-0"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a3ahupzk9tvpfm0ubrewv8311idvke3r" aria-hidden="true" class="crayons-icon"><title id="a3ahupzk9tvpfm0ubrewv8311idvke3r">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </button> <a class="crayons-header--search-brand-indicator" href="https://www.algolia.com/developers/?utm_source=devto&utm_medium=referral" target="_blank" rel="noopener noreferrer"> Powered by <svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" width="24" height="24" viewBox="0 0 500 500.34" role="img" aria-labelledby="a1n8rtl7f5f3s0y4m885ibyd1gzkq6qr" aria-hidden="true" class="crayons-icon"><title id="a1n8rtl7f5f3s0y4m885ibyd1gzkq6qr">Search</title> <defs></defs><path class="cls-1" d="M250,0C113.38,0,2,110.16,.03,246.32c-2,138.29,110.19,252.87,248.49,253.67,42.71,.25,83.85-10.2,120.38-30.05,3.56-1.93,4.11-6.83,1.08-9.52l-23.39-20.74c-4.75-4.22-11.52-5.41-17.37-2.92-25.5,10.85-53.21,16.39-81.76,16.04-111.75-1.37-202.04-94.35-200.26-206.1,1.76-110.33,92.06-199.55,202.8-199.55h202.83V407.68l-115.08-102.25c-3.72-3.31-9.43-2.66-12.43,1.31-18.47,24.46-48.56,39.67-81.98,37.36-46.36-3.2-83.92-40.52-87.4-86.86-4.15-55.28,39.65-101.58,94.07-101.58,49.21,0,89.74,37.88,93.97,86.01,.38,4.28,2.31,8.28,5.53,11.13l29.97,26.57c3.4,3.01,8.8,1.17,9.63-3.3,2.16-11.55,2.92-23.6,2.07-35.95-4.83-70.39-61.84-127.01-132.26-131.35-80.73-4.98-148.23,58.18-150.37,137.35-2.09,77.15,61.12,143.66,138.28,145.36,32.21,.71,62.07-9.42,86.2-26.97l150.36,133.29c6.45,5.71,16.62,1.14,16.62-7.48V9.49C500,4.25,495.75,0,490.51,0H250Z"></path> </svg> Algolia </a> </div> </div> </form> </div> <div class="flex items-center h-100 ml-auto"> <a class="c-link c-link--icon-alone c-link--block m:hidden mx-1" id="search-link" aria-label="Search" href="/search"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aellyakouoz7aws4dr6t46e016czi9e5" class="crayons-icon"><title id="aellyakouoz7aws4dr6t46e016czi9e5">Search</title> <path d="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0111 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 01-1.969 5.617zm-2.006-.742A6.977 6.977 0 0018 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 004.875-1.975l.15-.15z"></path> </svg> </a> <div class="flex" id="authentication-top-nav-actions"> <span class="hidden m:block"> <a href="/enter" class="c-link c-link--block mr-2 whitespace-nowrap ml-auto" data-no-instant> Log in </a> </span> <a href="/enter?state=new-user" data-tracking-id="ca_top_nav" data-tracking-source="top_navbar" class="c-cta c-cta--branded whitespace-nowrap mr-2" data-no-instant> Create account </a> </div> </div> </div> </header> <div class="hamburger"> <div class="hamburger__content"> <header class="hamburger__content__header"> <h2 class="fs-l fw-bold flex-1 break-word lh-tight">DEV Community</h2> <button class="c-btn c-btn--icon-alone js-hamburger-trigger shrink-0" aria-label="Close"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a7cgvxmdge9ole11rzopn09xuq0qtrcr" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="a7cgvxmdge9ole11rzopn09xuq0qtrcr">Close</title><path d="M12 10.586l4.95-4.95 1.414 1.414-4.95 4.95 4.95 4.95-1.414 1.414-4.95-4.95-4.95 4.95-1.414-1.414 4.95-4.95-4.95-4.95L7.05 5.636l4.95 4.95z"></path></svg> </button> </header> <div class="p-2 js-navigation-links-container" id="authentication-hamburger-actions"> </div> </div> <div class="hamburger__overlay js-hamburger-trigger"></div> </div> <div id="active-broadcast" class="broadcast-wrapper"></div> <div id="page-content" class="wrapper stories stories-show articletag-a11y articletag-css articleuser-161327" data-current-page="stories-show"> <div id="page-content-inner" data-internal-nav="false"> <div id="page-route-change" class="screen-reader-only" aria-live="polite" aria-atomic="true"></div> <style> .html-variant-wrapper { display: none} </style> <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.2.10/webcomponents-loader.js" integrity="sha384-3HK5hxQbkFqOIxMbpROlRmRtYl2LBZ52t+tqcjzsmr9NJuOWQxl8RgQSyFvq2lhy" crossorigin="anonymous" defer></script> <script src="https://assets.dev.to/assets/webShare-0686f0b9ac40589694ef6ae6a6202c44119bc781c254f6cf6d52d8a008461156.js" defer="defer"></script> <script src="https://assets.dev.to/assets/articlePage-e91bed0487621b06608474cfabffa186165e1f43f05b24581203ccc21e7aa45d.js" defer="defer"></script> <script src="https://assets.dev.to/assets/commentDropdowns-7a28d130e5b78d38b30a9495a964003a66bd64fa455fc70b766d69cf06b9ba24.js" defer="defer"></script> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"Article","mainEntityOfPage":{"@type":"WebPage","@id":"https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467"},"url":"https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467","image":["https://media2.dev.to/dynamic/image/width=1080,height=1080,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png","https://media2.dev.to/dynamic/image/width=1280,height=720,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png","https://media2.dev.to/dynamic/image/width=1600,height=900,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png"],"publisher":{"@context":"http://schema.org","@type":"Organization","name":"DEV Community","logo":{"@context":"http://schema.org","@type":"ImageObject","url":"https://media2.dev.to/dynamic/image/width=192,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png","width":"192","height":"192"}},"headline":"Allow end-user styling overrides","author":{"@context":"http://schema.org","@type":"Person","url":"https://dev.to/alvaromontoro","name":"Alvaro Montoro"},"datePublished":"2020-06-12T21:51:46Z","dateModified":"2020-06-12T21:51:46Z"} </script> <div class="crayons-layout crayons-layout--3-cols crayons-layout--article"> <aside class="crayons-layout__sidebar-left" aria-label="Article actions"> <div class="crayons-article-actions print-hidden"> <div class="crayons-article-actions__inner"> <div class="reaction-drawer__outer hoverdown" style=""> <button id="reaction-drawer-trigger" aria-label="reaction-drawer-trigger" aria-pressed="false" class="hoverdown-trigger crayons-reaction pseudo-reaction crayons-tooltip__activator relative"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction--like crayons-reaction__icon--inactive" style="width: 40px; height: 40px"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" role="img" aria-hidden="true" class="crayons-icon"> <g clip-path="url(#clip0_988_3276)"> <path d="M19 14V17H22V19H18.999L19 22H17L16.999 19H14V17H17V14H19ZM20.243 4.75698C22.505 7.02498 22.583 10.637 20.479 12.992L19.059 11.574C20.39 10.05 20.32 7.65998 18.827 6.16998C17.324 4.67098 14.907 4.60698 13.337 6.01698L12.002 7.21498L10.666 6.01798C9.09103 4.60598 6.67503 4.66798 5.17203 6.17198C3.68203 7.66198 3.60703 10.047 4.98003 11.623L13.412 20.069L12 21.485L3.52003 12.993C1.41603 10.637 1.49503 7.01898 3.75603 4.75698C6.02103 2.49298 9.64403 2.41698 12 4.52898C14.349 2.41998 17.979 2.48998 20.242 4.75698H20.243Z" fill="#525252"></path> </g> <defs> <clipPath id="clip0_988_3276"> <rect width="24" height="24" fill="white"></rect> </clipPath> </defs> </svg> </span> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--active" style="width: 40px; height: 40px"> <img aria_hidden="true" height="24" width="24" src="https://assets.dev.to/assets/heart-plus-active-9ea3b22f2bc311281db911d416166c5f430636e76b15cd5df6b3b841d830eefa.svg" /> </span> <span class="crayons-reaction__count" id="reaction_total_count"> <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span> </span> <span class="crayons-tooltip__content"> Add reaction </span> </button> <div class="reaction-drawer" aria-expanded="false"> <div class="reaction-drawer__container"> <button id="reaction-butt-like" name="Like" aria-label="Like" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="like"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-like"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <button id="reaction-butt-unicorn" name="Unicorn" aria-label="Unicorn" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="unicorn"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-unicorn"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Unicorn </span> </button> <button id="reaction-butt-exploding_head" name="Exploding Head" aria-label="Exploding Head" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="exploding_head"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-exploding_head"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Exploding Head </span> </button> <button id="reaction-butt-raised_hands" name="Raised Hands" aria-label="Raised Hands" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="raised_hands"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-raised_hands"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Raised Hands </span> </button> <button id="reaction-butt-fire" name="Fire" aria-label="Fire" aria-pressed="false" class="crayons-reaction crayons-tooltip__activator relative pt-2 pr-2 pb-1 pl-2" data-category="fire"> <span class="crayons-reaction__icon crayons-reaction__icon--inactive p-0"> <img aria_hidden="true" height="32" width="32" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" /> </span> <span class="crayons-reaction__count" id="reaction-number-fire"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Fire </span> </button> </div> </div> </div> <button id="reaction-butt-comment" aria-label="Jump to Comments" aria-pressed="false" class="crayons-reaction crayons-reaction--comment crayons-tooltip__activator relative" data-category="comment"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon"> <path d="M10 3h4a8 8 0 010 16v3.5c-5-2-12-5-12-11.5a8 8 0 018-8zm2 14h2a6 6 0 000-12h-4a6 6 0 00-6 6c0 3.61 2.462 5.966 8 8.48V17z"></path> </svg> </span> <span class="crayons-reaction__count" id="reaction-number-comment" data-count="2"> <span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span> </span> <span data-testid="tooltip" class="crayons-tooltip__content"> Jump to Comments </span> </button> <button id="reaction-butt-readinglist" aria-label="Add to reading list" aria-pressed="false" class="crayons-reaction crayons-reaction--readinglist crayons-tooltip__activator relative" data-category="readinglist"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-hidden="true" class="crayons-icon"> <path d="M5 2h14a1 1 0 011 1v19.143a.5.5 0 01-.766.424L12 18.03l-7.234 4.536A.5.5 0 014 22.143V3a1 1 0 011-1zm13 2H6v15.432l6-3.761 6 3.761V4z"></path> </svg> </span> <span class="crayons-reaction__count" id="reaction-number-readinglist"><span class="bg-base-40 opacity-25 p-2 inline-block radius-default"></span></span> <span data-testid="tooltip" class="crayons-tooltip__content"> Save </span> </button> <button id="reaction-butt-boost" aria-label="Boost" aria-pressed="false" class="crayons-reaction crayons-reaction--boost crayons-tooltip__activator relative"> <span class="crayons-reaction__icon crayons-reaction__icon--borderless crayons-reaction__icon--inactive"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" role="img" aria-hidden="true" class="crayons-icon" width="24" height="24"> <path transform="translate(24,0) scale(-1,1)" d="M6 4H21C21.5523 4 22 4.44772 22 5V12H20V6H6V9L1 5L6 1V4ZM18 20H3C2.44772 20 2 19.5523 2 19V12H4V18H18V15L23 19L18 23V20Z"></path> </svg> </span> <span data-testid="tooltip" class="crayons-tooltip__content"> Boost </span> </button> <div id="mod-actions-menu-btn-area" class="print-hidden trusted-visible-block align-center"> </div> <div class="align-center m:relative"> <button id="article-show-more-button" aria-controls="article-show-more-dropdown" aria-expanded="false" aria-haspopup="true" class="dropbtn crayons-btn crayons-btn--ghost-dimmed crayons-btn--icon-rounded" aria-label="Share post options"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahkyo152egwk7p5s7x7010qbbaikc4fc" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="ahkyo152egwk7p5s7x7010qbbaikc4fc">More...</title><path fill-rule="evenodd" clip-rule="evenodd" d="M7 12a2 2 0 11-4 0 2 2 0 014 0zm7 0a2 2 0 11-4 0 2 2 0 014 0zm5 2a2 2 0 100-4 2 2 0 000 4z"></path></svg> </button> <div id="article-show-more-dropdown" class="crayons-dropdown side-bar left-2 right-2 m:right-auto m:left-100 s:left-auto mb-1 m:mb-0 top-unset bottom-100 m:top-0 m:bottom-unset"> <div> <button id="copy-post-url-button" class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0" data-postUrl="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467"> <span class="fw-bold">Copy link</span> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" id="article-copy-icon" role="img" aria-labelledby="a56b44282v3ah2k1ln6ukmtgsk2mjns4" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="a56b44282v3ah2k1ln6ukmtgsk2mjns4">Copy link</title> <path d="M7 6V3a1 1 0 011-1h12a1 1 0 011 1v14a1 1 0 01-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1 1 0 013 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"></path> </svg> </button> <div id="article-copy-link-announcer" aria-live="polite" class="crayons-notice crayons-notice--success my-2 p-1" aria-live="polite" hidden>Copied to Clipboard</div> </div> <div class="Desktop-only"> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href='https://twitter.com/intent/tweet?text=%22Allow%20end-user%20styling%20overrides%22%20by%20%40alvaro_montoro%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Falvaromontoro%2Fallow-end-user-styling-overrides-2467'> Share to X </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fdev.to%2Falvaromontoro%2Fallow-end-user-styling-overrides-2467&title=Allow%20end-user%20styling%20overrides&summary=While%20there%20are%20different%20ways%20of%20adding%20CSS%20into%20your%20documents%2C%20some%20types%20should%20be%20avoided%20to%20allow%20for%20some%20end-user%20customization.&source=DEV%20Community"> Share to LinkedIn </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdev.to%2Falvaromontoro%2Fallow-end-user-styling-overrides-2467"> Share to Facebook </a> <a target="_blank" class="crayons-link crayons-link--block" rel="noopener" href="https://toot.kytta.dev/?text=https%3A%2F%2Fdev.to%2Falvaromontoro%2Fallow-end-user-styling-overrides-2467"> Share to Mastodon </a> </div> <web-share-wrapper shareurl="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467" sharetitle="Allow end-user styling overrides" sharetext="While there are different ways of adding CSS into your documents, some types should be avoided to allow for some end-user customization." template="web-share-button"> </web-share-wrapper> <template id="web-share-button"> <a href="#" class="dropdown-link-row crayons-link crayons-link--block">Share Post via...</a> </template> <a href="/report-abuse" class="crayons-link crayons-link--block">Report Abuse</a> </div> </div> </div> </div> </aside> <main id="main-content" class="crayons-layout__content grid gap-4"> <div class="article-wrapper"> <article class="crayons-card crayons-article mb-4" id="article-show-container" data-article-id="353960" data-article-slug="allow-end-user-styling-overrides-2467" data-author-id="161327" data-author-name="Alvaro Montoro" data-author-username="alvaromontoro" data-co-author-ids="" data-path="/alvaromontoro/allow-end-user-styling-overrides-2467" data-pin-path="/stories/feed/pinned_article" data-pinned-article-id="" data-published="true" data-scheduled="false" > <header class="crayons-article__header" id="main-title"> <a class="crayons-article__cover" href="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png"> <img src="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png" style="aspect-ratio: auto 1000 / 420;" width="1000" height="420" class="crayons-article__cover__image" alt="Cover image for Allow end-user styling overrides"> </a> <div class="crayons-article__header__meta"> <div class="flex s:items-start flex-col s:flex-row"> <div id="action-space" class="crayons-article__actions mb-4 s:mb-0 s:order-last"></div> <div class="flex flex-1 mb-5 items-start"> <div class="relative"> <a href="/alvaromontoro"><img class="radius-full align-middle" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" width="40" height="40" alt="Alvaro Montoro" /></a> </div> <div class="pl-3 flex-1"> <a href="/alvaromontoro" class="crayons-link fw-bold">Alvaro Montoro</a> <p class="fs-xs color-base-60"> Posted on <time datetime="2020-06-12T21:51:46Z" class="date">Jun 12, 2020</time> </p> </div> </div> </div> <div class="multiple_reactions_engagement"> <span class="reaction_engagement_like hidden"> <img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24" /> <span id="reaction_engagement_like_count"> </span> </span> <span class="reaction_engagement_unicorn hidden"> <img src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="24" height="24" /> <span id="reaction_engagement_unicorn_count"> </span> </span> <span class="reaction_engagement_exploding_head hidden"> <img src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="24" height="24" /> <span id="reaction_engagement_exploding_head_count"> </span> </span> <span class="reaction_engagement_raised_hands hidden"> <img src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="24" height="24" /> <span id="reaction_engagement_raised_hands_count"> </span> </span> <span class="reaction_engagement_fire hidden"> <img src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="24" height="24" /> <span id="reaction_engagement_fire_count"> </span> </span> </div> <h1 class=" fs-3xl m:fs-4xl l:fs-5xl fw-bold s:fw-heavy lh-tight mb-2 medium"> Allow end-user styling overrides </h1> <div class="spec__tags flex flex-wrap"> <a class="crayons-tag " style=" --tag-bg: rgba(8, 59, 21, 0.10); --tag-prefix: #083b15; --tag-bg-hover: rgba(8, 59, 21, 0.10); --tag-prefix-hover: #083b15; " href="/t/a11y"><span class="crayons-tag__prefix">#</span>a11y</a> <a class="crayons-tag " style=" --tag-bg: rgba(41, 101, 241, 0.10); --tag-prefix: #2965F1; --tag-bg-hover: rgba(41, 101, 241, 0.10); --tag-prefix-hover: #2965F1; " href="/t/css"><span class="crayons-tag__prefix">#</span>css</a> </div> </div> </header> <div class="crayons-article__main "> <nav class="series-switcher crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h2 class="crayons-subtitle-2"> <a href="/alvaromontoro/series/7048">Web Accessibility with CSS (12 Part Series)</a> </h2> </header> <div class="series-switcher__list"> <a href="/alvaromontoro/web-accessibility-with-css-2cij" class="crayons-link crayons-link--contentful series-switcher__link " data-preload-image="" title="Published May 31 '20"> <span class="series-switcher__num">1</span> <span class="series-switcher__title">Web Accessibility with CSS</span> </a> <a href="/alvaromontoro/allow-end-user-styling-overrides-2467" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--active " data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png" title="Published Jun 12 '20"> <span class="series-switcher__num">2</span> <span class="series-switcher__title">Allow end-user styling overrides</span> </a> <a href="/alvaromontoro/using-important-in-css-75c" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--inbetween" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fzwtxmzgqv34auc5lxr0e.png" id="collection-link-inbetween" data-no-instant title="View more"> <span class="series-switcher__num">...</span> <span class="series-switcher__title">8 more parts...</span> </a> <a href="/alvaromontoro/using-important-in-css-75c" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fzwtxmzgqv34auc5lxr0e.png" title="Published Jun 13 '20"> <span class="series-switcher__num">3</span> <span class="series-switcher__title">Using !important in CSS</span> </a> <a href="/alvaromontoro/use-font-relative-unit-for-font-sizes-4pjh" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwxaqzuce54fzejfzajx2.png" title="Published Jun 15 '20"> <span class="series-switcher__num">4</span> <span class="series-switcher__title">Use font-relative units for font sizes</span> </a> <a href="/alvaromontoro/accessible-text-4d05" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5jpw3h3ifs3razotvuwg.png" title="Published Jun 16 '20"> <span class="series-switcher__num">5</span> <span class="series-switcher__title">Accessible text</span> </a> <a href="/alvaromontoro/color-contrast-text-3l29" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fulq9c7vi0750sq9lcrhx.png" title="Published Jun 17 '20"> <span class="series-switcher__num">6</span> <span class="series-switcher__title">Color contrast: text</span> </a> <a href="/alvaromontoro/color-contrast-beyond-text-3kc0" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fulq9c7vi0750sq9lcrhx.png" title="Published Jun 22 '20"> <span class="series-switcher__num">7</span> <span class="series-switcher__title">Color contrast: beyond text</span> </a> <a href="/alvaromontoro/don-t-use-color-to-convey-content-2ai1" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fu9y9hcl376nuna2vxkv0.png" title="Published Jul 2 '20"> <span class="series-switcher__num">8</span> <span class="series-switcher__title">Do not just use color to convey information</span> </a> <a href="/alvaromontoro/limit-pointer-events-to-graphic-elements-11cd" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0zuv4aov1ttdjuenc3ps.png" title="Published Jul 6 '20"> <span class="series-switcher__num">9</span> <span class="series-switcher__title">Limit pointer-events to graphic elements</span> </a> <a href="/alvaromontoro/hiding-content-for-accessibility-4kmj" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcdwmnasagfipvsfzdq7j.png" title="Published Aug 16 '20"> <span class="series-switcher__num">10</span> <span class="series-switcher__title">Hiding content for accessibility</span> </a> <a href="/alvaromontoro/making-tables-more-accessible-with-css-19p" class="crayons-link crayons-link--contentful series-switcher__link " data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F32h1l1053hcd3ohhio64.png" title="Published Oct 12 '20"> <span class="series-switcher__num">11</span> <span class="series-switcher__title">Making tables more accessible with CSS</span> </a> <a href="/alvaromontoro/consider-reducing-motions-1a13" class="crayons-link crayons-link--contentful series-switcher__link " data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fl4tvhmk7za4snxk10vss.png" title="Published Dec 13 '20"> <span class="series-switcher__num">12</span> <span class="series-switcher__title">Reduce motion with CSS</span> </a> </div> </nav> <div class="crayons-article__body text-styles spec__body" data-article-id="353960" id="article-body"> <p>When starting with CSS, you learn that there are <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured#Applying_CSS_to_HTML">three ways in which styles can be added into an HTML page</a>:</p> <ul> <li> <strong>External styles</strong>: in a separate file added using <code><link></code>.</li> <li> <strong>Internal styles</strong>: inside a <code><style></code> tag in the HTML document itself.</li> <li> <strong>Inline styles</strong>: applied directly to a tag using the <code>style</code> attribute.</li> </ul> <p>The styles then <em>cascade</em> down, being applied from the outside to the inside. So inline styles will take priority over internal styles, that will have more priority than external styles.</p> <p>With that in mind, it looks like the developer is in complete control of the document styling, but there are a couple of cases that fall "outside" of that:</p> <ul> <li> <strong>Internal browser styles</strong>: these are the default styles that the browser applies to the HTML elements. They have the lowest priority, but not all of them can be overridden (e.g. the widgets for different inputs).</li> <li> <strong>End-user styles</strong>: these are styles that are applied by the user (normally using one of the 3 methods described above via a plugin/extension).</li> </ul> <p>Now you will say: "<em>Wait a second! If end-user styles are applied using one of the three methods, then it can be overridden by the developer styles!</em>"... and you will be 100% correct.</p> <p>And that is the point of this article: <strong>developers should write CSS in a way that can be overridden by the user</strong>.</p> <figure><p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--aT6Yjiov--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/dor8jup7wkkc63tz7v55.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--aT6Yjiov--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/dor8jup7wkkc63tz7v55.png" alt="Order of the cascaded styles: browser, external, internal, inline, and user-generated styles" loading="lazy"></a></p> <figcaption>Figure: How styles "cascade" and should be applied into the document</figcaption></figure> <p>There are many <a href="https://webaim.org/techniques/css/#intro">reasons why an end-user may want to provide their own set of styles</a>: people suffering from colorblindness could want to override some of the color values to make the site easier to navigate, people with visual difficulties may opt for larger font sizes or zooming on some elements to be able to read better, or people with cognitive or learning disabilities may opt for applying a completely font family altogether.</p> <p>It is our website and our code, but it is the user's browser and experience. While we, as developers, can set up the general experience, we should allow space for some customization from the user side.</p> <p>So, how can developers write CSS that can be easily overridden? Mainly following these three steps:</p> <ol> <li>Stop using inline styles.</li> <li>Do not use <code>!important</code>.</li> <li>Use relative units.</li> </ol> <p>The inline styles are a bad idea in general: they tend to require more coding, they are not as flexible... and they take priority over the user-defined styles. Avoid them whenever it is possible.</p> <p>The <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception"><code>!important</code> keyword</a> will override any other CSS declaration (including the user defined styles). Plus it is considered bad practice in general, so avoid it.</p> <p>Using relative units allow for some additional flexibility. Users could define the root size at the browser level and that way all the content would automatically adapt to the new sizing.</p> <p>The last two points can be extended further and will be revisited in upcoming posts.</p> <hr> <p><strong>Do not force CSS styles onto the user. Write CSS in a way in which users could override it easily if needed</strong>.</p> </div> <nav class="series-switcher crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h2 class="crayons-subtitle-2"> <a href="/alvaromontoro/series/7048">Web Accessibility with CSS (12 Part Series)</a> </h2> </header> <div class="series-switcher__list"> <a href="/alvaromontoro/web-accessibility-with-css-2cij" class="crayons-link crayons-link--contentful series-switcher__link " data-preload-image="" title="Published May 31 '20"> <span class="series-switcher__num">1</span> <span class="series-switcher__title">Web Accessibility with CSS</span> </a> <a href="/alvaromontoro/allow-end-user-styling-overrides-2467" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--active " data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fma0cu0f7bkg4ylit6a34.png" title="Published Jun 12 '20"> <span class="series-switcher__num">2</span> <span class="series-switcher__title">Allow end-user styling overrides</span> </a> <a href="/alvaromontoro/using-important-in-css-75c" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--inbetween" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fzwtxmzgqv34auc5lxr0e.png" id="collection-link-inbetween" data-no-instant title="View more"> <span class="series-switcher__num">...</span> <span class="series-switcher__title">8 more parts...</span> </a> <a href="/alvaromontoro/using-important-in-css-75c" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fzwtxmzgqv34auc5lxr0e.png" title="Published Jun 13 '20"> <span class="series-switcher__num">3</span> <span class="series-switcher__title">Using !important in CSS</span> </a> <a href="/alvaromontoro/use-font-relative-unit-for-font-sizes-4pjh" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fwxaqzuce54fzejfzajx2.png" title="Published Jun 15 '20"> <span class="series-switcher__num">4</span> <span class="series-switcher__title">Use font-relative units for font sizes</span> </a> <a href="/alvaromontoro/accessible-text-4d05" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F5jpw3h3ifs3razotvuwg.png" title="Published Jun 16 '20"> <span class="series-switcher__num">5</span> <span class="series-switcher__title">Accessible text</span> </a> <a href="/alvaromontoro/color-contrast-text-3l29" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fulq9c7vi0750sq9lcrhx.png" title="Published Jun 17 '20"> <span class="series-switcher__num">6</span> <span class="series-switcher__title">Color contrast: text</span> </a> <a href="/alvaromontoro/color-contrast-beyond-text-3kc0" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fulq9c7vi0750sq9lcrhx.png" title="Published Jun 22 '20"> <span class="series-switcher__num">7</span> <span class="series-switcher__title">Color contrast: beyond text</span> </a> <a href="/alvaromontoro/don-t-use-color-to-convey-content-2ai1" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fu9y9hcl376nuna2vxkv0.png" title="Published Jul 2 '20"> <span class="series-switcher__num">8</span> <span class="series-switcher__title">Do not just use color to convey information</span> </a> <a href="/alvaromontoro/limit-pointer-events-to-graphic-elements-11cd" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F0zuv4aov1ttdjuenc3ps.png" title="Published Jul 6 '20"> <span class="series-switcher__num">9</span> <span class="series-switcher__title">Limit pointer-events to graphic elements</span> </a> <a href="/alvaromontoro/hiding-content-for-accessibility-4kmj" class="crayons-link crayons-link--contentful series-switcher__link series-switcher__link--hidden" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fcdwmnasagfipvsfzdq7j.png" title="Published Aug 16 '20"> <span class="series-switcher__num">10</span> <span class="series-switcher__title">Hiding content for accessibility</span> </a> <a href="/alvaromontoro/making-tables-more-accessible-with-css-19p" class="crayons-link crayons-link--contentful series-switcher__link " data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F32h1l1053hcd3ohhio64.png" title="Published Oct 12 '20"> <span class="series-switcher__num">11</span> <span class="series-switcher__title">Making tables more accessible with CSS</span> </a> <a href="/alvaromontoro/consider-reducing-motions-1a13" class="crayons-link crayons-link--contentful series-switcher__link " data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Fl4tvhmk7za4snxk10vss.png" title="Published Dec 13 '20"> <span class="series-switcher__num">12</span> <span class="series-switcher__title">Reduce motion with CSS</span> </a> </div> </nav> <div class="js-billboard-container body-billboard-container" data-async-url="/alvaromontoro/allow-end-user-styling-overrides-2467/billboards/post_body_bottom"></div> </div> <section id="comments" data-follow-button-container="true" data-updated-at="2024-12-04 00:28:06 UTC" class="text-padding mb-4 border-t-1 border-0 border-solid border-base-10"> <header class="relative flex justify-between items-center mb-6"> <div class="flex items-center"> <h2 class="crayons-subtitle-1"> Top comments <span class="js-comments-count" data-comments-count="2">(2)</span> </h2> </div> <div id="comment-subscription" class="print-hidden"> <div class="crayons-btn-group"> <span class="crayons-btn crayons-btn--outlined">Subscribe</span> </div> </div> </header> <div id="billboard_delay_trigger"></div> <div id="comments-container" data-testid="comments-container" data-commentable-id="353960" data-commentable-type="Article" data-has-recent-comment-activity="false"> <div id="response-templates-data" class="hidden"></div> <form class="comment-form print-hidden" id="new_comment" action="/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /> <input type="hidden" name="authenticity_token" value="NOTHING" id="new_comment_authenticity_token"> <input value="353960" autocomplete="off" type="hidden" name="comment[commentable_id]" id="comment_commentable_id" /> <input value="Article" autocomplete="off" type="hidden" name="comment[commentable_type]" id="comment_commentable_type" /> <span class="crayons-avatar m:crayons-avatar--l mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=256,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" width="32" height="32" alt="pic" class="crayons-avatar__image overflow-hidden" id="comment-primary-user-profile--avatar" loading="lazy" /> </span> <div class="comment-form__inner"> <div class="comment-form__field" data-tracking-name="comment_form_textfield"> <textarea placeholder="Add to the discussion" onfocus="handleFocus(event)" onkeyup="handleKeyUp(event)" onkeydown="handleKeyDown(event)" oninput="handleChange(event)" id="text-area" required="required" class="crayons-textfield comment-textarea crayons-textfield--ghost" aria-label="Add a comment to the discussion" name="comment[body_markdown]"> </textarea> </div> <div class="response-templates-container crayons-card crayons-card--secondary p-4 mb-4 comment-form__templates fs-base hidden"> <header class="mb-3"> <button type="button" class="crayons-btn personal-template-button active" data-target-type="personal" data-form-id="new_comment">Personal</button> <button type="button" class="crayons-btn moderator-template-button hidden" data-target-type="moderator" data-form-id="new_comment">Trusted User</button> </header> <div class="personal-responses-container"> </div> <div class="moderator-responses-container hidden"> </div> <a target="_blank" rel="noopener nofollow" href="/settings/response-templates"> Create template </a> <p>Templates let you quickly answer FAQs or store snippets for re-use.</p> </div> <div class="comment-form__preview text-styles text-styles--secondary" id="preview-div"></div> <div class="comment-form__buttons mb-4"> <button type="submit" class="crayons-btn mr-2 js-btn-enable" onclick="validateField(event)" data-tracking-name="comment_submit_button" disabled>Submit</button> <button type="button" class="preview-toggle crayons-btn crayons-btn--secondary comment-action-preview js-btn-enable mr-2" data-tracking-name="comment_preview_button" disabled>Preview</button> <a href="/404.html" class="dismiss-edit-comment crayons-btn crayons-btn--ghost js-btn-dismiss hidden">Dismiss</a> </div> </div> <div class="code-of-conduct" id="toggle-code-of-conduct-checkbox"></div> </form> <div class="comments" id="comment-trees-container"> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-0 root " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="m:mx-1 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a81ob6c9asi6lc6u7dp9un2wc0msj3q6" class="crayons-icon expanded"><title id="a81ob6c9asi6lc6u7dp9un2wc0msj3q6">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="amfakz40q0eclcifb5li4fhrecks766p" class="crayons-icon collapsed"><title id="amfakz40q0eclcifb5li4fhrecks766p">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-463708" class=" comment single-comment-node root comment--deep-0 " data-comment-id="463708" data-path="/alvaromontoro/allow-end-user-styling-overrides-2467/comments/109oo" data-comment-author-id="125105" data-content-user-id="125105"> <a name="comment-109oo" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/immannino" class="shrink-0 crayons-avatar m:crayons-avatar--l mt-4 m:mt-3"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F125105%2F6cb0c473-f460-4043-8fd1-b9f088438a16.jpg" alt="immannino profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/immannino" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Tony</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-463708" aria-controls="comment-profile-preview-content-463708" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Tony profile details"> Tony </button> <div id="comment-profile-preview-content-463708" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #0000e0; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/immannino" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F125105%2F6cb0c473-f460-4043-8fd1-b9f088438a16.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Tony </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":125105,"name":"Tony"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Tony" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> I like to build stuff </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Seattle </div> </li> <li> <div class="key"> Pronouns </div> <div class="value"> he/him </div> </li> <li> <div class="key"> Work </div> <div class="value"> Full Stack Developer at ShareBuilder 401k </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2018-12-31T23:35:26Z" class="date">Dec 31, 2018</time> </div> </li> </ul> </div> </div> </div> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467#comment-109oo" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T07:52:18Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-463708" aria-controls="comment-dropdown-463708" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="adhy3qk3aobr6c7eqruvqyzirrubvydh" class="crayons-icon pointer-events-none"><title id="adhy3qk3aobr6c7eqruvqyzirrubvydh">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-463708" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467#comment-109oo" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Tony's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="125105" data-action="settings-button" data-path="https://dev.to/immannino/comment/109oo/settings" aria-label="Go to Tony's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="125105"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="463708" data-comment-url="https://dev.to/immannino/comment/109oo" aria-label="Hide Tony's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/immannino/comment/109oo/mod" aria-label="Moderate Tony's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/immannino/comment/109oo" aria-label="Report Tony's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <p>I really, really like this concept. I've had the same thought a few times.</p> <p>The hard thing for me is the whole domain aspect of the website, and then the creative freedom from the creator. One example of this is someone's personal blog: People tend to get very creative in how they design their personal blogs/websites, and I personally find a majority of them hard to consume their content (the fonts/colors/spacing of the text usually aren't super a11y). It would be fantastic for people to design their blogs as you mentioned above, but I also completely understand the fact that the creator of the site doesn't owe the end user anything (well a11y of course (; ), the design of their personal site/blog is an extension of their creative freedom, and they may prefer their users to consume their content they way it was intended. It's a weird fine line.</p> <p>I've been writing a rough draft for a post about using minimal css frameworks like <a href="https://newcss.net/" rel="nofollow">new.css</a>, and injecting the stylesheet & custom theme overrides into a browser plugin to quickly override a websites styles. I really love the idea! </p> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-463708" data-comment-id="463708" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aso5xyzo832u2k5yko3e6cf0o2qyk1kf" class="crayons-icon reaction-icon not-reacted"><title id="aso5xyzo832u2k5yko3e6cf0o2qyk1kf">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="aff3fb7pks81ya2i1siheawtlg4kpmvj" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="aff3fb7pks81ya2i1siheawtlg4kpmvj">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">5</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/alvaromontoro/allow-end-user-styling-overrides-2467/comments/new/109oo" data-comment-id="463708" data-path="/alvaromontoro/allow-end-user-styling-overrides-2467/comments/109oo" data-tracking-name="comment_reply_button" data-testid="reply-button-463708" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aqmbzkuqea59ywikdigeqjk6p8urjcu1" class="crayons-icon reaction-icon not-reacted"><title id="aqmbzkuqea59ywikdigeqjk6p8urjcu1">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden m:inline-block">Reply</span> </a> </footer> </div> </div> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 child " open> <summary aria-label="Toggle this comment (and replies)" data-tracking-name="expand_comment_toggle"> <span class="mx-0 inline-block align-middle"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="ahupcdkntvlcaf8gz6pvm7u8lbj2u5ka" class="crayons-icon expanded"><title id="ahupcdkntvlcaf8gz6pvm7u8lbj2u5ka">Collapse</title> <path d="M12 10.677L8 6.935 9 6l3 2.807L15 6l1 .935-4 3.742zm0 4.517L9 18l-1-.935 4-3.742 4 3.742-1 .934-3-2.805z"></path> </svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="acuw6yf6qbtpvc32vail0d5rgbsq8pjm" class="crayons-icon collapsed"><title id="acuw6yf6qbtpvc32vail0d5rgbsq8pjm">Expand</title> <path d="M12 18l-4-3.771 1-.943 3 2.829 3-2.829 1 .943L12 18zm0-10.115l-3 2.829-1-.943L12 6l4 3.771-1 .942-3-2.828z"></path> </svg> </span> <span class="js-collapse-comment-content inline-block align-middle"></span> </summary> <div id="comment-node-463955" class=" comment single-comment-node child comment--deep-1 " data-comment-id="463955" data-path="/alvaromontoro/allow-end-user-styling-overrides-2467/comments/10a8b" data-comment-author-id="161327" data-content-user-id="161327"> <a name="comment-10a8b" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/alvaromontoro" class="shrink-0 crayons-avatar mt-4"> <img class="crayons-avatar__image" width="32" height="32" src="https://media2.dev.to/dynamic/image/width=50,height=50,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" alt="alvaromontoro profile image" loading="lazy" /> </a> <div class="inner-comment comment__details"> <div class="comment__content crayons-card"> <div class="comment__header"> <a href="https://dev.to/alvaromontoro" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Alvaro Montoro</span> <span class="crayons-hover-tooltip inline-block spec-op-author -mr-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-463955" aria-controls="comment-profile-preview-content-463955" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Alvaro Montoro profile details"> Alvaro Montoro </button> <div id="comment-profile-preview-content-463955" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #96c2c2; border-top-color: var(--card-color);" data-testid="profile-preview-card" data-repositioning-dropdown="true"> <div class="gap-4 grid"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Alvaro Montoro </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":161327,"name":"Alvaro Montoro"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Alvaro Montoro" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person (He/Him) </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Austin, TX </div> </li> <li> <div class="key"> Work </div> <div class="value"> UI Manager / CSS Aficionado </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-04-27T12:06:44Z" class="date">Apr 27, 2019</time> </div> </li> </ul> </div> </div> </div> <span class="crayons-hover-tooltip inline-block spec-op-author -ml-2" data-tooltip="Author"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" class="crayons-icon"> <path d="M12 8.25a6 6 0 110 12 6 6 0 010-12zm0 2.625l-.992 2.01-2.218.322 1.605 1.564-.379 2.21L12 15.937l1.984 1.043-.379-2.209 1.605-1.564-2.218-.323L12 10.875zm.75-6.376l3.75.001v2.25l-1.022.854a7.45 7.45 0 00-2.728-.817V4.5zm-1.5 0v2.288a7.451 7.451 0 00-2.727.816L7.5 6.75V4.5h3.75z"></path> </svg> </span> </div> <span class="color-base-30 px-2 m:pl-0" role="presentation">•</span> <a href="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467#comment-10a8b" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T13:54:16Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-463955" aria-controls="comment-dropdown-463955" aria-expanded="false" class="dropbtn comment__dropdown-trigger crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon " aria-label="Toggle dropdown menu" aria-haspopup="true"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="a55fkx7asftx42wopeh2fkcwsm7uahy1" class="crayons-icon pointer-events-none"><title id="a55fkx7asftx42wopeh2fkcwsm7uahy1">Dropdown menu</title> <path fill-rule="evenodd" clip-rule="evenodd" d="M8.25 12a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm5.25 0a1.5 1.5 0 11-3 0 1.5 1.5 0 013 0zm3.75 1.5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z"></path> </svg> </button> <div id="comment-dropdown-463955" class="crayons-dropdown right-1 s:right-0 s:left-auto fs-base dropdown"> <ul class="m-0"> <li><a href="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467#comment-10a8b" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Alvaro Montoro's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="161327" data-action="settings-button" data-path="https://dev.to/alvaromontoro/comment/10a8b/settings" aria-label="Go to Alvaro Montoro's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="161327"> <button class="flex justify-between crayons-link crayons-link--block w-100 bg-transparent border-0 hide-comment" data-hide-type="hide" data-comment-id="463955" data-comment-url="https://dev.to/alvaromontoro/comment/10a8b" aria-label="Hide Alvaro Montoro's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/alvaromontoro/comment/10a8b/mod" aria-label="Moderate Alvaro Montoro's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/alvaromontoro/comment/10a8b" aria-label="Report Alvaro Montoro's comment as abusive or violating our code of conduct and/or terms and conditions"></li> <li class="current-user-actions"></li> </ul> </div> </div> </div> <div class=" comment__body text-styles text-styles--secondary body "> <p>Please, share the link when you publish the post; I will definitely read it. I was actually playing with a minimal CSS framework idea too (and created a <a href="https://github.com/alvaromontoro/almond.css" rel="nofollow">customizable classless CSS library</a>). In an Internet world where everything needs to be bigger, better, and noisier, the idea of a simple HTML+CSS sounds refreshing.</p> </div> </div> <script> </script> <footer class="comment__footer print-hidden"> <button class="crayons-tooltip__activator crayons-btn crayons-btn--ghost crayons-btn--icon-left crayons-btn--s mr-1 reaction-like inline-flex reaction-button" id="button-for-comment-463955" data-comment-id="463955" aria-label="like" data-tracking-name="comment_heart_button"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="an6iai5zdwo22x6yl24aiknv72kj6ql7" class="crayons-icon reaction-icon not-reacted"><title id="an6iai5zdwo22x6yl24aiknv72kj6ql7">Like comment: </title><path d="M18.884 12.595l.01.011L12 19.5l-6.894-6.894.01-.01A4.875 4.875 0 0112 5.73a4.875 4.875 0 016.884 6.865zM6.431 7.037a3.375 3.375 0 000 4.773L12 17.38l5.569-5.569a3.375 3.375 0 10-4.773-4.773L9.613 10.22l-1.06-1.062 2.371-2.372a3.375 3.375 0 00-4.492.25v.001z"></path></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" role="img" aria-labelledby="an0buydsmbg68ip3vssdj4jbvwft0zqh" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="an0buydsmbg68ip3vssdj4jbvwft0zqh">Like comment: </title> <path d="M5.116 12.595a4.875 4.875 0 015.56-7.68h-.002L7.493 8.098l1.06 1.061 3.181-3.182a4.875 4.875 0 016.895 6.894L12 19.5l-6.894-6.894.01-.01z"></path> </svg> <span class="reactions-count">5</span><span class="reactions-label hidden m:inline-block"> likes</span> <span data-testid="tooltip" class="crayons-tooltip__content"> Like </span> </button> <a class="actions crayons-btn crayons-btn--ghost crayons-btn--s crayons-btn--icon-left toggle-reply-form mr-1 inline-flex" href="#/alvaromontoro/allow-end-user-styling-overrides-2467/comments/new/10a8b" data-comment-id="463955" data-path="/alvaromontoro/allow-end-user-styling-overrides-2467/comments/10a8b" data-tracking-name="comment_reply_button" data-testid="reply-button-463955" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="altjr2ibbfki77tu75bcygy9mr7uandk" class="crayons-icon reaction-icon not-reacted"><title id="altjr2ibbfki77tu75bcygy9mr7uandk">Comment button</title><path d="M10.5 5h3a6 6 0 110 12v2.625c-3.75-1.5-9-3.75-9-8.625a6 6 0 016-6zM12 15.5h1.5a4.501 4.501 0 001.722-8.657A4.5 4.5 0 0013.5 6.5h-3A4.5 4.5 0 006 11c0 2.707 1.846 4.475 6 6.36V15.5z"></path></svg> <span class="hidden m:inline-block">Reply</span> </a> </footer> </div> </div> </div> </details> </div> </details> </div> </div> <div class="align-center"> <nav class="fs-s align-center block" aria-label="Conduct controls"> <a href="/code-of-conduct" class="crayons-link crayons-link--secondary">Code of Conduct</a> <span class="opacity-25 px-2" role="presentation">•</span> <a href="/report-abuse" class="crayons-link crayons-link--secondary">Report abuse</a> </nav> </div> </section> <div id="hide-comments-modal" class="hidden"> <form id="hide-comments-modal__form" class="hide-comments-modal__form" data-type="json" action="/comments/hide" accept-charset="UTF-8" data-remote="true" method="post"><input name="utf8" type="hidden" value="✓" autocomplete="off" /><input type="hidden" name="_method" value="patch" autocomplete="off" /><input type="hidden" name="authenticity_token" value="OQlLOuh3CV1y2RkyFKb09ksI1zs8JBeuHNAwFXfwmuVpXfBYPD6pmMokYLYX709e8MS4WDWKXN01topUqdRfWQ" autocomplete="off" /> <div class="hide-comments-modal__content"> <p class="pb-2"> Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's <a id="hide-comments-modal__comment-permalink" href="#">permalink</a>. </p> <label class="crayons-field crayons-field--checkbox my-2"> <input name="hide_children" type="hidden" value="0" autocomplete="off" /><input class="hide_children crayons-checkbox" type="checkbox" value="1" name="hide_children" id="hide_children" /> <p class="crayons-field__label">Hide child comments as well</p> </label> <p class="pb-4 pt-2"> <button type="submit" class="crayons-btn"> Confirm </button> </p> </div> </form> <p class="fs-s color-base-60">For further actions, you may consider blocking this person and/or <a id="hide-comments-modal__report-link" href="/report-abuse">reporting abuse</a></p> </div> </article> <div class="pb-4 crayons-layout__comments-billboard"> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/alvaromontoro/allow-end-user-styling-overrides-2467/billboards/post_comments"></div> </div> <section class="crayons-card crayons-card--secondary text-padding mb-4 print-hidden" id="bottom-content-read-next"> <h2 class="crayons-subtitle-1">Read next</h2> <a href="/turingvangisms/css-vs-tailwind-css-5c62" data-preload-image="" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="turingvangisms profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2087125%2F52ff5c01-9178-4f32-b1ba-bf16f1753ed9.jpg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">CSS vs. Tailwind CSS</h3> <p class="opacity-75 pt-1"> Turing - <time datetime="2024-10-08T06:16:13Z">Oct 8</time> </p> </div> </div> </a> <a href="/stuffbreaker/you-should-be-shipping-a-manifest-with-your-web-components-2da0" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft8os6jsrtfwcw8uxlndp.png" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="stuffbreaker profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F87382%2F524f7820-0def-4bf8-bea4-2beaf247d75d.jpeg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">You Should Be Shipping a Manifest with Your Web Components</h3> <p class="opacity-75 pt-1"> Burton Smith - <time datetime="2024-11-07T13:48:16Z">Nov 7</time> </p> </div> </div> </a> <a href="/toychicken/using-hugo-render-hooks-to-make-links-bend-to-your-will-4j1e" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffdsgs0n7bhck34zhhcod.jpg" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="toychicken profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F202032%2Fdc75f675-734f-4c7c-904a-8807d7538ab5.jpeg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Using Hugo Render hooks to make links bend to your will</h3> <p class="opacity-75 pt-1"> Leigh Garland - <time datetime="2024-10-07T09:11:57Z">Oct 7</time> </p> </div> </div> </a> <a href="/guivr/tailconverter-a-browser-extension-to-convert-any-website-to-tailwind-css-2ifh" data-preload-image="https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ft5qufm6u5yra8ci3wt0w.jpg" class="crayons-link mt-6 block"> <div class="flex items-center"> <span class="crayons-avatar crayons-avatar--xl m:crayons-avatar--2xl mr-4 shrink-0"> <img loading="lazy" alt="guivr profile image" class="crayons-avatar__image" width="100" height="100" src="https://media2.dev.to/dynamic/image/width=100,height=100,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F91845%2F3e98732c-29cc-4acd-ac2d-a31c9bef4894.jpeg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">TailConverter, a browser extension to convert any website to Tailwind CSS</h3> <p class="opacity-75 pt-1"> Guilherme Rizzo - <time datetime="2024-10-07T10:41:16Z">Oct 7</time> </p> </div> </div> </a> </section> </div> </main> <aside class="crayons-layout__sidebar-right" aria-label="Author details"> <div class="crayons-article-sticky grid gap-4 pb-4 break-word" id="article-show-primary-sticky-nav"> <div class="crayons-card crayons-card--secondary branded-7 p-4 pt-0 gap-4 grid" style="border-top-color: #96c2c2;"> <div class="-mt-4"> <a href="/alvaromontoro" class="flex"> <span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"> <img src="https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F161327%2F2ff05281-db58-4dcb-946a-4b679e4a266b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Alvaro Montoro </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":161327,"name":"Alvaro Montoro"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Alvaro Montoro" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> CSS aficionado ⊆ Web Developer ⊆ Software Developer ⊆ Person (He/Him) </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Austin, TX </div> </li> <li> <div class="key"> Work </div> <div class="value"> UI Manager / CSS Aficionado </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-04-27T12:06:44Z" class="date">Apr 27, 2019</time> </div> </li> </ul> </div> </div> <div class="crayons-card crayons-card--secondary"> <header class="crayons-card__header"> <h3 class="crayons-subtitle-2"> More from <a href="/alvaromontoro">Alvaro Montoro</a> </h3> </header> <div> <a class="crayons-link crayons-link--contentful" href="/alvaromontoro/alvaro-montoro-presents-fun-with-flags-with-css-5034"> Alvaro Montoro Presents: Fun with Flags… with CSS <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>css</span> <span class="mr-1"><span class="opacity-50">#</span>html</span> <span class="mr-1"><span class="opacity-50">#</span>webdev</span> </div> </a> <a class="crayons-link crayons-link--contentful" href="/alvaromontoro/drawing-togos-flag-with-css-33nh"> Drawing Togo's Flag with CSS <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>css</span> <span class="mr-1"><span class="opacity-50">#</span>html</span> <span class="mr-1"><span class="opacity-50">#</span>webdev</span> </div> </a> <a class="crayons-link crayons-link--contentful" href="/alvaromontoro/10-cool-codepen-demos-october-2024-1li0"> 10 Cool CodePen Demos (October 2024) <div class="crayons-link__secondary -ml-1"> <span class="mr-1"><span class="opacity-50">#</span>css</span> <span class="mr-1"><span class="opacity-50">#</span>webdev</span> <span class="mr-1"><span class="opacity-50">#</span>showdev</span> <span class="mr-1"><span class="opacity-50">#</span>html</span> </div> </a> </div> </div> </div> <div class="crayons-article-sticky grid gap-4 break-word js-billboard-container" data-async-url="/alvaromontoro/allow-end-user-styling-overrides-2467/billboards/post_sidebar"></div> </aside> </div> <div class="mod-actions-menu print-hidden"></div> <div data-testid="unpublish-post-modal-container" class="unpublish-post-modal-container hidden"></div> <div class="fullscreen-code js-fullscreen-code"></div> <script src="https://assets.dev.to/assets/followButtons-f2455d1f50a862b83fa006b1953e3a1644598781243cae25d3e75b13c04184fd.js" defer="defer"></script> <script src="https://assets.dev.to/assets/billboard-a7ffd2b38d410444a4ef2d42c6ce905699d84b1520aed314b817a767ddc3b362.js" defer="defer"></script> <script src="https://assets.dev.to/assets/localizeArticleDates-70147c5c6bfe350b42e020ebb2a3dd37419d83978982b5a67b6389119bf162ac.js" defer="defer"></script> <script src="https://assets.dev.to/assets/articleReactions-79a44d82fb34a91c3987c24cfd3bcf2b0d38a02730b69ae6da297387d185f015.js" defer="defer"></script> <script> function activateRunkitTags() { if (!areAnyRunkitTagsPresent()) return var checkRunkit = setInterval(function() { try { dynamicallyLoadRunkitLibrary() if (typeof(RunKit) === 'undefined') { return } replaceTagContentsWithRunkitWidget() clearInterval(checkRunkit); } catch(e) { console.error(e); clearInterval(checkRunkit); } }, 200); } function isRunkitTagAlreadyActive(runkitTag) { return runkitTag.querySelector("iframe") !== null; }; function areAnyRunkitTagsPresent() { var presentRunkitTags = document.getElementsByClassName("runkit-element"); return presentRunkitTags.length > 0 } function replaceTagContentsWithRunkitWidget() { var targets = document.getElementsByClassName("runkit-element"); for (var i = 0; i < targets.length; i++) { if (isRunkitTagAlreadyActive(targets[i])) { continue; } var wrapperContent = targets[i].textContent; if (/^(<iframe src)/.test(wrapperContent) === false) { if (targets[i].children.length > 0) { var preamble = targets[i].children[0].textContent; var content = targets[i].children[1].textContent; targets[i].innerHTML = ""; var notebook = RunKit.createNotebook({ element: targets[i], source: content, preamble: preamble }); } } } }; function dynamicallyLoadRunkitLibrary() { if (typeof(dynamicallyLoadScript) === "undefined") return dynamicallyLoadScript("//embed.runkit.com") } activateRunkitTags(); </script> <div class="js-billboard-container pb-4 crayons-layout__comments-billboard" data-async-url="/alvaromontoro/allow-end-user-styling-overrides-2467/billboards/post_fixed_bottom"></div> <div id="runtime-banner-container"></div> </div> </div> <footer id="footer" class="crayons-footer print-hidden"> <div id="footer-container" class="crayons-footer__container"> <div style="" data-display-unit data-id="146443" data-category-click="click" data-category-impression="impression" data-context-type="home" data-special="nothing" data-article-id="" data-type-of="in_house"> <p style="font-weight: bold;margin-bottom: 10px"> Thank you to our Diamond Sponsor <a href="https://neon.tech/">Neon</a> for supporting our community. </p> </div> <p class="fs-s crayons-footer__description"> <a class="c-link c-link--branded fw-medium" aria-label="DEV Community Home" href="/">DEV Community</a> — A constructive and inclusive social network for software developers. With you every step of your journey. </p> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/"> Home </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/++"> DEV++ </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/pod"> Podcasts </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/videos"> Videos </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/tags"> Tags </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/help"> DEV Help </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="https://shop.forem.com/"> Forem Shop </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/advertise"> Advertise on DEV </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/challenges"> DEV Challenges </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/showcase"> DEV Showcase </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/about"> About </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/contact"> Contact </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/free-postgres-database-tier"> Free Postgres Database </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/guides"> Guides </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/software-comparisons"> Software comparisons </a> <span class="dot ml-2"></span> </li> </ul> <ul class="footer__nav-links flex gap-2 justify-center flex-wrap fs-s p-0" style="" /> <li class="footer__nav-link flex items-center"> <a href="/code-of-conduct"> Code of Conduct </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/privacy"> Privacy Policy </a> <span class="dot ml-2"></span> </li> <li class="footer__nav-link flex items-center"> <a href="/terms"> Terms of use </a> <span class="dot ml-2"></span> </li> </ul> <div class="fs-s"> <p>Built on <a class="c-link c-link--branded" target="_blank" rel="noopener" href="https://www.forem.com">Forem</a> — the <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/opensource">open source</a> software that powers <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to">DEV</a> and other inclusive communities.</p> <p>Made with love and <a target="_blank" rel="noopener" class="c-link c-link--branded" href="https://dev.to/t/rails">Ruby on Rails</a>. DEV Community <span title="copyright">©</span> 2016 - 2024.</p> </div> </div> </footer> <div id="snack-zone"></div> <div id="global-signup-modal" class="authentication-modal hidden"> <div class="authentication-modal__container"> <figure class="authentication-modal__image-container"> <img class="authentication-modal__image" src="https://media2.dev.to/dynamic/image/width=190,height=,fit=scale-down,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F8j7kvp660rqzt99zui8e.png" alt="DEV Community" loading="lazy" /> </figure> <div class="authentication-modal__content"> <p class="authentication-modal__description"> We're a place where coders share, stay up-to-date and grow their careers. </p> </div> <div class="authentication-modal__actions"> <a href="/enter" class="crayons-btn" aria-label="Log in" data-no-instant> Log in </a> <a href="/enter?state=new-user" class="crayons-btn crayons-btn--ghost-brand js-global-signup-modal__create-account" aria-label="Create new account" data-no-instant> Create account </a> </div> </div> </div> <script src="https://assets.dev.to/assets/signupModalShortcuts-0b25469b985100a01e94cbd7fccaf7f0a4d776e129aac65c766aa32cb28ab29a.js" defer="defer"></script> <div id="cookie-consent"></div> <div id="i18n-translations" data-translations="{"en":{"core":{"add_comment":"Add comment","beta":"beta","comment":"Comment","copy_link":"Copy link","edit_profile":"Edit profile","follow":"Follow","follow_back":"Follow back","following":"Following","like":"Like","loading":"loading...","reaction":"Reaction","report_abuse":"Report abuse","search":"Search","success_settings":"Successfully updated settings.","counted_organization":{"one":"%{count} organization","other":"%{count} organizations"},"counted_user":{"one":"%{count} person","other":"%{count} people"},"not_following":"You're not following anyone","following_everyone":"You're following %{details} (everyone)","you_are_following":"You're following","and":"and"}}}"></div> <div id="reaction-category-resources" class="hidden" aria-hidden="true"> <img data-name="Like" data-slug="like" data-position="1" src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18" /> <img data-name="Unicorn" data-slug="unicorn" data-position="2" src="https://assets.dev.to/assets/multi-unicorn-b44d6f8c23cdd00964192bedc38af3e82463978aa611b4365bd33a0f1f4f3e97.svg" width="18" height="18" /> <img data-name="Exploding Head" data-slug="exploding_head" data-position="3" src="https://assets.dev.to/assets/exploding-head-daceb38d627e6ae9b730f36a1e390fca556a4289d5a41abb2c35068ad3e2c4b5.svg" width="18" height="18" /> <img data-name="Raised Hands" data-slug="raised_hands" data-position="4" src="https://assets.dev.to/assets/raised-hands-74b2099fd66a39f2d7eed9305ee0f4553df0eb7b4f11b01b6b1b499973048fe5.svg" width="18" height="18" /> <img data-name="Fire" data-slug="fire" data-position="5" src="https://assets.dev.to/assets/fire-f60e7a582391810302117f987b22a8ef04a2fe0df7e3258a5f49332df1cec71e.svg" width="18" height="18" /> </div> </body> </html>

CINXE.COM

Allow end-user styling overrides - DEV Community