{"id":643,"date":"2023-07-19T09:15:21","date_gmt":"2023-07-19T09:15:21","guid":{"rendered":"https:\/\/cachitoswp.com\/?p=643"},"modified":"2025-06-01T18:17:05","modified_gmt":"2025-06-01T18:17:05","slug":"the-importance-of-important-in-your-css","status":"publish","type":"post","link":"https:\/\/cachitoswp.com\/en\/the-importance-of-important-in-your-css\/","title":{"rendered":"The importance of !important in your css, for dummies"},"content":{"rendered":"<p class=\"has-primary-color has-text-color has-large-font-size wp-block-paragraph\">The most used and sucked CSS add-on instruction. The most controversial and easiest to use. <\/p>\n\n\n\n<p class=\"has-white-color has-text-color has-medium-font-size wp-block-paragraph\">Doesn&#039;t that link turn red? Pam! You add a color: red!important and &quot;shell&quot; it. Easy. Fast. Exponentially problematic especially in large projects with more than one &quot;participant&quot;.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"la-tortilla-con-important-o-sin-important\">The tortilla, with !important or without !important?<\/h2>\n\n\n<p class=\"wp-block-paragraph\">I don&#039;t know anyone who doesn&#039;t use a !important from time to time. Really, and whoever denies it is either lying, or is working on a project or team where they are totally prohibited from using it (for reasons of software quality, but hey, this is paid for). <\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">If everything is bold, nothing is bold; ergo, if everything is !important, nothing is !important<\/p>\n<cite>Filemon Pi<\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">When you are newer, it is easy to fall into the abuse of !important. Personally, I am a defender and supporter, with my reservations. But this is a personal opinion, like my ass, I mean, everyone has one or one.<\/p>\n\n\n<h2 class=\"wp-block-heading\" id=\"el-argumento-dev-pro-number-one-sobre-por-que-no-hay-que-usar-important\">The &quot;dev pro number one&quot; argument, about why you shouldn&#039;t use !important:<\/h2>\n\n\n<p class=\"wp-block-paragraph\">The !important is used to <strong>test <\/strong>either <strong>as a provisional measure<\/strong>, once you prove that the style is correct and the element &quot;gets it&quot;, you have to remove the !important and <strong>be more specific with your CSS rule.<\/strong> Your new rule should be <strong>More specific<\/strong> that the rule that precedes it in <strong>waterfall<\/strong>.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\">\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/wham-vintage.com\/wham-vintage-barcelona-contactar\/\" target=\"_blank\" rel=\" noreferrer noopener\"><img decoding=\"async\" src=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2023\/11\/banner.webp\" alt=\"\" class=\"wp-image-1303\"\/><\/a><\/figure>\n<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"que-cascada-que-dices-que-es-la-especidad-esa\">What a waterfall, what are you saying, what is the specificity of that!<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Specificity is the key. Specity. Speci\u2026 bah. Let&#039;s give an example that will be better understood. We&#039;ll start with the basics and then you&#039;ll see when the problems of &quot;excessive specificity, specificity&quot; come:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>\/\/ Tenemos aqui que, yo que se, los links, sean azules\na {\n  color:blue;\n}\n\n\/\/ Ahora, tenemos una clase .button, que hace que el enlace tenga forma de bot\u00f3n, y sea fondo azul y coloor, blanco, va.\n\n.button {\n  display:inline-block;\n  paddding:5px 10px;\n  color:white;\n  background:blue;\n}\n\n\/\/ Ojo; esta clase .button &#8230; se la puedo poner tambi\u00e9n al elemento button, as\u00ed, har\u00e9 que todos los botones de mi web, tanto sean links como sean un bot\u00f3n de un form, tengan el mismo aspecto like a boss, no?\n\n\/\/ Hostia, pues al link, le voy a quitar el subrayado, cuando sea un .button&#8230; podr\u00eda hacer esta nueva combo-regla\n\na.button {\n  text-decoration:none;\n}\n\n\/\/ Bueno pues esta es una regla combinada, sin espacios entre elemento y clase y se puede hacer, aunque tambi\u00e9n son selectores pol\u00e9micos, pero me sirve para \u00e9ste tuto.<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #6A9955\">\/\/ We have here that, I don&#039;t know, the links are blue<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">to<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #CE9178\">blue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Now, we have a class .button, which makes the link have the shape of a button, and has a blue background and color, white, goes.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">display<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #CE9178\">inline-block<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  padding:<\/span><span style=\"color: #B5CEA8\">5px<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #B5CEA8\">10px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">color<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #CE9178\">white<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #CE9178\">blue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Eye; I can also put this .button class to the button element, so I will make all the buttons on my website, whether they are links or a form button, have the same appearance like a boss, right?<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Damn, well, I&#039;m going to remove the underline from the link, when it&#039;s a .button... I could make this new combo-rule<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">a.button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">text-decoration<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #CE9178\">none<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ Well, this is a combined rule, without spaces between element and class and it can be done, although they are also controversial selectors, but it works for me for this tutorial.<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">You follow me up to here, right? Okay, so we already have the blue button style and such. Ok, now, it turns out that... I have a block, a sidebar, a rectangle, which already has the background color blue. And I want to put a button inside this blue block. Damn, but blue on blue, don&#039;t see the button... Ains, okay, then hypothetically we would have:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>.sidebar-box&#8211;azul {\n  background:blue;\n  padding:20px;\n}\n\n\/\/ digo bueno, pues mi button azul, cuando est\u00e9 dentro de la caja azul, lo cambiar\u00e9 de color, hale\n\n.sidebar-box&#8211;azul .button {\n  background: red; \/\/ hale pos rojo\n}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.sidebar-box--blue<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #CE9178\">blue<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">padding<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #B5CEA8\">20px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ I say well, well, my blue button, when it is inside the blue box, I will change its color, hale<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.sidebar-box--blue<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">grid<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #6A9955\">\/\/ hale pos red<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Okay, so, we&#039;ve already increased the specificity of the CSS rule, in two ways, before, by combining a.button, and now, by saying &quot;the button, but specifically the one inside the blue box (nice band). This is the waterfall.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"240\" height=\"162\" src=\"https:\/\/cachitoswp.com\/wp-content\/uploads\/2023\/07\/LastingYearlyCaribou-max-1mb.gif\" alt=\"\" class=\"wp-image-656\" style=\"width:364px;height:246px\"\/><figcaption class=\"wp-element-caption\">The !important originates from the Basque Country. In fact, !important means &quot;!hoosh&quot; or &quot;!holy&quot;<\/figcaption><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We can be more, and more, and more specific, imagine that we have a special page template, a landing page, where everything that is blue is replaced with, let&#039;s say, gold, because look, the client or the design requests it for a marketing action or whatever. We could easily make some rules for this page using the body classname of that page template:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>.page-template-page-marketing-peich .sidebar-box&#8211;azul {\n  background: gold; \/\/ el dorao es un amarillo muy chulo\n  padding:20px;\n}\n\n.page-template-page-marketing-peich .sidebar-box&#8211;azul .button {\n  background: gold; \/\/ hale pos dorao\n}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.page-template-page-marketing-peich<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.sidebar-box--blue<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">gold<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #6A9955\">\/\/ dorao is a very cool yellow<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">padding<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #B5CEA8\">20px<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #D7BA7D\">.page-template-page-marketing-peich<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.sidebar-box--blue<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">gold<\/span><span style=\"color: #D4D4D4\">; <\/span><span style=\"color: #6A9955\">\/\/ hale pos dorao<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Well, what we are doing is increasing specificity, nesting more classes within others and establishing more complex rules, exceptions and such and such.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">When you have a lot of CSS, it&#039;s easy for us to have to add a lot of these combined rules. And especially with any CMS + PLUGINS. Because form plugins, new blocks, shortcodes that paint things for you, etc., usually come with their own additional CSS. And with its own specific rules so that those tabs, that form, etc., look more or less good.<\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\">A diamond can only be scratched by another diamond; ergo, a !important can only be crushed by another !important (which comes later)<\/p>\n<cite>Popeye, nautical engineer<\/cite><\/blockquote>\n\n\n\n<p class=\"wp-block-paragraph\">But of course, specific rules on the one hand, others on the other... and you find that some of your rules cause other elements to inherit properties (colors that don&#039;t touch, exaggerated margins...).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">It is when you find yourself in a certain situation (nice word) and you already have to write rules as long as:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>.page-template-page-marketing-peich .main .container .section-deabajo .sidebar-box&#8211;azul .wpcf7 label span button {\n  background: pink;\n  margin:0;\n}\n\n\/\/ \u00a1toma regla espec\u00edfica! (las he visto m\u00e1s largas, ejem, sass compilado las hace de m\u00e1s gordas)\n\n\/\/ Esto ya no es \u00abcascading style sheets\u00bb, es \u00abcatarating style sheets\u00bb, los estilos de Ni\u00e1gara<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.page-template-page-marketing-peich<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.main<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.container<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.section-below<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.sidebar-box--blue<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.wpcf7<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">labels<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">span<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">pink<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">margin<\/span><span style=\"color: #D4D4D4\">:<\/span><span style=\"color: #B5CEA8\">0<\/span><span style=\"color: #D4D4D4\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ take specific rule! (I&#039;ve seen them longer, ahem, compiled sass makes them thicker)<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #6A9955\">\/\/ This is no longer &quot;cascading style sheets&quot;, it is &quot;catarating style sheets&quot;, the Niagara styles<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Here comes when, if you have to make a change in the color of this button again because (imagine random reason) you say fuah\u2026 what if I say this?<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#1E1E1E\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewbox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" style=\"color:#D4D4D4;display:none\" aria-label=\"copy\" class=\"code-block-pro-copy-button\"><textarea class=\"code-block-pro-copy-button-textarea\" aria-hidden=\"true\" readonly>.page-template-page-marketing-peich .button {\n  background: gold!important; \/\/ FORZAMOS de nuevo el \u00abdorao\u00bb\n}<\/textarea><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewbox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki dark-plus\" style=\"background-color: #1E1E1E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #D7BA7D\">.page-template-page-marketing-peich<\/span><span style=\"color: #D4D4D4\"> <\/span><span style=\"color: #D7BA7D\">.button<\/span><span style=\"color: #D4D4D4\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">  <\/span><span style=\"color: #9CDCFE\">background<\/span><span style=\"color: #D4D4D4\">: <\/span><span style=\"color: #CE9178\">gold<\/span><span style=\"color: #569CD6\">!important<\/span><span style=\"color: #D4D4D4\">; \/\/ WE FORCE the &quot;dorao&quot; again<\/span><\/span>\n<span class=\"line\"><span style=\"color: #D4D4D4\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">In the latter case, I have written a shorter and less specific rule, the browser should interpret the previous one, due to its specificity. But since I have put the !important for the &quot;face&quot;, (in fact, I always call it that way, &quot;important for the face&quot;), then pull, mate and crush.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">That I have saved time snooping and writing... well yes. Have I killed any kittens? Have I thrown dirt in the eyes of the poor? Why not? Well then, I have two options:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>I leave it as it is, and I go for a coffee<\/li>\n\n\n\n<li>I evaluate. Am I at the beginning of the project, or finishing it? Is it a small project, or is it large and likely to continue? Is it a personal page that only I touch and take care of everything, or is it for a client? <strong>Is this project well paid, enough to allow me to be a purist because it&#039;s worth it?<\/strong><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Only you have the answers to the evaluation. But I&#039;m going to give you an extra criterion, which I think is also very important.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As I mentioned, there are rules that are so long that our CSS file becomes HUGE (Imagine 500KB of minified CSS. I&#039;ve seen it and you probably have too). Because it has many, many rules. And it almost always counts in 20 words, which can be counted in 2 or 3. This will happen if:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>It is a large project, and we do not divide our CSS into several files, by functionalities or sections and we are purists, who &quot;never mention the importance \u00f1a \u00f1a \u00f1a&quot;<\/li>\n\n\n\n<li>We use a preprocessor like SASS, where it is so convenient to nest and nest and nest. Ha, then when compiling the css, the rules are KILOMETRIC. BAD CODE! Yes, minification, yes, yes, yes, but this doesn&#039;t make sense.<\/li>\n<\/ol>\n\n\n<h2 class=\"wp-block-heading\" id=\"con-clun-sion\">With Clun Zion<\/h2>\n\n\n<p class=\"wp-block-paragraph\">Well, here we are, if I have to use a !important, I use it. But I have already explained the reasons that make me evaluate it, whether or not it is worth leaving it there so fresh. Above all, in this last part, I hope I have opened your eyes, especially on the issue of CSS size, which is a part that I find is ignored a lot, in these times, and is rarely mentioned in blogs.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I mean, optimization and good practices are always good, but you see, depending on how you write your CSS, it could be that you don&#039;t even need a posteriori as much as minification, gzip, render blocking and gromenawers performance moves.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Hale, I&#039;m already comfortable<strong>!important<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>","protected":false},"excerpt":{"rendered":"<p>La instrucci\u00f3n complementaria de CSS m\u00e1s utilizada y apestada. La m\u00e1s pol\u00e9mica y f\u00e1cil de usar. \u00bfQue no se pone rojo \u00e9se enlace? \u00a1Pam! le metes un color:red!important y a \u00abcascarla\u00bb. F\u00e1cil. R\u00e1pido. Exponencialmente problem\u00e1tico especialmente en proyectos grandes y de m\u00e1s de un \u00abparticipante\u00bb. La tortilla \u00bfcon !important o sin !important? Yo no conojco [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":642,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_themeisle_gutenberg_block_has_review":false,"footnotes":""},"categories":[1,16],"tags":[20,18,29],"class_list":["post-643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-diseno-desarrollo-web-wordpress","category-tutoriales","tag-html-css","tag-maquetacion","tag-opinion"],"mb":[],"mfb_rest_fields":["title"],"_links":{"self":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts\/643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/comments?post=643"}],"version-history":[{"count":1,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts\/643\/revisions"}],"predecessor-version":[{"id":1313,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/posts\/643\/revisions\/1313"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/media\/642"}],"wp:attachment":[{"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/media?parent=643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/categories?post=643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cachitoswp.com\/en\/wp-json\/wp\/v2\/tags?post=643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}