Is it a good practice to keep adding
style="padding: 0; margin: 0; display: block;"
to each and every image?
No, it's better practice to use external stylesheets to do the same thing:
img {
padding: 0;
margin: 0;
display: block;
}
This will target all images in which the stylesheet is loaded. This can be overridden by the use of more specific selectors, such as id-based (img#theImageID or, more simply, #theImageID will target an <img id="theImageID" src="path/to/image.png" />), or class-based (img.imageClass or, again more simply, .imageClass. The former will select: <img class="imageClass" src="path/to/image.png" /> the latter will select the same element, but also any other element that has the same class-name).
Edited due to response/question from OP:
[Even] in case of html emails?
HTML emails are the one special case for this rule, HTML emails typically don't load, or can't load, external stylesheets. And seem to have trouble with style blocks, so in that case, yes. You still have to use in-line styles. Unfortunately.
Further reading:
W3.org.
SitePoint.
It's surely better to create a class with the style properties, like the following:
img.imageclass {
border: none;
margin: 20px;
padding: 10px;
}
Why it is not recommended to use inline styles. Because if you use an in-line style, you'll not be able to affect on that element from browser specific style-sheets. For example, if you create an element and see that it needs some "tweak" to look good in IE6, for example, the IE6 specific style-sheet will not work if you explicitly put an inline style for that element since the in-line style will be "lower" and thus will have higher priority.
it is good practice, but like #David Thomas said, it's better to do it in an external CSS file to keep from inline clutters.
Related
I am using a stylesheet in my code to stylize proprietary widgets, therefore I don't have access to alter the base stylesheet (nor is that really good practice anyway). One of the styles is causing problems in my application and I determined that the margin: 0 property needs to be removed entirely from this CSS rule:
.esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail {
border: 2px solid #F99;
margin: 0;
}
Is there a way to do this? Since I cannot view the stylesheet in a formatted way, I cannot get the index of this rule. The styles aren't in-line so I don't think I can use the .css() method. If I can't remove it, the only alternative I can think of is setting it to 1px (which I tested and it removed the problem that's occurring) but I'm not a big fan of that solution.
You will need to expand the specificity of your element if you do not wish to override css rules. The easiest way to do this is to add an id on an element and then write a css rule for that element using the id instead of the classes.
Read more here:
https://css-tricks.com/specifics-on-css-specificity/
I have a super simple question, are children elements allowed to be classless in BEM CSS methodology?
So, is this code valid:
<div class="foo__label">
<p class="foo__text">Something <strong>else</strong></p>
</div>
Or maybe it should be written as:
<div class="foo__label">
<p class="foo__text">Something <strong class="foo__text-strong">else</strong></p>
</div>
I will allow myself to quote #Intervalia:
Your first example is fine. In your second example you only need to
add a class if you plan to create CSS for it. class="foo__text-strong"
is needed if you need it to be.
His comment perfectly answers your question. However I would like to add another scenario which may come in handy.
It is regarding user generated content from a CMS (worpdress for example). In this scenario the user is usually writing content in WYSIWYG editor and can not add BEM classes or even the user is not so advanced to know about them.
In this case is perfectly fine to have a "parent" element in which you can style elements by tags.
Examples:
.text ul{}
.text p{}
.text iframe{}
.text img{}
.text strong, .text b{}
.text em, .text i{}
.text a{}
UPDATE 1: Info on using nested selectors:
Nested selectors increase code coupling and make reuse impossible. The
BEM methodology allows using nested selectors, but we recommend
minimizing their use.
https://en.bem.info/methodology/faq/#can-i-use-nested-selectors
So yeah if you think it is overkill you may go with #Rene's suggestion.
UPDATE 2: Helper Classes.
The BEM methodology doesn't have strict rules for creating helper
blocks. A lot depends on specific implementations and the personal
preferences of the developer. An example of a helper block in bem-core is the clearfix block.
https://en.bem.info/methodology/faq/#can-i-create-helper-classes
Perhaps this technique can help? Personally I always have few global helpers which I use a lot.
Example, the famous Screen Reader only styles:
.sr-only{
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}
In your case you can define for example .accent-color or simply .accent which can turn any element's color into red or whatever :)
You could use a cascade .foo__text strong if you are aware that:
It is not BEM compliant;
It wouldn't be possible to add a nested block with a <strong> element as a children of .foo__text.
Regarding the second point, the semantic of <p> element already has limitations. Your cascade just adds one: no <div>, no <ul> as child (because the parent is a paragraph)... and then in your case no BEM block that could have a <strong> element.
So, if you're not a purist, why not.
See also: BEM And Layout Rich Texts
Is it possible to make the entire .class CSS selector important? I'm thinking in this kind of structure:
.custom-selector !important {
display: inline-block;
vertical-align: middle;
position: relative;
padding-left: 5px;
}
I don't know if it's possible.
No, it's not possible. !important is thought to be an instrument of last resort and as such should be used sparingly. !importanting whole selectors would caricature that idea.
If you need to trump other styles, use CSS specificity to your advantage. You can use, e.g., these techniques to push your style declarations to the top:
double class name will trump single class name:
.custom-selector.custom-selector > .custom-selector
ID trumps class:
#custom-id > .custom-class
IDs can be duplicated, too:
#id#id > #id
inline styles trump any stylesheets:
<style>
p#id#id.class.class { color: green; }
</style>
<p id="id" class="class" style="color:red">I am red!</p>
First off !important applies to one specific declaration in a CSS rule. It doesn't apply to a class. So, "no" you can't make a class !important.
Second off, !important is just one part of CSS specificity. You can also use other ways to make a rule be a more specific rule to have precedence (such as referring to an id in the parent chain instead of just the class. When I'm writing CSS, using !important is my last possible choice - I'd much rather solve overrides with other specificity solutions. Usually, if you control all the CSS, this is pretty easy to avoid using !important. If you have to override some CSS that you don't control, then sometimes it is handy.
Check this question here for more details. As it explains things better.
I have created a web widget. That my client put in their websites. Basically on load it calls webservice and loads data specific to client.
As a result it looks like:
<div class="widget">
<div class="container">
</div>
</div>
Dynamically I apply CSS styles to my widget class. To look consistent with our corporate styling.
The problem is when client application styles overwrite the style I applied run time.
For example if client has, it overwrites my styles:
body {
margin: 0 auto;
padding: 0;
width: 90%;
font: 70%/1.4 Verdana, Georgia, Times, "Times New Roman";
}
Is there any way to break inheritance? Just to say whatever div with class widget styles has do not inherit parent styles.
I don't think you can break CSS inheritance per se, but you can try to circumvent it by following the rules of CSS specificity. Here's a good article about Specificity.
As a last resort, try adding !important to styles in the widget to give it a higher specificity than the default styles.
#myWidget{
font: 100%/1 "Times New Roman", Serif !important;
}
If the client is also using !important it could cause problems. If you could setup a jsFiddle with an example, we could help find the issue.
Note, going the route of adding !important should be a last resort as it's the 'nuclear option' of style specificity.
You can not force elements to NOT inherit parent styles.
You can however override all possible styles that you do not want changed. If your CSS specificity is higher than the customers specificity then your styles will be dominate/expressed on the page.
See:
CSS Specificity via css-tricks.com
Per your example using the code below would be more specific than the body declaration and thus override :
.widget .container {
font-family: Arial;
}
You can't break style inheritance as such, but you can ensure that your styles are either more important or loaded in the right order so yours comes out on top.
Have a look at the !important tag.
Alternatively if you load your stylesheets after theirs yours will take precedent (unless theirs is inline). You can use Javascript to load your styles after the body has loaded (But then you'd get a "flicker" effect).
You could also try inline styling. Inline styling has the highest priority. This will work if client overrides use an imported stylesheet.
Like others have mentioned, another option is !important.
You can also read up the relevant specs at http://www.w3.org/TR/CSS2/cascade.html where they describe exactly how they cascade. If above mentioned tricks don't work, perhaps specs will give you a clue or you will know for certain that this is not possible.
Use of the !important css attribute is considered a bad practice. Because it introduces the potential for precedence conflicts, and makes it extremely difficult to troubleshoot css in the long run.
A less intrusive approach to this problem is to delimit your widget with an id, and in your stylesheet, to reset some of the most important style declarations using the "universal" selector, such as:
#myWidget *{
margin: 0;
padding: 0;
background: none;
border: none;
}
For example. Then, define your overrides specifically.
In designing the HTML and CSS for a page, when should I use
img.className
versus
.className
versus
#idName
or some other variant?
Are there guidelines or recommendations?
Summary from answers
Thank you to all answerers - there is some excellent stuff here!
make CSS as specific as possible
use an OO approach
order: #id, tag, tag.className, .className
when to use each selector, also class/ID comparison
give selectors names based on purpose, not what they look like
use advanced selectors for smaller code, leave CSS classes for exceptions/overrides only
manage ASP.NET munging ID
In general you should be as specific as the item demands.
There is no general rule, it depends on the style in question.
A lot of people will recommend you keep to the lowest specificity with the theory that this allows the maximum cascading reuse but this is absolutely toxic in real world situations where you have multiple developers all working on slightly different versions of what a .foo might look like. Pollution from inheritance you did not want leads to massive bloat in trying to undo that locally or time-loss in refactoring.
The best guideline I always offer is to try and think of CSS in OO terms: class selectors map to interfaces more or less, tags map to classes, and ID selectors map to instances. Consequently decide if the style you want to apply really applies to that thing, all things like it, or anything which wants it.
I also strongly encourage you to make use of high level IDs on wrapper elements so you can write selectors in a namespace like fashion (i.e. #foo .bar, #foo .baz where #foo is unique to a page or set of page designs) which allows you both a level of specificity which reduces cross-design pollution and a level of generality which lets you make the most of cascading CSS reuse.
Best of both worlds.
It depends on the intended semantics, and, as others said, be as specific as possible.
#idName for unique elements on the page. Good examples are #header and #footer
TAGNAME for general purpose page styling.
TAG.classname and .classname for exceptions/overrides to the above rules.
And don't forget the use of advanced selectors. A bad example:
<style>
H1{ font-size: 200%; color: #008; }
#mainMenu { color: #800; }
.in_the_menu { color: #800; font-size: 150%; }
</style>
<h1>Hello World!</h1>
<div id="mainMenu">
<h1 class="in_the_menu">My Menu</h1>
</div>
The same could have been achieved with:
<style>
H1{ font-size: 200%; color: #008; }
#mainMenu { color: #800; }
#mainMenu H1 { color: #800; font-size: 150%; }
</style>
<h1>Hello World!</h1>
<div id="mainMenu">
<h1>My Menu</h1>
</div>
The second example gets rid of the superflous "class" attribute on the H1 element in the "mainMenu" div. This has two important benefits:
The HTML code is smaller and cleaner
You are less likely to forget to add the class attribute
If you take good care of you CSS, and make use of proper advanced selectors, you can nearly completely leave out CSS classes. And keep them only for exceptions/overrides.
Take this example which draws boxes with headers:
#content H2{
border: 1px solid #008789;
padding: 0em 1em;
margin: 0.2em 0em;
margin-bottom: 1em;
font-size: 100%;
background: #cccb79
}
#content H2 + DIV{
margin-top: -1em;
border-left: 1px solid #008789;
border-right: 1px solid #008789;
border-bottom: 1px solid #008789;
margin-bottom: 1em;
}
Now, as soon as you follow a H2 with a DIV in the #content element, you have a nice box. other DIVs and H2s are left alone:
<div id="content">
<h2>Hello Box!</h2>
<div>Some text</div>
<div>Some more text</div>
<div>Some more text</div>
<h2>And another title</h2>
</div>
If you get these rules right, you hardly ever need classes, and can work with IDs and TAG names alone. And as an added bonus, your HTML will be a lot nicer to read and maintain.
You preference should be, in order from highest to lowest:
id
tag
tag.className
.className
ID selectors are fast. Tag selectors are reasonably fast. Pure class selectors are slow because the browser essentially has to interrogate every element and see if each has that class. Getting elements by ID or tag name are "native" operations from a browser's context.
Also, I find it good practice to make your CSS selectors as restrictive as possible otherwise it just turns into a mess and you end up getting all sorts of unintended consequences where CSS rules apply where you didn't otherwise expect, which often forces you to create a similar yet different selector just so none of the rules regarding the first don't apply (translating into more mess).
Basically if you know if you only use a class on div elements then do this
div.className
not
.className
If you apply a class to several elements just list them:
h1.selected, h2.selected, h3.selected
instead of
.selected
In practice I find very few situations where you need to use "naked" class selectors or where it is advisable to do so.
you should use the selector best describing your rules
id: when you want to select one single element
.classname: when you want to style elements regardless of their tag
tag.classname: when you want to style only tags with the given class
tag tag tag: when you want to style all subelements of a tag
Class selectors
.className
This is to be used when you have more than one element on the page that you would like to apply the same style to. It can be to any tag element. So in the following all will use the same style as set out by the .className.
<p class="className"></p>
<img src="/path/to/image.png" class="className" />
But you can also restrict it like so:
img.className
By placing the tag along with the style definition, you're saying that this style is only to be used when it's the class used by that particular tag, in this case, an image.
HTML code will look like this:
<img src="/path/to/image.png" class="className" />
If you have other elements on the page using the same class style, but are not of the same tag, then the styles set out in this will not be applied and they will take on the more generic version as mentioned in the first example.
So repeating the example above:
<p class="className"></p>
<img src="/path/to/image.png" class="className" />
Only the image will take on the style as set out by img.className whereas all the rest will take on the style rules set in .className.
ID selectors
#idName
This is to be used when there is only one instance of a particular element that you wish to apply the style to.
You can also force it to apply only in certain tag conditions as you have earlier with the class definitions.
p#idName
This example will only apply to the paragraph block marked with the ID:
<p id="idName">
If you were to put that id on another element, like this:
<div id="idName"></div>
Then it will not take on the style set out and be ignored.
As to your two first selectors, the first of the two will overwrite the second, as it's more specific. You can calculate the specificity of a selector.
One thing worth noting is that some server side scripting technologies (most notably ASP.NET) don't play well with using IDs for your styling. If there is a chance your design will be used with such a technology, I recommend forgetting about #id selectors and use tag.className instead.
The reason is that ASP.NET actually changes the ID that ends up in the HTML based on a number of criteria, if the tag is output by a server side control.
I know this is a pretty old question but for all those who are reading this just now...
There are 4 categories of rules in general:
ID Rules, Class Rules, Tag Rules, Universal Rules.
And it's important to mention that class selectors are faster than tag selectors. So you should always use them in the following order
1. ID Selector
2. Class Selector
3. Tag Selector
4. Universal Selectors
In your case you should never use the tag name before class name.
You can find more information here: Writing efficient CSS
It really depends on the situation:
.error{
color:red;
}
p.error{
background-color:yellow;
}
div.error{
background-color:grey;
}
Always use the cascading effect of CSS to your advantage.
It's good practise to use the least specific rules you can for each rule.
How you structure your CSS will depend on the particular needs of the design.
Yes. You may want to use the same classname for two elements in the future. Be explicit and clear. This will also prevent class-rules from overlapping onto unintended elements.
h1.title { font-size:18px; } /* My h1's are big */
p.title { font-size:16px; } /* My p's are smaller */
.title { color:#336699; } /* All titles are blue */
Use ID's only when necessary, and only once per page.
When to use what depends on what you want to select. img.className (type selector + class selector) selects only IMG elements that’s in the class “className” while .className (just class selector) selects any element that’s in that class and #idName (id selector) any element with the ID “idName”.
But besides that, the selector all have a differente specificity that affects the order in which the properties of that rules overwrite the one of others.
So if you have an IMG element with the ID “idName” that’s in the class “className”:
<img src="…" id="idName" class="className">
The properties of the rules would be applied in the following order (specificity from highest to lowest):
#idName
img.className
.className
But when you use a specific class only for one specific type of elements (e.g. “className” only for IMG element), you can go with only .className.