Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
In an online tutorial, I was recently told to create a class for nav elements called "nav". I'm a beginner in CSS, but is it just me, or is this redundant/confusing/bad practice?
NO it's not redundant.
YES it's redundant if you think in your specific case you're fine with nav{ /*blaah blaah*/ }
<nav> is a Semantic HTML5 tag that represents toward SEO a navigation. A navitagion is all you want it to be. So in the case you have multiple nav elements in our page and you're OK to target-styles directly the tag element using nav I'll be glad to see that.
It's not redundant. The DOM element nav is different from the CSS class nav.
If you wanted to style this element by class, you would use this style declaration (for example):
.nav { background-color : #F00; }
if it were styled by element type it would be:
nav { background-color : #F00; }
This may seem trivial, but that period . makes a difference. It means you are identifying the item by class and not by element name. If you use the class syntax (with the .) then you could also write:
<div class="nav"></div>
This would show with a red background if you included the class definition, but not if you styled the element type directly.
In simple applications you may be able to get away with directly styling element types (e.g. <nav>) as opposed to classes (e.g. class="nav"), but as you get more complex layouts you are going to want to use classes. Additionally, if you use a selector-based library like jQuery, or document.querySelect() you may have good reasons for specifying a class.
If you truely can know that all <nav> elements can be styled the same in all your pages, then by all means just use the element selector, but to leave yourself flexibility it's best to use classes.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I did some research and couldn't definitively find the answer to whether its best practice to use a class selector or tag selector for a nested element. Say I have the HTML:
<ul>
<li class="list-item-content" >
<img src="/images/flags/fr.png" class="country-flag">
</li>
</ul>
I could write :
.list-item-content img{
vertical-align: middle;
}
Or
.list-item-content .country-flag{
vertical-align: middle;
}
Which is best practice? Since the browser matches rules right to left, I would assume the second way is better as with the first way the browser with first match ALL images, then check the parents....
For more specific css you have to use both like following :-
.list-item-content img.country-flag{
vertical-align: middle;
}
It will define more clear nesting structure.
Personally, I think using two classes in the rule like $('.class1 .class2') matches more efficiently and is better practice. And maybe rarely need 3 classes.
In case you are very sure a class is unique, then $('.class1') maybe enough.
It depends of the complexity of your project and preference of your team.
In term of performance, selecting nesting items with something like this
.list-item-content .country-flag{}
which translage to
select .country-flag elements descendant of .list-item-content element
could have a performance penalty on large project (DOM) or in device with limited capabilities (like smart tvs or old mobile devices).
In order to mitigate this risk you can try to use a name convention which will help you to prevent selecting nesting element in an expensive way.
One of the methodology is called BEM.
Briefly the convention is as follow:
.block represents the higher level of an abstraction or component.
.block__element represents a descendent of .block that helps form .block as a whole.
.block--modifier represents a different state or version of .block.
So you HTML could be rewritten like this:
<div class="componenet">
<ul>
<li class="componenet__list" >
<img src="/images/flags/fr.png" class="componenet__list-flag">
</li>
</ul>
</div>
in this case you can select directing your class
.componenet__list-flag {}
More info here:
http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
Most of the time you will not trying to match all img therefore 2nd convention is prefered
.list-item-content .country-flag{
vertical-align: middle;
}
This is another good practice by Harsh Sanghani as well.
.list-item-content img.country-flag{
vertical-align: middle;
}
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am relatively new to CSS and yet I seem to have got the language reasonably well for a newbie. However, whilst many of the tutorials I have read often warn about "organising and structuring your stylesheet properly" (and I can certainly see why now I have created some rather long stylesheets myself) I cant for the life of me find any info about a standardised format for a styleheet or a logical pattern for layout that makes later human reading easy.
For example, do I create a comment-bracketed section for each "geographical" section of my page (header, row1, row2, article1 etc) and keep all styles for that section within those comment borders? The problem seems when I have styles that get re-used in other sections - and putting them under a section for page-wide styles then negates the purpose of grouping them by section at all. Likewise, structuring my stylesheet by grouping based on text styles, layout styles etc seems even more confusing.
Is there a "good practice"? I know this sounds dumb but it seems no matter what you do with HTML and CSS somebody is ready to tell you its wrong, bad practice or unsemantic and I'm left confused. I want my code to be a good example of my work in case an employer wants to check it in future.
I've never been actually taught, however I can let you know how I organise my CSS documents. As you say, I like to divide it up into "geographical" areas... i.e. the rules that apply to the header, the side bars, the main content, the footer, etc. And then, below these I add very specific rules, say if I need to style a form or a table on a particular page. Finally I add a "General Gubbins" section at the bottom when I add generic rules that may apply across the board.
Oh yes, I also like to add the designer's palette to the top for quick reference.
For example...
/*
PALETTE:
dark grey : #555555;
pink : #d93575;
*/
/* HEADER */
#header {...}
#header ul {...}
/* SIDE BAR */
#side {...}
#side ul {....}
/* CONTENT */
#content{...}
#content p {....}
/* FOOTER */
#footer{...}
#footer div {....}
/* FORMS */
form {...}
input {...}
/* GENERAL GUBBINS */
.center {...}
strong {...}
floatleft {...}
These guys advise you to "Organize the Stylesheet with a Top-down Structure" ( http://net.tutsplus.com/tutorials/html-css-techniques/30-css-best-practices-for-beginners/ ). I often use multiple style sheets. In MVC for instance - you can regiser styles on a per-view basis. That way you can put view-specific styles in a specific style sheet while not messing with your 'shared' or 'layout' one.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I understand the title is a bit misleading, but I come from an Object-Oriented background, and I've recently began a shift towards web development. I've only got a basic grasp of HTML, and been learning and messing around with CSS, but there are some parts of it that are a bit confusing, and I'm trying to get it into terms I can understand.
My CSS:
.Person .span4 p
{
margin-left: 10px;
margin-right:10px;
margin-top:10px;
}
From what I can understand, this means that any p tag that is inside a container, like with the class of "span4", which is in turn inside another container that has class="Person" will be formatted with the specifications listed above.
In other words person.span4.p.format(String[] formatArgs), where the formatArgs are the margin-left, right, and top.
The Question: Is this an appropriate way to look at it?
I know it might be comparing apples to oranges, but I'd like to get an opinion before I go running with some conclusion that could be very wrong, and an actual explanation on how these work.
Your question about .Person .span4 p is correct, that will style a p element that's a descendant of an element with a span4 class that's a descendant of an element with a Person class.
However I wouldn't try to interpret classes in HTML as similar in any way to OO classes. They're completely different concepts, and I think that'll just end up confusing things.
Classes can be assigned to HTML elements using the class attribute (class="span4"), and these can then be used in CSS or JavaScript to apply additional styling or behaviours to those elements. Think of giving an element a class as tagging it with a particular keyword, so it can be easily targeted later. Elements can also be assigned multiple classes by separating them with a space, eg. class="span4 box".
In addition, .Person .span4 p isn't actually a "class", it's a selector. The .span4 syntax is called a class selector, the p is an element selector, and using a space between two selectors creates a descendant selector. Additionally #myId is an ID selector, and there are plenty of other types of selector as well.
I'd recommend this guide as a good way to get up to speed on the correct terminology.
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 8 years ago.
Improve this question
My website is a simple one using images. The whole site content is based on the menu's div tags. I added link using tag and created separate hover effects for it using different , now what happens is when i hover that link the same hover effect that appears for menu occurs and the hover i created for the link doesn't work. I can close menu's div only at the last[as the alignment is getting changed if i close the menu's div before the link and use a different div for the link]. Please suggest a solution, if u want me to post the code to make it clear please tell it. Thank you.!
its best to make sure that your making sure the pseudo-class is specific to a certain node. This can be achieved by going :
#(div name) a:hover {
color: blue;
text-decoration: underline;
}
it'll ensure that the a attribute nested inside of the specific div is being referenced.
You can use attribute selector, to select particular link, or type of link, based on what's in markup: Here's example:
a[href="www.yoursite.com"]:hover { color: red; }
You can take any attribute that's inside your html tag, to select (id, class, href, title, alt etc. even made up attributes).
You can take it step further, by using ,,similar'' operator, which selects element based on, if specified phrase exists in the attribute (but it's not exactly same). For example:
a[href~="https"]:hover { color: red; }
Will select all links with https inside href atribute.
Remember, that attirbute selector isn't suported in ie6, and is problematic in ie7, keep that in mind, you can look for workaround easly tho.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I read an article where it was recommended that we should ONLY use classes in our markup and only use ids when we need to refere to it from javascript (as it is easier to attach functions to ids)
At the moment I only use classes when I have more than one element that needs the similar style. However the article (which I THINK I read - but have no reference) stated that we should use classes throughout
I would do this:
<header id="banner"></header>
Where as the recommendation was :
<header class="banner"></header>
(even though the banner is only used once per page)
is this the new "good practice"?
Thanks
As far as I know you are correct, you should use classes when you need to style multiple elements and IDs when you are only styling a unique element.
I think you may have stumbled on an article about object oriented css. The basic idea is that you should think of the style as a sort of abstraction which is linked to your markup via classes. I find it to be a good technique for keeping things organized, but, as with all techniques, it's not a universal hard and fast rule. I see no problem with linking style to markup with ID's, as long as that makes the most sense.
It's what "makes sense" that is the real tricky thing to define.
ID Attribute, Definition and Usage
The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).
The id attribute is most used to point to a style in a style sheet, and by JavaScript (via the HTML DOM) to manipulate the element with the specific id.
Read more about it here!
CLASS Attribute, Definition and Usage
The class attribute specifies one or more classnames for an element.
The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by a JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class.
Read more about it here!
So, you can style using either Id's your Class's, just knowing that the class can be re-utilized on other elements across your web page, the Id must always be unique.
The reason to tell that Class's are the best attribute to utilize to apply CSS is because you can have generic class names and use then a lot through your web page, thus simplifying and reducing the time spend coding :)
Simple example:
HTML
<div id="theUniqueID">
Hello!
</div>
<div id="theUniqueIDTwo">
Hello Again!
</div>
CSS
#theUniqueID {
font-size: 15px;
text-align: right;
}
#theUniqueIDTwo {
font-size: 15px;
text-align: right;
}
Can be reduced to:
#theUniqueID, #theUniqueIDTwo {
font-size: 15px;
text-align: right;
}
And can be generically utilized across the document like this:
.format_01 {
font-size: 15px;
text-align: right;
}
Having then the HTML like:
<div class="format_01">
Hello!
</div>
<div class="format_01">
Hello Again!
</div>
<div class="format_01">
Hello Again and Again!
</div>
Ps:
Sorry for the overkill answer, but this allows others with less knowledge to learn as well.
Basically you should use id for unique elements that means if you want to keep an element on the page that won't be appear on the page twice then you should use id and to style a group of elements with same style or to keep some elements in the same group you should use class.
But remember, you can also use class for a single a element but you can never use an id for more than one element on the page.
For example, getElementById or $('#idOfElement') (using jQuery) returns a single element but getElementsByClassName or $('.idOfElement') (using jQuery) returns an array of matched elements. So if you have more than one element on the page using same id then you'll get only the first element that have the id, so never use id for more than one element.