CSS Important: Using !important in CSS

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>CSS Important: Using !important in CSS - DEV Community</title> <meta name="last-updated" content="2024-12-03 01:48:29 UTC"> <meta name="user-signed-in" content="false"> <meta name="head-cached-at" content="1733190509"> <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/using-important-in-css-75c" /> <meta name="description" content="How to use !important in CSS to improve accessibility. 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/using-important-in-css-75c" /> <meta property="og:title" content="Using !important in CSS" /> <meta property="og:description" content="How to use !important in CSS to improve accessibility." /> <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="Using !important in CSS"> <meta name="twitter:description" content="How to use !important in CSS to improve accessibility."> <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%2Fzwtxmzgqv34auc5lxr0e.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%2Fzwtxmzgqv34auc5lxr0e.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="akdkrjh606u2stp14ztj2umv8medt7ct" class="crayons-icon"><title id="akdkrjh606u2stp14ztj2umv8medt7ct">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="aex0pxyrgyv68p4kw1i957ddhb2fdaxm" aria-hidden="true" class="crayons-icon"><title id="aex0pxyrgyv68p4kw1i957ddhb2fdaxm">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="ad7sooctswb8i219pb1v4bsjb4asrmy1" aria-hidden="true" class="crayons-icon"><title id="ad7sooctswb8i219pb1v4bsjb4asrmy1">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="agauz84h56984xlylrxi8z3jnci1uaqu" class="crayons-icon"><title id="agauz84h56984xlylrxi8z3jnci1uaqu">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="ajtg5it4aykqxt4xm2qtrqmeao3nsegz" aria-hidden="true" class="crayons-icon c-btn__icon"><title id="ajtg5it4aykqxt4xm2qtrqmeao3nsegz">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/using-important-in-css-75c"},"url":"https://dev.to/alvaromontoro/using-important-in-css-75c","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%2Fzwtxmzgqv34auc5lxr0e.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%2Fzwtxmzgqv34auc5lxr0e.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%2Fzwtxmzgqv34auc5lxr0e.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":"Using !important in CSS","author":{"@context":"http://schema.org","@type":"Person","url":"https://dev.to/alvaromontoro","name":"Alvaro Montoro"},"datePublished":"2020-06-13T13:43:44Z","dateModified":"2020-06-13T21:56:38Z"} </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="15"> <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="amyd0h1tcy89b2a76b7y4mc9cbk93r82" aria-hidden="true" class="crayons-icon dropdown-icon"><title id="amyd0h1tcy89b2a76b7y4mc9cbk93r82">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/using-important-in-css-75c"> <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="a9c2f7dp8njxz82l290du0to7wxrn5z" aria-hidden="true" class="crayons-icon mx-2 shrink-0"><title id="a9c2f7dp8njxz82l290du0to7wxrn5z">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=%22Using%20%21important%20in%20CSS%22%20by%20%40alvaro_montoro%20%23DEVCommunity%20https%3A%2F%2Fdev.to%2Falvaromontoro%2Fusing-important-in-css-75c'> 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%2Fusing-important-in-css-75c&title=Using%20%21important%20in%20CSS&summary=How%20to%20use%20%21important%20in%20CSS%20to%20improve%20accessibility.&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%2Fusing-important-in-css-75c"> 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%2Fusing-important-in-css-75c"> Share to Mastodon </a> </div> <web-share-wrapper shareurl="https://dev.to/alvaromontoro/using-important-in-css-75c" sharetitle="Using !important in CSS" sharetext="How to use !important in CSS to improve accessibility." 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="354178" data-article-slug="using-important-in-css-75c" data-author-id="161327" data-author-name="Alvaro Montoro" data-author-username="alvaromontoro" data-co-author-ids="" data-path="/alvaromontoro/using-important-in-css-75c" 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%2Fzwtxmzgqv34auc5lxr0e.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%2Fzwtxmzgqv34auc5lxr0e.png" style="aspect-ratio: auto 1000 / 420;" width="1000" height="420" class="crayons-article__cover__image" alt="Cover image for Using !important in CSS"> </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-13T13:43:44Z" class="date">Jun 13, 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"> <span class="fs-xl color-base-70 block">CSS Important</span> Using !important in CSS </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 " 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--active 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--active 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="354178" id="article-body"> <p><strong>Don't.</strong></p> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--CKS1gicA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/95hd8eatk5sxl30henwy.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--CKS1gicA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/i/95hd8eatk5sxl30henwy.png" alt="Blank image placed here to create some dramatic effect before I give an explanation of why !important should be avoided in CSS" loading="lazy"></a></p> <p>You are still here, so I guess you were expecting a more detailed explanation... here it goes:</p> <p>The use of <code>!important</code> is considered <a href="https://uxengineer.com/css-specificity-avoid-important-css/">an anti-pattern</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity#The_!important_exception"><strong>bad practice</strong></a>. <code>!important</code> overrides all other declarations and makes the CSS code more difficult to maintain and debug. The only thing that can override an <code>!important</code> is another <code>!important</code>, and once you go down that road, it never stops.</p> <p>From a Web Accessibility perspective, the use of <strong><code>!important</code> is negative because it would <a href="https://dev.to/alvaromontoro/allow-end-user-styling-overrides-2467">override the end-user defined styling</a></strong>. And there are multiple cases in which users –and especially users with disabilities– may want to override some of the CSS properties (e.g. to enlarge the font size, or change the font-family, or even change the distribution and position of elements in a page.)</p> <p>What can developers do instead of using <code>!important</code>?</p> <ul> <li>Use more <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">specific selectors</a>: add the element tag before the class/id name, or a new class name... anything that increases the <a href="https://specificity.keegan.st/">specificity</a> of the selector.</li> <li>Take advantage of the CSS cascade: if needed, restructure the CSS and move the CSS rules, as if two rules have the same specificity, the one that appears later "wins."</li> </ul> <hr> <p>Note: as specified in the comments, there are some cases in which <code>!important</code> may be useful (e.g. <a href="https://csswizardry.com/2016/05/the-importance-of-important/">forcing immutability in utility classes</a>, styling email campaigns, or in the end-user styles), but in general –and for the purpose of accessibility– it is better to avoid <code>!important</code> because it takes away power from the users to customize the experience to better fit their needs.</p> <hr> <p><strong>Avoid using <code>!important</code> in CSS.</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 " 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--active 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--active 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/using-important-in-css-75c/billboards/post_body_bottom"></div> </div> <section id="comments" data-follow-button-container="true" data-updated-at="2024-12-03 01:48:29 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="15">(15)</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="354178" 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="354178" 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-1 root " 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="at7ikk0jvdea5a8kxp8diyrp2n3d929h" class="crayons-icon expanded"><title id="at7ikk0jvdea5a8kxp8diyrp2n3d929h">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="ag223x5ki04pz2qd7nwwud8u0ej6cvvd" class="crayons-icon collapsed"><title id="ag223x5ki04pz2qd7nwwud8u0ej6cvvd">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-464044" class=" comment single-comment-node root comment--deep-1 " data-comment-id="464044" data-path="/alvaromontoro/using-important-in-css-75c/comments/10abm" data-comment-author-id="161327" data-content-user-id="161327"> <a name="comment-10abm" 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-464044" aria-controls="comment-profile-preview-content-464044" 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-464044" 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/using-important-in-css-75c#comment-10abm" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T16:07:36Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464044" aria-controls="comment-dropdown-464044" 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="a5f9y8t98turwl5xnddo5osz0iqtguob" class="crayons-icon pointer-events-none"><title id="a5f9y8t98turwl5xnddo5osz0iqtguob">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-464044" 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/using-important-in-css-75c#comment-10abm" 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/10abm/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="464044" data-comment-url="https://dev.to/alvaromontoro/comment/10abm" 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/10abm/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/10abm" 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>I agree that there are some cases in which <code>!important</code> could be interesting (and it will most definitely need to be used in the user-defined styles to override the ones from the site). But from an accessibility perspective, the idea of immutability (from the developer side) is dangerous, as it takes away power from the users to customize the experience to better fit their needs. Let me recheck the article, and I'll edit and add a note about it. </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-464044" data-comment-id="464044" 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="acbzq32vknyehpjzaafhwjdlsupo3g4k" class="crayons-icon reaction-icon not-reacted"><title id="acbzq32vknyehpjzaafhwjdlsupo3g4k">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="andiv0r9akv8jj9s2p8sizmjzb4qvfgm" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="andiv0r9akv8jj9s2p8sizmjzb4qvfgm">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">6</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/using-important-in-css-75c/comments/new/10abm" data-comment-id="464044" data-path="/alvaromontoro/using-important-in-css-75c/comments/10abm" data-tracking-name="comment_reply_button" data-testid="reply-button-464044" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aq9mvfbppf93uxz4cq363ffgncgb9ikn" class="crayons-icon reaction-icon not-reacted"><title id="aq9mvfbppf93uxz4cq363ffgncgb9ikn">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> <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="ah0vh14v2s3h18x7tqgvp7gd7uzaujuy" class="crayons-icon expanded"><title id="ah0vh14v2s3h18x7tqgvp7gd7uzaujuy">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="ae7p7zyzkuyohmvnuo52wa3hpfek7afy" class="crayons-icon collapsed"><title id="ae7p7zyzkuyohmvnuo52wa3hpfek7afy">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-464534" class=" comment single-comment-node root comment--deep-0 " data-comment-id="464534" data-path="/alvaromontoro/using-important-in-css-75c/comments/10b4i" data-comment-author-id="13122" data-content-user-id="13122"> <a name="comment-10b4i" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/guitarino" 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%2F13122%2F20163717.jpeg" alt="guitarino 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/guitarino" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Kirill Shestakov</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464534" aria-controls="comment-profile-preview-content-464534" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Kirill Shestakov profile details"> Kirill Shestakov </button> <div id="comment-profile-preview-content-464534" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #0b4442; 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="/guitarino" 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%2F13122%2F20163717.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Kirill Shestakov </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":13122,"name":"Kirill Shestakov"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Kirill Shestakov" aria-pressed="false">Follow</button> </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-03-24T06:11:30Z" class="date">Mar 24, 2017</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/using-important-in-css-75c#comment-10b4i" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-14T11:16:46Z" class=date-short-year> Jun 14 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464534" aria-controls="comment-dropdown-464534" 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="acj0qq3abo3jygth0h9oa892dhzfvwv6" class="crayons-icon pointer-events-none"><title id="acj0qq3abo3jygth0h9oa892dhzfvwv6">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-464534" 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/using-important-in-css-75c#comment-10b4i" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Kirill Shestakov's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="13122" data-action="settings-button" data-path="https://dev.to/guitarino/comment/10b4i/settings" aria-label="Go to Kirill Shestakov's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="13122"> <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="464534" data-comment-url="https://dev.to/guitarino/comment/10b4i" aria-label="Hide Kirill Shestakov's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/guitarino/comment/10b4i/mod" aria-label="Moderate Kirill Shestakov's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/guitarino/comment/10b4i" aria-label="Report Kirill Shestakov'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 believe there is no valid use cases for <code>!important</code>. Your suggestions on the alternatives are top-notch, and following these usually makes your code cleaner.</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-464534" data-comment-id="464534" 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="a39zt029anfuo64s28iy0tknhq6qfp2w" class="crayons-icon reaction-icon not-reacted"><title id="a39zt029anfuo64s28iy0tknhq6qfp2w">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="ac6wmv76nkz04bj28yy0rz2tayvas2mq" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ac6wmv76nkz04bj28yy0rz2tayvas2mq">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/using-important-in-css-75c/comments/new/10b4i" data-comment-id="464534" data-path="/alvaromontoro/using-important-in-css-75c/comments/10b4i" data-tracking-name="comment_reply_button" data-testid="reply-button-464534" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aswf1kcqa7rpw0038vnzn010g3p854uh" class="crayons-icon reaction-icon not-reacted"><title id="aswf1kcqa7rpw0038vnzn010g3p854uh">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="a3fwf2q6zvs2x0ru0bz5qhf9qvxhfldy" class="crayons-icon expanded"><title id="a3fwf2q6zvs2x0ru0bz5qhf9qvxhfldy">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="aq7fu6vvhzoxt022lwapbpt3r4xas4ae" class="crayons-icon collapsed"><title id="aq7fu6vvhzoxt022lwapbpt3r4xas4ae">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-465340" class=" comment single-comment-node child comment--deep-1 " data-comment-id="465340" data-path="/alvaromontoro/using-important-in-css-75c/comments/10c9i" data-comment-author-id="164594" data-content-user-id="164594"> <a name="comment-10c9i" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/cguttweb" 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%2F164594%2F491d4044-8d2a-4a33-be1b-5af3ad666b17.png" alt="cguttweb 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/cguttweb" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Chloe</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-465340" aria-controls="comment-profile-preview-content-465340" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Chloe profile details"> Chloe </button> <div id="comment-profile-preview-content-465340" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #b40000; 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="/cguttweb" 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%2F164594%2F491d4044-8d2a-4a33-be1b-5af3ad666b17.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Chloe </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":164594,"name":"Chloe"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Chloe" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Web developer looking to develop my skills further particularly around JavaScript and Vue/Nuxt </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> UK </div> </li> <li> <div class="key"> Education </div> <div class="value"> Self taught </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-05-06T17:16:13Z" class="date">May 6, 2019</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/using-important-in-css-75c#comment-10c9i" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-15T12:20:35Z" class=date-short-year> Jun 15 '20 </time> <span class="hidden m:inline-block">• Edited on <time datetime="2020-06-15T12:20:49Z" class="date-no-year">Jun 15</time></span> <span class="m:hidden">• Edited</span> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-465340" aria-controls="comment-dropdown-465340" 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="a5stzfu2pn3zygo77bd9x99dq06t1tmu" class="crayons-icon pointer-events-none"><title id="a5stzfu2pn3zygo77bd9x99dq06t1tmu">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-465340" 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/using-important-in-css-75c#comment-10c9i" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Chloe's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="164594" data-action="settings-button" data-path="https://dev.to/cguttweb/comment/10c9i/settings" aria-label="Go to Chloe's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="164594"> <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="465340" data-comment-url="https://dev.to/cguttweb/comment/10c9i" aria-label="Hide Chloe's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/cguttweb/comment/10c9i/mod" aria-label="Moderate Chloe's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/cguttweb/comment/10c9i" aria-label="Report Chloe'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>You've clearly never built an HTML email :) inline styles for Outlook so need to use <code>!important</code> to overwrite them... horrible but in this case necessary. </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-465340" data-comment-id="465340" 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="a3y8i6zjekwq2z1drl7yhp9vi6opj8gv" class="crayons-icon reaction-icon not-reacted"><title id="a3y8i6zjekwq2z1drl7yhp9vi6opj8gv">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="avt7e9chzskhjx4kgr2yix227u20d5a" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="avt7e9chzskhjx4kgr2yix227u20d5a">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">1</span><span class="reactions-label hidden m:inline-block"> like</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/using-important-in-css-75c/comments/new/10c9i" data-comment-id="465340" data-path="/alvaromontoro/using-important-in-css-75c/comments/10c9i" data-tracking-name="comment_reply_button" data-testid="reply-button-465340" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="aj29mc1n6ofnt3b9z1kztoe048zo03nk" class="crayons-icon reaction-icon not-reacted"><title id="aj29mc1n6ofnt3b9z1kztoe048zo03nk">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> <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="aeae3xmeu16a3dvmoifhkmprprms8q4d" class="crayons-icon expanded"><title id="aeae3xmeu16a3dvmoifhkmprprms8q4d">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="aebv6za178tlbdjz0v51vna0fl9bsf3n" class="crayons-icon collapsed"><title id="aebv6za178tlbdjz0v51vna0fl9bsf3n">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-464210" class=" comment single-comment-node root comment--deep-0 " data-comment-id="464210" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ai6" data-comment-author-id="201592" data-content-user-id="201592"> <a name="comment-10ai6" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/vuelancer" 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%2F201592%2F5357e3eb-61f0-44f7-9b24-8a700ea2a026.jpg" alt="vuelancer 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/vuelancer" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Vuelancer</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464210" aria-controls="comment-profile-preview-content-464210" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Vuelancer profile details"> Vuelancer </button> <div id="comment-profile-preview-content-464210" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #000000; 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="/vuelancer" 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%2F201592%2F5357e3eb-61f0-44f7-9b24-8a700ea2a026.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Vuelancer </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":201592,"name":"Vuelancer"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Vuelancer" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> 150k+ views | Full-stack developer | 6+ years of experience | Youtube content creator </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Email </div> <div class="value"> <a href="mailto:selvakumardhivakar@gmail.com">selvakumardhivakar@gmail.com</a> </div> </li> <li> <div class="key"> Location </div> <div class="value"> India </div> </li> <li> <div class="key"> Education </div> <div class="value"> Computer Science and Engineering </div> </li> <li> <div class="key"> Pronouns </div> <div class="value"> he </div> </li> <li> <div class="key"> Work </div> <div class="value"> Full-stack developer </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-07-25T16:53:38Z" class="date">Jul 25, 2019</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/using-important-in-css-75c#comment-10ai6" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T21:13:47Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464210" aria-controls="comment-dropdown-464210" 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="anqsm38w3i55pkk2zx4w9j8so8e8w67q" class="crayons-icon pointer-events-none"><title id="anqsm38w3i55pkk2zx4w9j8so8e8w67q">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-464210" 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/using-important-in-css-75c#comment-10ai6" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Vuelancer's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="201592" data-action="settings-button" data-path="https://dev.to/vuelancer/comment/10ai6/settings" aria-label="Go to Vuelancer's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="201592"> <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="464210" data-comment-url="https://dev.to/vuelancer/comment/10ai6" aria-label="Hide Vuelancer's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/vuelancer/comment/10ai6/mod" aria-label="Moderate Vuelancer's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/vuelancer/comment/10ai6" aria-label="Report Vuelancer'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>inline styles will replace !important </p> <p>I learnt this by the video trivia by web dev simplified and kevin powell!</p> <p>And kevin as a CSS Mastermind lost to this question... Very bad!</p> <p>But, Kevin is the CSS Master!</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-464210" data-comment-id="464210" 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="aogyugzg4o3d85fhuqie3n99q7pzy61e" class="crayons-icon reaction-icon not-reacted"><title id="aogyugzg4o3d85fhuqie3n99q7pzy61e">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="a9iwwvd7nbwgqusgy3hj3upvssw6rid8" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a9iwwvd7nbwgqusgy3hj3upvssw6rid8">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">1</span><span class="reactions-label hidden m:inline-block"> like</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/using-important-in-css-75c/comments/new/10ai6" data-comment-id="464210" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ai6" data-tracking-name="comment_reply_button" data-testid="reply-button-464210" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a3yx9bc8on2vxqrsid7fl0tt7vvjd2o6" class="crayons-icon reaction-icon not-reacted"><title id="a3yx9bc8on2vxqrsid7fl0tt7vvjd2o6">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="apt7wkz7mu7psqmyqp0r4g6kmh28ozi4" class="crayons-icon expanded"><title id="apt7wkz7mu7psqmyqp0r4g6kmh28ozi4">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="atpmh4441xy7vrccdp3k1zoiqvuwdfre" class="crayons-icon collapsed"><title id="atpmh4441xy7vrccdp3k1zoiqvuwdfre">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-464233" class=" comment single-comment-node child comment--deep-1 " data-comment-id="464233" data-path="/alvaromontoro/using-important-in-css-75c/comments/10aj3" data-comment-author-id="161327" data-content-user-id="161327"> <a name="comment-10aj3" 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-464233" aria-controls="comment-profile-preview-content-464233" 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-464233" 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/using-important-in-css-75c#comment-10aj3" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T21:36:47Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464233" aria-controls="comment-dropdown-464233" 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="ahf1wnjcyk6p6lffq10is7ugv69irc9m" class="crayons-icon pointer-events-none"><title id="ahf1wnjcyk6p6lffq10is7ugv69irc9m">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-464233" 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/using-important-in-css-75c#comment-10aj3" 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/10aj3/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="464233" data-comment-url="https://dev.to/alvaromontoro/comment/10aj3" 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/10aj3/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/10aj3" 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>Wait...<code>!important</code> will trump inline styles 🤔</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-464233" data-comment-id="464233" 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="athzmfokgke4twmmwav8d4lx8c5unqt" class="crayons-icon reaction-icon not-reacted"><title id="athzmfokgke4twmmwav8d4lx8c5unqt">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="ag6zb3icso9h9rp1y5k32mcki1rz1d48" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ag6zb3icso9h9rp1y5k32mcki1rz1d48">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/using-important-in-css-75c/comments/new/10aj3" data-comment-id="464233" data-path="/alvaromontoro/using-important-in-css-75c/comments/10aj3" data-tracking-name="comment_reply_button" data-testid="reply-button-464233" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="anpwrw0g0hdytbu3sx7k6k2ny9yo5ofy" class="crayons-icon reaction-icon not-reacted"><title id="anpwrw0g0hdytbu3sx7k6k2ny9yo5ofy">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-2 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="ae5dlw0g4ajd6hmje7ypp690i7hk5zyh" class="crayons-icon expanded"><title id="ae5dlw0g4ajd6hmje7ypp690i7hk5zyh">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="ahtq5k546mfw8rcg1x42jq5856lo27gl" class="crayons-icon collapsed"><title id="ahtq5k546mfw8rcg1x42jq5856lo27gl">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-464294" class=" comment single-comment-node child comment--deep-2 " data-comment-id="464294" data-path="/alvaromontoro/using-important-in-css-75c/comments/10alc" data-comment-author-id="161327" data-content-user-id="161327"> <a name="comment-10alc" 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-464294" aria-controls="comment-profile-preview-content-464294" 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-464294" 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/using-important-in-css-75c#comment-10alc" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-14T00:16:12Z" class=date-short-year> Jun 14 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464294" aria-controls="comment-dropdown-464294" 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="a1qfvy0or48qcb0xfj5hezobs9bqy8bg" class="crayons-icon pointer-events-none"><title id="a1qfvy0or48qcb0xfj5hezobs9bqy8bg">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-464294" 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/using-important-in-css-75c#comment-10alc" 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/10alc/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="464294" data-comment-url="https://dev.to/alvaromontoro/comment/10alc" 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/10alc/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/10alc" 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>You made me doubt for a second, so I created an <a href="https://jsfiddle.net/alvaromontoro/k9b1wshd/2/" rel="nofollow">example of it</a> for another comment: <code>!important</code> does override inline styles.</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-464294" data-comment-id="464294" 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="abtopw5t8zcbhm75viiln89kq6nsmrqu" class="crayons-icon reaction-icon not-reacted"><title id="abtopw5t8zcbhm75viiln89kq6nsmrqu">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="anm38tts751ldelxiabugul2406sybj2" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="anm38tts751ldelxiabugul2406sybj2">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">6</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/using-important-in-css-75c/comments/new/10alc" data-comment-id="464294" data-path="/alvaromontoro/using-important-in-css-75c/comments/10alc" data-tracking-name="comment_reply_button" data-testid="reply-button-464294" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ade93t3lkj0aj2pccmgh95jzlmrq3bl5" class="crayons-icon reaction-icon not-reacted"><title id="ade93t3lkj0aj2pccmgh95jzlmrq3bl5">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> <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="aarvvtyx91vz0fez81q7xyrblpz1b5ee" class="crayons-icon expanded"><title id="aarvvtyx91vz0fez81q7xyrblpz1b5ee">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="anpihk9g0wywlv7nr6o2pa33il7956ab" class="crayons-icon collapsed"><title id="anpihk9g0wywlv7nr6o2pa33il7956ab">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-464231" class=" comment single-comment-node child comment--deep-1 " data-comment-id="464231" data-path="/alvaromontoro/using-important-in-css-75c/comments/10aj1" data-comment-author-id="171183" data-content-user-id="171183"> <a name="comment-10aj1" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/alohci" 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%2F171183%2F2f3e63c8-4708-4388-8770-8252aab7e22a.JPG" alt="alohci 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/alohci" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Nicholas Stimpson</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464231" aria-controls="comment-profile-preview-content-464231" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Nicholas Stimpson profile details"> Nicholas Stimpson </button> <div id="comment-profile-preview-content-464231" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #4772e0; 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="/alohci" 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%2F171183%2F2f3e63c8-4708-4388-8770-8252aab7e22a.JPG" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Nicholas Stimpson </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":171183,"name":"Nicholas Stimpson"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Nicholas Stimpson" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Full Stack Software Engineer or jobbing programmer. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Luton, England </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-05-24T00:49:16Z" class="date">May 24, 2019</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/using-important-in-css-75c#comment-10aj1" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T21:32:56Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464231" aria-controls="comment-dropdown-464231" 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="aqjani9k4xvs8sud2x8c2w8u88ent80f" class="crayons-icon pointer-events-none"><title id="aqjani9k4xvs8sud2x8c2w8u88ent80f">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-464231" 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/using-important-in-css-75c#comment-10aj1" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Nicholas Stimpson's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="171183" data-action="settings-button" data-path="https://dev.to/alohci/comment/10aj1/settings" aria-label="Go to Nicholas Stimpson's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="171183"> <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="464231" data-comment-url="https://dev.to/alohci/comment/10aj1" aria-label="Hide Nicholas Stimpson's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/alohci/comment/10aj1/mod" aria-label="Moderate Nicholas Stimpson's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/alohci/comment/10aj1" aria-label="Report Nicholas Stimpson'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>Actually I expect <a href="https://github.com/w3c/csswg-drafts/issues/5003" rel="nofollow">custom origins/cascade layers</a> to eventually replace most !important use. But it'll be some years before we can use them.</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-464231" data-comment-id="464231" 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="a5psu1sgnsdowiby9qxppn9vokfileih" class="crayons-icon reaction-icon not-reacted"><title id="a5psu1sgnsdowiby9qxppn9vokfileih">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="a7abfabwmlct4xr6wiyg0da17iewn9dp" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a7abfabwmlct4xr6wiyg0da17iewn9dp">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">2</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/using-important-in-css-75c/comments/new/10aj1" data-comment-id="464231" data-path="/alvaromontoro/using-important-in-css-75c/comments/10aj1" data-tracking-name="comment_reply_button" data-testid="reply-button-464231" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a5fl4w69pe8tgkk3hmak1uac4votwzws" class="crayons-icon reaction-icon not-reacted"><title id="a5fl4w69pe8tgkk3hmak1uac4votwzws">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> <details class="comment-wrapper js-comment-wrapper comment-wrapper--deep-1 root " 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="apc3ca82nb6zji78ec290cx8hhgfoend" class="crayons-icon expanded"><title id="apc3ca82nb6zji78ec290cx8hhgfoend">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="an73svfmmxc3icb7zwp0fmkzucqdhw6o" class="crayons-icon collapsed"><title id="an73svfmmxc3icb7zwp0fmkzucqdhw6o">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-464102" class=" comment single-comment-node root comment--deep-1 " data-comment-id="464102" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ae2" data-comment-author-id="3256" data-content-user-id="3256"> <a name="comment-10ae2" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/xowap" 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%2F3256%2Fde2f8a41-dad0-43cd-932e-9255cf615a81.jpg" alt="xowap 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/xowap" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Rémy 🤖</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464102" aria-controls="comment-profile-preview-content-464102" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Rémy 🤖 profile details"> Rémy 🤖 </button> <div id="comment-profile-preview-content-464102" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #010b1b; 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="/xowap" 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%2F3256%2Fde2f8a41-dad0-43cd-932e-9255cf615a81.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Rémy 🤖 </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":3256,"name":"Rémy 🤖"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Rémy 🤖" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> I spent my adolescence in Dreamweaver, my student years in Vim and my adult life in PyCharm. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Madrid </div> </li> <li> <div class="key"> Education </div> <div class="value"> Telecommunications Engineer </div> </li> <li> <div class="key"> Work </div> <div class="value"> CTO at WITH Madrid </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-02-16T19:01:38Z" class="date">Feb 16, 2017</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/using-important-in-css-75c#comment-10ae2" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T17:56:10Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464102" aria-controls="comment-dropdown-464102" 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="asdz83pesttzr0uj584whpunuox5veey" class="crayons-icon pointer-events-none"><title id="asdz83pesttzr0uj584whpunuox5veey">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-464102" 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/using-important-in-css-75c#comment-10ae2" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Rémy 🤖's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="3256" data-action="settings-button" data-path="https://dev.to/xowap/comment/10ae2/settings" aria-label="Go to Rémy 🤖's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="3256"> <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="464102" data-comment-url="https://dev.to/xowap/comment/10ae2" aria-label="Hide Rémy 🤖's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/xowap/comment/10ae2/mod" aria-label="Moderate Rémy 🤖's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/xowap/comment/10ae2" aria-label="Report Rémy 🤖'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>Look I'm not saying that <code>!important</code> is a dangerous anti-pattern, but in 10 years developing websites as my main revenue source the only times I've had to use it is when someone else used it before (by example in a WordPress theme, if I had to pick at random).</p> <p>I get the point of your article about utility classes being all alone and depraved of specificity thus needing a bit of help from <code>!important</code> but that is <em>so</em> edge case, it should definitely be a last resort after you've exhausted your other last resort options.</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-464102" data-comment-id="464102" 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="akw44fguj0h9d353pf5bubpidjfiy20u" class="crayons-icon reaction-icon not-reacted"><title id="akw44fguj0h9d353pf5bubpidjfiy20u">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="a690lnvphgvnx7f4q83gat2qsqmglm42" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a690lnvphgvnx7f4q83gat2qsqmglm42">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">1</span><span class="reactions-label hidden m:inline-block"> like</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/using-important-in-css-75c/comments/new/10ae2" data-comment-id="464102" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ae2" data-tracking-name="comment_reply_button" data-testid="reply-button-464102" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a9h0qwnf5c7f2afjzj6ary3xbrcrazve" class="crayons-icon reaction-icon not-reacted"><title id="a9h0qwnf5c7f2afjzj6ary3xbrcrazve">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 class="js-billboard-container mid-comments-billboard-container pb-6" data-async-url="/alvaromontoro/using-important-in-css-75c/billboards/post_comments_mid"></div> <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="af0qcsy0hohvug8k6wnz10nb9f65ewby" class="crayons-icon expanded"><title id="af0qcsy0hohvug8k6wnz10nb9f65ewby">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="at4n1e2lrcsu8khfdc170aorc63j0pqb" class="crayons-icon collapsed"><title id="at4n1e2lrcsu8khfdc170aorc63j0pqb">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-464611" class=" comment single-comment-node root comment--deep-0 " data-comment-id="464611" data-path="/alvaromontoro/using-important-in-css-75c/comments/10b7h" data-comment-author-id="94715" data-content-user-id="94715"> <a name="comment-10b7h" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/adam_cyclones" 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%2F94715%2F4385c9ee-bcd6-4b9f-a486-e4a17f61ab40.jpeg" alt="adam_cyclones 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/adam_cyclones" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Adam Crockett 🌀</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464611" aria-controls="comment-profile-preview-content-464611" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Adam Crockett 🌀 profile details"> Adam Crockett 🌀 </button> <div id="comment-profile-preview-content-464611" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #23bbb2; 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="/adam_cyclones" 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%2F94715%2F4385c9ee-bcd6-4b9f-a486-e4a17f61ab40.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Adam Crockett 🌀 </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":94715,"name":"Adam Crockett 🌀"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Adam Crockett 🌀" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> How’s it going, I'm a Adam, a Full-Stack Engineer, actively searching for work. I'm all about JavaScript. And Frontend but don't let that fool you - I've also got some serious Backend skills. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> City of Bath, UK 🇬🇧 </div> </li> <li> <div class="key"> Education </div> <div class="value"> 10 plus years* active enterprise development experience and a Fine art degree 🎨 </div> </li> <li> <div class="key"> Work </div> <div class="value"> Web Development Consultant at ForgeRock </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2018-08-21T16:54:04Z" class="date">Aug 21, 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/using-important-in-css-75c#comment-10b7h" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-14T13:05:19Z" class=date-short-year> Jun 14 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464611" aria-controls="comment-dropdown-464611" 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="a1gezuag26d6fgim53npnlihuxn18o3z" class="crayons-icon pointer-events-none"><title id="a1gezuag26d6fgim53npnlihuxn18o3z">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-464611" 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/using-important-in-css-75c#comment-10b7h" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Adam Crockett 🌀's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="94715" data-action="settings-button" data-path="https://dev.to/adam_cyclones/comment/10b7h/settings" aria-label="Go to Adam Crockett 🌀's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="94715"> <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="464611" data-comment-url="https://dev.to/adam_cyclones/comment/10b7h" aria-label="Hide Adam Crockett 🌀's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/adam_cyclones/comment/10b7h/mod" aria-label="Moderate Adam Crockett 🌀's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/adam_cyclones/comment/10b7h" aria-label="Report Adam Crockett 🌀'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>Important is not bad it's the situation that leads to this being used that's bad. In a JavaScript context it has some uses I suppose. </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-464611" data-comment-id="464611" 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="agtt1x0sc0ygrgvha1gy2qup3ralr73a" class="crayons-icon reaction-icon not-reacted"><title id="agtt1x0sc0ygrgvha1gy2qup3ralr73a">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="ai737elv6sqepyc6d6woslo0v7nmi367" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ai737elv6sqepyc6d6woslo0v7nmi367">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">2</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/using-important-in-css-75c/comments/new/10b7h" data-comment-id="464611" data-path="/alvaromontoro/using-important-in-css-75c/comments/10b7h" data-tracking-name="comment_reply_button" data-testid="reply-button-464611" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="afmlmmvpvnh9humwb2qty3i7bxvz6ccl" class="crayons-icon reaction-icon not-reacted"><title id="afmlmmvpvnh9humwb2qty3i7bxvz6ccl">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> <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="aada5rzll6sjh4ajof51hanjcv3j6zhu" class="crayons-icon expanded"><title id="aada5rzll6sjh4ajof51hanjcv3j6zhu">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="a20fat6z0mpif25u3aho8ftxv87yo114" class="crayons-icon collapsed"><title id="a20fat6z0mpif25u3aho8ftxv87yo114">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-464092" class=" comment single-comment-node root comment--deep-0 " data-comment-id="464092" data-path="/alvaromontoro/using-important-in-css-75c/comments/10adi" data-comment-author-id="3256" data-content-user-id="3256"> <a name="comment-10adi" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/xowap" 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%2F3256%2Fde2f8a41-dad0-43cd-932e-9255cf615a81.jpg" alt="xowap 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/xowap" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Rémy 🤖</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464092" aria-controls="comment-profile-preview-content-464092" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Rémy 🤖 profile details"> Rémy 🤖 </button> <div id="comment-profile-preview-content-464092" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #010b1b; 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="/xowap" 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%2F3256%2Fde2f8a41-dad0-43cd-932e-9255cf615a81.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Rémy 🤖 </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":3256,"name":"Rémy 🤖"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Rémy 🤖" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> I spent my adolescence in Dreamweaver, my student years in Vim and my adult life in PyCharm. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Madrid </div> </li> <li> <div class="key"> Education </div> <div class="value"> Telecommunications Engineer </div> </li> <li> <div class="key"> Work </div> <div class="value"> CTO at WITH Madrid </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2017-02-16T19:01:38Z" class="date">Feb 16, 2017</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/using-important-in-css-75c#comment-10adi" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T17:47:43Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464092" aria-controls="comment-dropdown-464092" 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="at2jicr9j2kiw1say2hhff5mpgma0rvc" class="crayons-icon pointer-events-none"><title id="at2jicr9j2kiw1say2hhff5mpgma0rvc">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-464092" 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/using-important-in-css-75c#comment-10adi" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Rémy 🤖's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="3256" data-action="settings-button" data-path="https://dev.to/xowap/comment/10adi/settings" aria-label="Go to Rémy 🤖's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="3256"> <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="464092" data-comment-url="https://dev.to/xowap/comment/10adi" aria-label="Hide Rémy 🤖's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/xowap/comment/10adi/mod" aria-label="Moderate Rémy 🤖's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/xowap/comment/10adi" aria-label="Report Rémy 🤖'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>After seeing the title I was hoping so hard for this first paragraph to be there, thank you for making my dreams true.</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-464092" data-comment-id="464092" 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="aaa26qa4imt96t93vzr8f977q0ucnixk" class="crayons-icon reaction-icon not-reacted"><title id="aaa26qa4imt96t93vzr8f977q0ucnixk">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="amrobgnqazeuje90erw98zpi5no2hpk7" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="amrobgnqazeuje90erw98zpi5no2hpk7">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">2</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/using-important-in-css-75c/comments/new/10adi" data-comment-id="464092" data-path="/alvaromontoro/using-important-in-css-75c/comments/10adi" data-tracking-name="comment_reply_button" data-testid="reply-button-464092" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="an8oa886ib8p23dumh344xgdr39v4fx6" class="crayons-icon reaction-icon not-reacted"><title id="an8oa886ib8p23dumh344xgdr39v4fx6">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> <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="aul6kkb4sylikcib6h95q8aj8faylkl" class="crayons-icon expanded"><title id="aul6kkb4sylikcib6h95q8aj8faylkl">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="ajc75hhpp6yiqj928zjjc1st9gydwo07" class="crayons-icon collapsed"><title id="ajc75hhpp6yiqj928zjjc1st9gydwo07">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-464101" class=" comment single-comment-node root comment--deep-0 " data-comment-id="464101" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ae1" data-comment-author-id="164594" data-content-user-id="164594"> <a name="comment-10ae1" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/cguttweb" 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%2F164594%2F491d4044-8d2a-4a33-be1b-5af3ad666b17.png" alt="cguttweb 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/cguttweb" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Chloe</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464101" aria-controls="comment-profile-preview-content-464101" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Chloe profile details"> Chloe </button> <div id="comment-profile-preview-content-464101" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #b40000; 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="/cguttweb" 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%2F164594%2F491d4044-8d2a-4a33-be1b-5af3ad666b17.png" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Chloe </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":164594,"name":"Chloe"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Chloe" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> Web developer looking to develop my skills further particularly around JavaScript and Vue/Nuxt </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> UK </div> </li> <li> <div class="key"> Education </div> <div class="value"> Self taught </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-05-06T17:16:13Z" class="date">May 6, 2019</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/using-important-in-css-75c#comment-10ae1" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T17:54:15Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464101" aria-controls="comment-dropdown-464101" 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="afgl8iujjsbi6assxjc11r7ughvh8gfb" class="crayons-icon pointer-events-none"><title id="afgl8iujjsbi6assxjc11r7ughvh8gfb">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-464101" 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/using-important-in-css-75c#comment-10ae1" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Chloe's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="164594" data-action="settings-button" data-path="https://dev.to/cguttweb/comment/10ae1/settings" aria-label="Go to Chloe's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="164594"> <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="464101" data-comment-url="https://dev.to/cguttweb/comment/10ae1" aria-label="Hide Chloe's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/cguttweb/comment/10ae1/mod" aria-label="Moderate Chloe's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/cguttweb/comment/10ae1" aria-label="Report Chloe'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>Agree however I do use !important a fair bit in the work I do with HTML emails because Outlook..., but I tend to avoid in anything else. </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-464101" data-comment-id="464101" 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="ahr1f6ozcfw3s03147vdn4h0u86l3zm7" class="crayons-icon reaction-icon not-reacted"><title id="ahr1f6ozcfw3s03147vdn4h0u86l3zm7">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="anv70wabjmf24sm22hoi6o63j2dds01i" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="anv70wabjmf24sm22hoi6o63j2dds01i">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">2</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/using-important-in-css-75c/comments/new/10ae1" data-comment-id="464101" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ae1" data-tracking-name="comment_reply_button" data-testid="reply-button-464101" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="affk8w9z4wf6dq9ujtquqvnr4jcw7eck" class="crayons-icon reaction-icon not-reacted"><title id="affk8w9z4wf6dq9ujtquqvnr4jcw7eck">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> <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="a6l0x5h8wocs96rgvqqcdzlpqgr8p7ha" class="crayons-icon expanded"><title id="a6l0x5h8wocs96rgvqqcdzlpqgr8p7ha">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="am8ifurikycohhiq7gyllsbyu2g86yoz" class="crayons-icon collapsed"><title id="am8ifurikycohhiq7gyllsbyu2g86yoz">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-464287" class=" comment single-comment-node root comment--deep-0 " data-comment-id="464287" data-path="/alvaromontoro/using-important-in-css-75c/comments/10al5" data-comment-author-id="300278" data-content-user-id="300278"> <a name="comment-10al5" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/urielbitton" 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%2F300278%2Fb747ae00-0959-48dd-bed2-e7d478c72ed5.jpg" alt="urielbitton 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/urielbitton" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Uriel Bitton</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464287" aria-controls="comment-profile-preview-content-464287" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Uriel Bitton profile details"> Uriel Bitton </button> <div id="comment-profile-preview-content-464287" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #148be0; 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="/urielbitton" 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%2F300278%2Fb747ae00-0959-48dd-bed2-e7d478c72ed5.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Uriel Bitton </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":300278,"name":"Uriel Bitton"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Uriel Bitton" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> AWS Solutions Architect & Engineer. I write about AWS services, serverless technology, architecture, and MVP Design & Web Development. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Email </div> <div class="value"> <a href="mailto:urielas@hotmail.com">urielas@hotmail.com</a> </div> </li> <li> <div class="key"> Location </div> <div class="value"> Montreal, Canada </div> </li> <li> <div class="key"> Education </div> <div class="value"> Software Engineer at Concordia University, Montreal, Canada </div> </li> <li> <div class="key"> Work </div> <div class="value"> AWS Solutions Architect, Cloud Engineer and Consultant </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-12-24T17:56:41Z" class="date">Dec 24, 2019</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/using-important-in-css-75c#comment-10al5" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-14T00:00:35Z" class=date-short-year> Jun 14 '20 </time> <span class="hidden m:inline-block">• Edited on <time datetime="2020-06-14T00:10:01Z" class="date-no-year">Jun 14</time></span> <span class="m:hidden">• Edited</span> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464287" aria-controls="comment-dropdown-464287" 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="abj68c71jkxjsfei7crh2x4ceq6zyjqf" class="crayons-icon pointer-events-none"><title id="abj68c71jkxjsfei7crh2x4ceq6zyjqf">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-464287" 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/using-important-in-css-75c#comment-10al5" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Uriel Bitton's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="300278" data-action="settings-button" data-path="https://dev.to/urielbitton/comment/10al5/settings" aria-label="Go to Uriel Bitton's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="300278"> <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="464287" data-comment-url="https://dev.to/urielbitton/comment/10al5" aria-label="Hide Uriel Bitton's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/urielbitton/comment/10al5/mod" aria-label="Moderate Uriel Bitton's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/urielbitton/comment/10al5" aria-label="Report Uriel Bitton'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>Sometimes you need to apply styles to elements abstractly so you can't get specific with your selectors. <br> Also online styles will override !important if you add !important to the online style itself.</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-464287" data-comment-id="464287" 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="asysp2hh0td10ekt8buudc9189szvwph" class="crayons-icon reaction-icon not-reacted"><title id="asysp2hh0td10ekt8buudc9189szvwph">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="ajsgkg5lw3pg5s3c0rntp4695vdx29yo" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ajsgkg5lw3pg5s3c0rntp4695vdx29yo">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">1</span><span class="reactions-label hidden m:inline-block"> like</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/using-important-in-css-75c/comments/new/10al5" data-comment-id="464287" data-path="/alvaromontoro/using-important-in-css-75c/comments/10al5" data-tracking-name="comment_reply_button" data-testid="reply-button-464287" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ady5mume5ny1azbaveg6d26v7l9nut3b" class="crayons-icon reaction-icon not-reacted"><title id="ady5mume5ny1azbaveg6d26v7l9nut3b">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="a5o6arbdazjzcfs4qvf9n1m9gv3sd4m4" class="crayons-icon expanded"><title id="a5o6arbdazjzcfs4qvf9n1m9gv3sd4m4">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="a89cjcxqaqcrhh3qkqaqlb9djr1mrtx8" class="crayons-icon collapsed"><title id="a89cjcxqaqcrhh3qkqaqlb9djr1mrtx8">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-464293" class=" comment single-comment-node child comment--deep-1 " data-comment-id="464293" data-path="/alvaromontoro/using-important-in-css-75c/comments/10alb" data-comment-author-id="161327" data-content-user-id="161327"> <a name="comment-10alb" 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-464293" aria-controls="comment-profile-preview-content-464293" 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-464293" 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/using-important-in-css-75c#comment-10alb" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-14T00:12:44Z" class=date-short-year> Jun 14 '20 </time> <span class="hidden m:inline-block">• Edited on <time datetime="2020-06-14T00:13:23Z" class="date-no-year">Jun 14</time></span> <span class="m:hidden">• Edited</span> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464293" aria-controls="comment-dropdown-464293" 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="a51zwesip88xra3eoc5ibu49ts4m1kii" class="crayons-icon pointer-events-none"><title id="a51zwesip88xra3eoc5ibu49ts4m1kii">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-464293" 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/using-important-in-css-75c#comment-10alb" 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/10alb/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="464293" data-comment-url="https://dev.to/alvaromontoro/comment/10alb" 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/10alb/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/10alb" 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>When I find elements that are too generic to style, I normally solve it by adding a class/id to the elements or one of their ancestors, which allows for easier and more specific selectors. Do you have an example of applying styles to elements abstractly and how did you fix it with <code>!important</code>?</p> <p>Also, inline styles do not override <code>!important</code> as it can be seen in this <a href="https://jsfiddle.net/alvaromontoro/k9b1wshd/2/" rel="nofollow">example</a>:</p> <p><iframe src="https://jsfiddle.net/alvaromontoro/k9b1wshd/2//embedded/result,html,css,js//dark" width="100%" height="600" scrolling="no" frameborder="no" allowfullscreen allowtransparency="true" loading="lazy"> </iframe> </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-464293" data-comment-id="464293" 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="abqffwvkp3dsodys0hwi6f2t849yhlcn" class="crayons-icon reaction-icon not-reacted"><title id="abqffwvkp3dsodys0hwi6f2t849yhlcn">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="ai66foa92zrmevkxcwjmcewrz7ayiyu7" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ai66foa92zrmevkxcwjmcewrz7ayiyu7">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">4</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/using-important-in-css-75c/comments/new/10alb" data-comment-id="464293" data-path="/alvaromontoro/using-important-in-css-75c/comments/10alb" data-tracking-name="comment_reply_button" data-testid="reply-button-464293" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="ahtk0jtam38etnjj1riujuhllaz45u2p" class="crayons-icon reaction-icon not-reacted"><title id="ahtk0jtam38etnjj1riujuhllaz45u2p">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-2 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="ar1kwru6y32xzcwvvxx6k5bm6h0fkwfr" class="crayons-icon expanded"><title id="ar1kwru6y32xzcwvvxx6k5bm6h0fkwfr">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="a31mvbezt4gvzur7xh2cauzm88afihlv" class="crayons-icon collapsed"><title id="a31mvbezt4gvzur7xh2cauzm88afihlv">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-464326" class=" comment single-comment-node child comment--deep-2 " data-comment-id="464326" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ami" data-comment-author-id="300278" data-content-user-id="300278"> <a name="comment-10ami" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/urielbitton" 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%2F300278%2Fb747ae00-0959-48dd-bed2-e7d478c72ed5.jpg" alt="urielbitton 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/urielbitton" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Uriel Bitton</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464326" aria-controls="comment-profile-preview-content-464326" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Uriel Bitton profile details"> Uriel Bitton </button> <div id="comment-profile-preview-content-464326" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #148be0; 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="/urielbitton" 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%2F300278%2Fb747ae00-0959-48dd-bed2-e7d478c72ed5.jpg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Uriel Bitton </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":300278,"name":"Uriel Bitton"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Uriel Bitton" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> AWS Solutions Architect & Engineer. I write about AWS services, serverless technology, architecture, and MVP Design & Web Development. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Email </div> <div class="value"> <a href="mailto:urielas@hotmail.com">urielas@hotmail.com</a> </div> </li> <li> <div class="key"> Location </div> <div class="value"> Montreal, Canada </div> </li> <li> <div class="key"> Education </div> <div class="value"> Software Engineer at Concordia University, Montreal, Canada </div> </li> <li> <div class="key"> Work </div> <div class="value"> AWS Solutions Architect, Cloud Engineer and Consultant </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-12-24T17:56:41Z" class="date">Dec 24, 2019</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/using-important-in-css-75c#comment-10ami" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-14T01:46:25Z" class=date-short-year> Jun 14 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464326" aria-controls="comment-dropdown-464326" 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="aav3ihvmr97q5p049hmzi7q7nxcb3ea5" class="crayons-icon pointer-events-none"><title id="aav3ihvmr97q5p049hmzi7q7nxcb3ea5">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-464326" 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/using-important-in-css-75c#comment-10ami" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Uriel Bitton's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="300278" data-action="settings-button" data-path="https://dev.to/urielbitton/comment/10ami/settings" aria-label="Go to Uriel Bitton's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="300278"> <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="464326" data-comment-url="https://dev.to/urielbitton/comment/10ami" aria-label="Hide Uriel Bitton's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/urielbitton/comment/10ami/mod" aria-label="Moderate Uriel Bitton's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/urielbitton/comment/10ami" aria-label="Report Uriel Bitton'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>Right i actually meant inline with !importa overrides styleseet !important</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-464326" data-comment-id="464326" 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="ak2unza7zg12mki19cegvn6hxmm5qs8x" class="crayons-icon reaction-icon not-reacted"><title id="ak2unza7zg12mki19cegvn6hxmm5qs8x">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="ae7jn6057oqnxun6do1skr5s9vuh2ght" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="ae7jn6057oqnxun6do1skr5s9vuh2ght">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">2</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/using-important-in-css-75c/comments/new/10ami" data-comment-id="464326" data-path="/alvaromontoro/using-important-in-css-75c/comments/10ami" data-tracking-name="comment_reply_button" data-testid="reply-button-464326" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a407jr84f1ap0ub7m186fskara3hxgoj" class="crayons-icon reaction-icon not-reacted"><title id="a407jr84f1ap0ub7m186fskara3hxgoj">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> </details> <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="auazqtr2508r84ksyxpqdkt1x54008f" class="crayons-icon expanded"><title id="auazqtr2508r84ksyxpqdkt1x54008f">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="a19twoqx26tw4b4xgozw71h1ybctjowe" class="crayons-icon collapsed"><title id="a19twoqx26tw4b4xgozw71h1ybctjowe">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-464010" class=" comment single-comment-node root comment--deep-0 " data-comment-id="464010" data-path="/alvaromontoro/using-important-in-css-75c/comments/10aae" data-comment-author-id="282372" data-content-user-id="282372"> <a name="comment-10aae" style="position: absolute; top: -8px;"> </a> <div class="comment__inner"> <a href="https://dev.to/ms314006" 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%2F282372%2F1488bbb4-64e5-435b-ad27-f1e1cd243e3b.jpeg" alt="ms314006 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/ms314006" class="crayons-link crayons-link--secondary flex items-center fw-medium m:hidden"> <span class="js-comment-username">Clark</span> </a> <div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:block"> <button id="comment-profile-preview-trigger-464010" aria-controls="comment-profile-preview-content-464010" class="profile-preview-card__trigger p-1 -my-1 -ml-1 crayons-btn crayons-btn--ghost" aria-label="Clark profile details"> Clark </button> <div id="comment-profile-preview-content-464010" class="profile-preview-card__content p-4 pt-0 branded-7 crayons-dropdown" style="--card-color: #010b1b; 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="/ms314006" 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%2F282372%2F1488bbb4-64e5-435b-ad27-f1e1cd243e3b.jpeg" class="crayons-avatar__image" alt="" loading="lazy" /> </span> <span class="crayons-link crayons-subtitle-2 mt-5"> Clark </span> </a> </div> <div class="print-hidden"> <button name="button" type="button" data-info="{"className":"User","style":"","id":282372,"name":"Clark"}" class="crayons-btn follow-action-button whitespace-nowrap w-100 follow-user" aria-label="Follow user: Clark" aria-pressed="false">Follow</button> </div> <div class="color-base-70"> I love share knowledge and writing blog posts(about frontend skill), like coding enjoy life. </div> <div class="user-metadata-details"> <ul class="user-metadata-details-inner"> <li> <div class="key"> Location </div> <div class="value"> Taiwan </div> </li> <li> <div class="key"> Joined </div> <div class="value"> <time datetime="2019-11-29T14:32:45Z" class="date">Nov 29, 2019</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/using-important-in-css-75c#comment-10aae" class="comment-date crayons-link crayons-link--secondary fs-s"> <time datetime="2020-06-13T15:17:44Z" class=date-short-year> Jun 13 '20 </time> </a> <div class="comment__dropdown" data-tracking-name="comment_dropdown"> <button id="comment-dropdown-trigger-464010" aria-controls="comment-dropdown-464010" 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="arrn94c1wn051d5wmn4innsl21z72e6g" class="crayons-icon pointer-events-none"><title id="arrn94c1wn051d5wmn4innsl21z72e6g">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-464010" 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/using-important-in-css-75c#comment-10aae" class="crayons-link crayons-link--block permalink-copybtn" aria-label="Copy link to Clark's comment" data-no-instant>Copy link</a></li> <li class="comment-actions hidden" data-user-id="282372" data-action="settings-button" data-path="https://dev.to/ms314006/comment/10aae/settings" aria-label="Go to Clark's comment settings"></li> <li class="comment-actions hidden" data-action="hide-button" data-commentable-user-id="161327" data-user-id="282372"> <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="464010" data-comment-url="https://dev.to/ms314006/comment/10aae" aria-label="Hide Clark's comment"> Hide </button> </li> <li class="mod-actions hidden mod-actions-comment-button" data-path="https://dev.to/ms314006/comment/10aae/mod" aria-label="Moderate Clark's comment"></li> <li class="report-abuse-link-wrapper" data-path="/report-abuse?url=https://dev.to/ms314006/comment/10aae" aria-label="Report Clark'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>Hahaha, your "You are still here...", it is so cute 🤣</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-464010" data-comment-id="464010" 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="a8b84vm8c6grhwzf1iyuwkyxi4n54mmz" class="crayons-icon reaction-icon not-reacted"><title id="a8b84vm8c6grhwzf1iyuwkyxi4n54mmz">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="a2jcz51hlcsngwg02km6b6qivf050772" class="crayons-icon crayons-icon reaction-icon--like reaction-icon reacted"><title id="a2jcz51hlcsngwg02km6b6qivf050772">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">1</span><span class="reactions-label hidden m:inline-block"> like</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/using-important-in-css-75c/comments/new/10aae" data-comment-id="464010" data-path="/alvaromontoro/using-important-in-css-75c/comments/10aae" data-tracking-name="comment_reply_button" data-testid="reply-button-464010" rel="nofollow"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" role="img" aria-labelledby="a4up7e9xh75l3riyn17v3whyx3cmbcxb" class="crayons-icon reaction-icon not-reacted"><title id="a4up7e9xh75l3riyn17v3whyx3cmbcxb">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> </div> <div class="align-center"> <div class="mb-4"> <a class="crayons-btn crayons-btn--secondary w-100" href="/alvaromontoro/using-important-in-css-75c/comments"> View full discussion (15 comments) </a> </div> <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="3WtE5IN9x6GUin_zeQXfzKIV6k21FIVDQcltrR06RtIP5KOCneB2N8ep1NdN1pNbNcDRZivnpY6wOwbfO3hjQQ" 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/using-important-in-css-75c/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="/thatanjan/responsive-design-is-easy-with-fluid-tailwind-plugin-2m38" 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%2F3569osyp4kh8f1fdvipa.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="thatanjan 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%2F1377138%2F48335ffd-b705-40cc-800d-fdbd2b4f34c1.png" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Responsive design is easy with Fluid Tailwind Plugin.</h3> <p class="opacity-75 pt-1"> Anjan Shomodder - <time datetime="2024-10-01T11:49:59Z">Oct 1</time> </p> </div> </div> </a> <a href="/morewings/lets-create-a-simple-react-hook-to-detect-browsers-and-their-capabilities-4lnf" 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%2Fgn7ar4196ivbq1m6v2ax.jpeg" 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="morewings 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%2F331419%2F04292a7d-2d43-4bf1-94dc-0a33712dd3d9.jpeg" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Let's create a simple React hook to detect browsers and their capabilities</h3> <p class="opacity-75 pt-1"> Dima Vyshniakov - <time datetime="2024-09-30T13:11:34Z">Sep 30</time> </p> </div> </div> </a> <a href="/codeparrot/explore-bootstrap-5-components-24m3" 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%2Fih1snnnjvvo33lwutbgq.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="mvaja13 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%2F1264665%2Fd6d0bd57-a94d-4f6c-afe1-a16821e44259.png" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">Explore bootstrap 5 components</h3> <p class="opacity-75 pt-1"> Gautam Vaja - <time datetime="2024-09-30T07:07:28Z">Sep 30</time> </p> </div> </div> </a> <a href="/websilvercraft/how-to-have-the-look-and-feel-of-a4-in-html-on-screen-devices-30am" 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="websilvercraft 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%2F977162%2Fb4952c80-c322-4c0d-adb8-133043e16981.png" /> </span> <div> <h3 class="fs-xl mb-0 lh-tight">How to Have the Look and Feel of A4 in HTML on Screen devices</h3> <p class="opacity-75 pt-1"> websilvercraft - <time datetime="2024-09-20T15:00:26Z">Sep 20</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/using-important-in-css-75c/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/using-important-in-css-75c/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

CSS Important: Using !important in CSS - DEV Community