4

Sometimes in a CMS, code in a module, plugin, extension or the core itself will override your CSS rules. Of course, your client doesn't want much in the way of extra time charges to chase down the source of the problem.

I understand that there are three ways to force your own override in a child theme:

1. Add an inline style to your template file

2. Add an important! to your CSS file

3. Add another layer to your template file to make your selectors more specific.

Is there a recognized authority on CSS best practices that addresses this particular situation?

Nora McDougall-Collins
  • 487
  • 7
  • 16

2 Answers2

2

I don't think that there is really a best practice here, but I try and avoid inline outside of editing WITHIN a cms.

If I have the following p tag to edit...

<div id="outer">
    <div class="inner">
        <p>text</p>
    </div>
</div>

I will try and use something like...

#outer .inner p{
    colour:red;
}

If I am really struggling, then I use...

#outer .inner p{
    colour:red !important;
}

The other alternative is to use a stylesheet to override the current one, so reference it after your current one in the header of your html...

<link rel="stylesheet" href="current-style.css" />
<link rel="stylesheet" href="new-style.css" />

This article explains things well.

Tony Ray Tansley
  • 684
  • 5
  • 13
  • 1
    just found this stackoverflow about this http://stackoverflow.com/questions/5701149/when-to-use-important-property-in-css – Tony Ray Tansley Jul 27 '15 at 16:23
  • The solution I use most often in a WordPress or Drupal site is #3 to add another layer to the template file to override the difficult-to-find plugin or theme code. I generally try to minimize use of !important and inline styles because they can become a bad habit, when overused. From these answers and the additional question posted, there doesn't seem to be an overarching "best practices" but a set of considerations. – Nora McDougall-Collins Jul 28 '15 at 17:42
1

I can't give you an exact answer because that depends on the situation but I can give you a general research of WHEN to use what.

What Does CSS Best Practices Mean

Best practices are those methods of designing and building Web pages that have been shown to be most effective and get the most return for the work involved.

  1. Separate content from design

    One of the main goals of CSS is to remove the design elements from the HTML and place them in another location for the designer to maintain. That means that a designer doesn't have to also be the content developer to maintain the look of the Web site.

  2. Make maintenance easy

    One of the most forgotten elements of Web design is the maintenance. Unlike print materials, once you put out a Web "magazine" it doesn't go away. Things change - from the look of your site to the content and links within it. And having your CSS in a central place makes it that much easier to maintain.

  3. Keep your site accessible

    Using CSS styles can keep your site more accessible both to disabled people and to robots like search engines.

  4. Your site will stay current longer

    By using best practices with your CSS, you're using standards that have been proven to work and remain flexible as the Web design environment changes.

Below is a basic outline of how any given CSS-styled document will decide how much weight to give to different styles it encounters. This is a general summary of the cascade as discussed in the spec:

Find all declarations that apply to the element and property Apply the styling to the element based on importance and origin using the following order, with the first item in the list having the least weight:

  • Declarations from the user agent
  • Declarations from the user
  • Declarations from the author
  • Declarations from the author with !important added
  • Declarations from the user with !important added
  • Apply styling based on specificity, with the more specific selector “winning” over more general ones
  • Apply styling based on the order in which they appear in the stylesheet (i.e., in the event of a tie, last one “wins”)

1- When Should inline style Be Used?

Only for html email, unfortunately many rules are not supported by various email clients.

In other case is a bad practice to use it, because adding in-line styles, it makes it more difficult modify your site, if you have everything in a CSS file, then you can change the entire design of your site without change the HTML of the site. Using style sheets allows for clean source code, and keeping it well laid out. They go against every one of the above benefits:

  1. Inline styles don't separate content from design
  2. Inline styles cause more maintenance headaches
  3. Inline styles are not as accessible
  4. Inline styles make your pages bigger

2- When Should !important Be Used?

As with any technique, there are pros and cons depending on the circumstances. So when should it be used, if ever? Here’s my subjective overview of potential valid uses.

NEVER

!important declarations should not be used unless they are absolutely necessary after all other avenues have been exhausted. If you use !important out of laziness, to avoid proper debugging, or to rush a project to completion, then you’re abusing it, and you (or those that inherit your projects) will suffer the consequences.

If you include it even sparingly in your stylesheets, you will soon find that certain parts of your stylesheet will be harder to maintain. As discussed above, CSS property importance happens naturally through the cascade and specificity. When you use !important, you’re disrupting the natural flow of your rules, giving more weight to rules that are undeserving of such weight.

If you never use !important, then that’s a sign that you understand CSS and give proper forethought to your code before writing it.

That being said, the old adage “never say never” would certainly apply here. So below are some legitimate uses for !important.

TO TEMPORARILY FIX AN URGENT PROBLEM

There will be times when something bugs out in your CSS on a live client site, and you need to apply a fix very quickly. In most cases, you should be able to use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem is occurring on IE6 or another browser that doesn’t have access to debugging tools, you may need to do a quick fix using !important.

After you move the temporary fix to production (thus making the client happy), you can work on fixing the issue locally using a more maintainable method that doesn’t muck up the cascade. When you’ve figured out a better solution, you can add it to the project and remove !important — and the client will be none the wiser.

TO OVERRIDE INLINE STYLES IN USER-GENERATED CONTENT

One frustrating aspect of CSS development is when user-generated content includes inline styles, as would occur with some WYSIWYG editors in CMSs. In the CSS cascade, inline styles will override regular styles, so any undesirable element styling that occurs through generated content will be difficult, if not impossible, to change using customary CSS rules. You can circumvent this problem using an !important declaration, because a CSS rule with !important in an author stylesheet will override inline CSS.

Having said this, always try to have your code well structured and design a good markup, by doing this you may not have to use inline styles neither "!important" unless its completely necessary.

Check out this for the full information:

http://modernweb.com/2013/08/12/writing-better-css/?utm_source=html5weekly&utm_medium=email

http://www.smashingmagazine.com/2010/11/the-important-css-declaration-how-and-when-to-use-it/

https://css-tricks.com/when-using-important-is-the-right-choice/

http://webdesign.about.com/od/css/a/aa073106.htm

http://reinholdweber.com/?p=1

Yandy_Viera
  • 4,320
  • 4
  • 21
  • 42