I have a html webpage containing with lot of css. Let's say if I have one style per div, do I need to add it to my external css file or just write internal css inside of that html page?
Take a look at this example.
<div class="sub">
Link <i class="fa fa-user-circle-o" aria-hidden="true"></i>
</div>
I need to add two different colors to "link" and icons. I can simply do this way.
<div class="sub">
<a href="#"> <span style="color:red"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" style="color:black"></i></a></div>
Or can add classes and write it to external css also.
<div class="sub">
<a href="#"> <span class="color-1"> Link </span>
<i class="fa fa-user-circle-o" aria-hidden="true" class="color-2"></i></a>
</div>
I know those two methods are working but need to know the best practice for this type of situation. Internal or external?
In a short answer:
As far as possible don't use inline style, because inline style has Highest priority after !important keyword.when we have too many lines and use of inline style, it is very hard if we want to find and overlay it.
Actually it's a good practice to have your CSS in external, but it depends upon the situation. For this, it is best to use inline CSS.
Related
I'm not sure if SO is the right place to ask such question. Let me know if it is not so.
I'm learning the BEM CSS methodology recently and I like how it solves many of the CSS problems like specificity issues. It makes our CSS more maintainable.
As I'm new to it, I'm having a hard time creating correct HTML layout with proper BEM class. I've created a module using BEM and would like experts on opinion on what could be the correct layout according to the best practices of BEM.
Here is the screenshot of what I'm trying to using BEM CSS methodology.
Here is HTML layout that I've come up with so far, please let meknow what would be right way to achieve the same.
<section class="content">
<div class="step-nav">
<div class="step-item">
<div class="step-item__left">
<div class="step-item__progress">
<div>
<i class="fa fa-lightbulb-o" aria-hidden="true"></i>
<span>Step 1</span>
</div>
<div>100%</div>
</div>
<h2 class="step-item__title">General Information</h2>
</div>
<div class="step-item__right">
<i class="fa fa-angle-right" aria-hidden="true">
<span class="screen-reader-text">Next</span>
</i>
</div>
</div>
<div class="step-item"></div>
<div class="step-item"></div>
</div>
</section>
Looks about correct, but you should have just a step-nav block, and all the subsequent child components are simply elements, i.e.:
step-item should really be step-nav__item, since item is an element of step-nav
step-item__left should really be step-nav__item--left since left is a modifier. With that in mind, you should combine them so that you will be using <div class="step-nav__item step-nav__item--left"> in the same nesting level, removing that extra unnecessary level of <div> nesting
Of course, if you think step-nav is too long of a word, you can use step instead.
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
I am a new fresher in front end, my basics are really poor. I was reading an example code. The code is like this:
<ul class="list-inline intro-social-buttons">
<li>
<i class="fa fa-twitter fa-fw"></i> <span class="network-name">Twitter</span>
</li>
<li>
<i class="fa fa-github fa-fw"></i> <span class="network-name">Github</span>
</li>
<li>
<i class="fa fa-linkedin fa-fw"></i> <span class="network-name">Linkedin</span>
</li>
<li>
<i class="fa fa-fire fa-fw"></i> <span class="network-name">freeCodeCamp</span>
</li>
</ul>
After I checked whether there is a class called network-name, the answer is no. So I want to know what is the meaning of span class="network-name" here?
Span has no meaning. It is a generic inline element with no associated semantics.
I check whether there is a class called network-name,the answer is no.
The answer is "yes". There is an HTML element with network-name in the class attribute. That makes the element a member of that class.
There might not be any CSS that makes use of it. There might not be any JS that makes use of it. The class does exist though.
span is generally used for applying many attributes to inline content. Alone it adds no value at all to the page. If there is no JavaScript, CSS or other code using this class network-name or targeting the span element directly then it will make no difference if these span are removed.
See the HTML span tag W3C documentation.
The span tag is used to group inline-elements in a document.
The span tag provides no visual change by itself.
The span tag provides a way to add a hook to a part of a text or a part of a document.
The tag also occupies only the space it needs to display what it contains
check W3Schools Span Definition and usage
As for the class="network-name" check the head of the document where you got the code its surely linked to some online style sheet(most likely Bootstrap)
I was going over this codepen and I saw this <dropdown> tag. I dont know if this is a legit tag like <div>, <span>, <section> etc..
<dropdown>
<input type="checkbox" id="toggle1" checked>
<label for="toggle1" class="animate">Editor <i class="fa fa-list float-right"></i></label>
<ul class="animate">
<li class="animate">Source <i class="fa fa-code float-right"></i></li>
<li class="animate">Fullpage <i class="fa fa-arrows-alt float-right"></i></li>
<li class="animate">Debug <i class="fa fa-cog float-right"></i></li>
</ul>
</dropdown>
I think Xml allows you to have custom name for tags/ DOM elements but I don't think the author is using Xml.
I think the author made up his own element that describes the section that he is writing about. I didn't know you could do this. I also saw <time> one time being used in html. Can someone explain to me about how it's ok to make up your own tag names or show me documentation. I'm assuming this is an html thing
There is no dropdown element in HTML5 standard set.
HTML5 allows custom elements if they contain '-' in their names. So they'd better use <drop-down>...</drop-down> .
<dropdown> is not a valid HTML tag. Not sure where you get this piece of code from, but you should avoid using custom tag. Use class selector / ID selector instead.
On the other hand, <time> is a HTML tag in HTML5 specification. Documentation is here.
I'm trying to put a block of HTML into a field in a content management system, but it keeps stripping out one of the elements. In particular it is stripping out the <i class="sprite arrowDDnav"></i> from the block below.
<a class="static selected menu-item rootActive" href="/community/presbyterian-healthcare-foundation/Pages/default.aspx">
<i class="sprite arrowDDnav"></i>
<span class="additional-background">
<span class="menu-item-text">Presbyterian Healthcare Foundation</span>
<span class="ms-hidden">Currently selected</span>
</span>
</a>
Any idea why this might be? And any idea how I can "trick" the CMS into preserving the above HTML, or should I resort to using JQuery and document.ready(...) to inject the element in the appropriate place?
If I have a site with a couple of font awesome icons on it, e.g.
<i class="fa fa-fw fa-cloud "></i>
And run this through the WCAG 2.0 validator I get the following error:
Success Criteria 1.4.4 Resize text (AA)
Check 117: i (italic) element used.
Repair: Replace your i elements with em or strong.
Error Line 185, Column 158:
<i class="fa fa-fw fa-cloud"></i>
I realize that the rule shouldn't really apply in this case, as it is there to ensure that <em> and <strong> are used instead of their non-semantic counterparts <i> and <b>. But the problem still exists if I have a client that requires me to check all the WCAG2.0 boxes.
So does anyone know what would be the proper way. Should I change them to <em> instead, does that give screen-readers any difficulties? Any other suggestions are welcome!
First, <i> does have semantic meaning in HTML5 (but was only presentational before that). Assuming you're using HTML5, the validator you're using is wrong to flag all occurrences of <i> as inappropriate.
Second, changing
<i class="fa fa-fw fa-cloud"></i>
to
<span class="fa fa-fw fa-cloud"></span>
is good but it doesn't fix the real accessibility issue, which is that you don't have any text alternative to the icon (at least it appears that you don't). For the sake of argument, let's assume your fa-cloud icon is inside an <a> tag. Something like this (using Bootstrap's sr-only CSS class):
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
<span class="sr-only">Download</span>
</a>
or like this (using WAI-ARIA's aria-label attribute):
<a href="..." aria-label="Download">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
</a>
is the solution. Even simpler would be to show the text to everyone:
<a href="...">
<span class="fa fa-fw fa-cloud" aria-hidden="true"></span>
Download
</a>
from font-awesome doc:
You can place Font Awesome icons just about anywhere using the CSS Prefix fa and the icon's name. Font Awesome is designed to be used with inline elements (we like the 'i' tag for brevity, but using a 'span' is more semantically correct).
So, you could try changing your 'i' tags for 'span'.
It very much depends on what the content is inside the i tag is semantically. WCAG2.0 is a set of guidelines, not hard and fast rules.
According to the HTML5 spec:
The i element represents a span of text in an alternate voice or mood,
or otherwise offset from the normal prose in a manner indicating a
different quality of text, such as a taxonomic designation, a
technical term, an idiomatic phrase from another language,
transliteration, a thought, or a ship name in Western texts.
From: http://www.w3.org/html/wg/drafts/html/master/text-level-semantics.html#the-i-element
If the content is something that needs to be "emphasises" then, no use the em tag as that is semantically correct across all user agents. The example on the spec, with a Latin technical name for an animal, is a perfect example of something that would be italicized, but not emphasised (although visually they would look the same).
<p>The <i class="taxonomy">Felis silvestris catus</i> is cute.</p>
Would be styled:
The Felis silvestris catus is cute.
So, if you can justify why the text is "italic", but not emphasised, keep it as is, otherwise change it to a semantically appropriate tag.
Adding to danielnixon answer (+1): if I want to use a fontawesome icon as a decorative thing in the UI (not a link, button, etc), I add a span with a wai-aria attribute:
<span class="fa fa-small-arrow" role="presentation"></span>