CSS guidelines: use inline styling or important?
Sometimes in CMS, code in a module, plugin, extension, or core itself overrides your CSS rules. Of course, your client does not want to, in addition to the additional investment of time, to chase the source of the problem.
I understand that there are three ways to force your own override in a child theme:
1. Add inline style to your template file
2. Add important!
to your CSS file
3. Add another layer to the template file to make your selectors more specific.
Is there a recognized authority on CSS best practices that addresses this particular situation?
source to share
I don't think there is really a best practice here, but I try to avoid inline outside of WITHIN cms editing.
If I have the following p tag to edit ...
<div id="outer">
<div class="inner">
<p>text</p>
</div>
</div>
I will try to use something like ...
#outer .inner p{
colour:red;
}
If I am really struggling, then I use ...
#outer .inner p{
colour:red !important;
}
Another 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 well.
source to share
I can't give you an exact answer because it depends on the situation, but I can give you a general study of WHEN to use what.
What CSS Best Practice Means
Best practices are those techniques for designing and building web pages that have been shown to be the most effective and get the most out of their work.
-
Selected content from design
One of the main goals of CSS is to remove design elements from HTML and place them somewhere else for the designer to maintain. This means that the designer also doesn't need to maintain the look and feel of the website.
-
Ease of service
One of the most overlooked elements of web design is maintenance. Unlike printed material, once you publish a webzine, it doesn't go away. Things change - from the look of your site to the content and links within it. And your CSS in a central place makes it that much easier to maintain.
-
Keep your website accessible
Using CSS styles allows your site to be more accessible to both disabled people and robots, such as search engines.
-
Your site will stay longer
By using best practices with your CSS, you are using standards that have been proven to work and remain flexible as the environment changes web design.
Below is a brief description of how any CSS-styled document will determine how much weight will be given to the different styles it encounters. This is a general summary of the cascade as described in the spec:
Find all declarations that apply to an item and property Style the item based on importance and origin using the following order: the first item in the list has the least weight:
- Ads from the user agent
- Ads from user
- Announcements from the author
- Announcements from the author with! important added
- Ads from user with! important added
- Apply a style based on specificity, with a more specific "win" selector over more general ones
- Apply the style according to the order in which they appear in the style sheet (that is, in the case of a link, the latter "wins").
1- When should I use inline style?
For html-email only, unfortunately, many rules are not supported by various email clients.
In other cases, this is bad practice as adding inline styles makes it difficult to change your site, if you have everything in a CSS file then you can change the entire design of your site without changing the HTML site. Using style sheets allows you to use clean source code and keep it well laid out. They go against each of the above benefits:
- Inline styles don't separate content from design
- Inline styles cause more maintenance headaches.
- Inline styles are not available
- Inline styles make your pages look great.
2- When should you use Severe value?
As with any technique, there are pros and cons depending on the circumstances. So when to use it, if ever? Here is my subjective overview of potential valid uses.
FORBIDDEN
! Important declarations should not be used unless absolutely necessary after exhausting all other paths. If you are using! It is important to avoid proper debugging or leave the project for completion out of laziness, then you abuse it, and you (or those who inherit your projects) will suffer the consequences.
If you include it even sparingly in your stylesheets, you will soon find that some parts of your stylesheet are harder to maintain. As discussed above, the value of a CSS property naturally occurs through cascade and specificity. When you use! Importantly, you break the natural flow of your rules by giving more weight to rules that don't deserve that much weight.
If you never use! importantly, it is a sign that you understand CSS and think about your code properly before writing it.
Thus, the old adage “never say never” certainly applies here. So, below are some of the legitimate uses. Important.
TOWARDS AN EMERGENCY PROBLEM
There are times when something shows up in your CSS on a client's live site and you need to quickly apply a fix. In most cases, you can use Firebug or another developer tool to track down the CSS code that needs to be fixed. But if the problem occurs in IE6 or another browser that doesn't have access to debugging tools, you might need a quick fix using the important one.
After you move the interim fix to production (thereby making the customer happy), you can work around fixing the problem locally with a more convenient method that doesn't cascade. When you choose the best solution, you can add it to the project and remove it! Important - and the client will not become wiser.
DESCRIPTION OF INTERIOR STYLES IN THE CONTENT OF THE USER
One of the frustrating aspects of CSS development is when custom content includes inline styles, as it does with some CMS WYSIWYG editors. In a CSS cascade, inline styles will override the regular styles, so any unwanted element styling that occurs through the generated content will be difficult, if not impossible, with normal CSS rules. You can get around this problem with an important declaration, because the CSS rule with! Important styling author styles will override inline CSS.
That being said, always try to structure your code well and design good markup, so you may not have to use inline styles not "important" unless you need to.
Fill in this for full details:
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/
source to share