StarMirror/styleguide
1
0
Fork 0
mirror of https://github.com/google/styleguide.git synced 2024-03-22 13:11:43 +08:00
Code Issues Projects Releases Wiki Activity

Add recommendation to avoid using !important

Browse Source 
This recommendation was adopted internally to align with our infrastructure conformance checks and best practices.

While !important is a legitimate feature of CSS, its use increased complexity and maintenance costs when styles were reused and shared across multiple projects.
This commit is contained in:
Tony Ruscoe 2022-01-13 14:29:39 +00:00 committed by GitHub
parent 8d4a22bd69
commit e6233c7428
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 23 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
htmlcssguide.html
View File

@ -693,6 +693,27 @@ color: #eebbcc;
color: #ebc; color: #ebc;
</code></pre> </code></pre>
<h4 id="Important_Declarations" class="numbered">Important Declarations</h4>
<p>Avoid using <code>!important</code> declarations.</p>
<p>These declarations break the natural cascade of CSS and make it difficult to
reason about and compose styles. Use
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">selector specificity</a>
to override properties instead.</p>
<pre><code class="language-css bad">/* Not recommended */
.example {
font-weight: bold !important;
}
</code></pre>
<pre><code class="language-css good">/* Recommended */
.example {
font-weight: bold;
}
</code></pre>
<h4 id="Hacks" class="numbered">Hacks</h4> <h4 id="Hacks" class="numbered">Hacks</h4>
<p>Avoid user agent detection as well as CSS “hacks”—try a different approach <p>Avoid user agent detection as well as CSS “hacks”—try a different approach
@ -713,8 +734,8 @@ frequently.</p>
<p>Alphabetize declarations.</p> <p>Alphabetize declarations.</p>
<p>Put declarations in alphabetical order in order to achieve consistent code in a <p>Put declarations in alphabetical order in order to
way that is easy to remember and maintain.</p> achieve consistent code in a way that is easy to remember and maintain.</p>
<p>Ignore vendor-specific prefixes for sorting purposes. However, multiple <p>Ignore vendor-specific prefixes for sorting purposes. However, multiple
vendor-specific prefixes for a certain CSS property should be kept sorted (e.g. vendor-specific prefixes for a certain CSS property should be kept sorted (e.g.