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 6 years ago.
Improve this question
Let we have a html like this;
<div class="mainElement">
<div class="subElement1">...</div>
<div class="subElement2">...</div>
<div class="subElement3">...</div>
</div>
So if want to style that 'subElement1' which one is more standart or faster.
.mainElement > .subElement1{
/*some CSS here..*/
}
.mainElement .subElement1{
/*some CSS here..*/
}
.mainElement > div:first-child{
/*some CSS here..*/
}
From ones you have, best is:
.mainElement > .subElement1{
/*some CSS here..*/
}
because it targets direct child from parent class.
But if you really want performance, you want to target class directly:
.subElement1{
/*some CSS here..*/
}
Or if you want even more faster code, use IDs:
#subElement1{
/*some CSS here..*/
}
IDs are generally faster for browser to target, since they are supposed to be used only once per element.
Browsers read CSS from right to left, so adding a parent class/id unless you really need it, is only slowing down your code.
Why not just .subelement1?
If there is no reason to nest your selectors it is better off not to nest/couple them together.
But for your question it really depends on what you are trying to do the options you have posted all do different things.
The first one is fast and specific but selects only direct descendants of .mainElement
The second option selects all .subelement1 classes that are within .mainElement which right now is only one element but you can keep nesting them inside of each other and they would all get the same styling not just the direct descendants.
As for the last one it is the most specific and could get you into trouble it finds the a div inside of .mainElement that is a first-child this could lead to trouble if you were to change the markup at all and say uses spans instead of divs also only the first child will always get that styling no matter what class you gave it.
.subElement is enough, you shouldn't access the parent class first, cause it's affect to file size (althaough very small size) and make the css load file slower. Hope this link help you Writing efficient CSS
Related
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 1 year ago.
Improve this question
HTML
<a class="link cta"> link </a>
CSS
.link, .cta, .blueText, .title{
color: cyan;
}
The browser see the class names (link, cta) in html first then find the style in css and then apply the style.
Or
It see the class names (.link, .cta, .blueText, .title) in css first then find those class name in html and then apply the style.
I believe it's more like the second. Basically:
Not necessarily in this order:
The browser parses the HTML and creates a bunch of objects called The Document Object Model, or DOM.
The browser parses the CSS. Each CSS block is made up of a selector and then a bunch of properties.
For each CSS block, the browser looks through the DOM for all the elements that match the selector and then applies the properties.
In your above example, the selector is a list of classes but there are other kinds of selectors.
Note that in real life things don't always work out in that simple order as things can be loaded late, etc.
Hopefully that is of some help...
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
In my sass I'm keen for it not to get out of hand, i've a simple question/example what I'd like to know is what'd be the most efficient way to target the button in the example below?
Personally I like option 2 but have i done it correctly?
Call it picky but my problems are as listed below,
I'm not a fan of adding class/id to everything through html
Using Sass's ability to nest/target child elements within a parent is too overly specific
Option 1:
Give button class name in html making it easy to target in css
<div id = "box">
<!-- Give button class/id -->
<button class = "button1"></button>
</div>
Option 2:
Have _buttons.scss partial containing a .button1 class
On my main.scss target the parent container #box without button a class name in html, and then target nested button
buttons.scss
.button1 {
width: 100px;
height: 100px;
background-color: grey;
}
main.scss
#import 'components/buttons.scss';
#box {
button {
// Extend class from buttons.scss
#extend .button1;
}
}
I think it depends on how often you are going to use the styling for different buttons. Having an id of 'box' seems very specific to me though. Are you not going to have any other boxes? If so, this needs to be a class and not an id.
Instead of targeting a parent and styling the child (what happens when u want to style an element without that parent), I would just style the class on the button itself.
1st option - only one class needed in the HTML
.button1{
/* button css */
}
2nd option - id attribute needed, specific HTML hierarchy, more CSS output
#box button, .button1{
/* button css */
}
A lot of the answer as to what's "most efficient" when it comes to SASS and partials depends on what your complete SASS configuration will look like, so it's hard to say based on a specific example.
Are you going to need to use the style for this button in multiple stylesheets?
For instance, if you only have one style sheet (main.scss), I'd say there's no reason to use a partial at all. Partials should be used when you need to include the items in the partial in multiple stylesheets. Many people, for example, will write all variables and mixins in a partial and include them in every stylesheet.
Given this one specific example, the more efficient thing to do is not use a partial.
Adding a class to the button and targeting that class in the css, or targeting the container and child element (without class) is equally efficient:
#box button {}
button.button1 {}
Also, there's no reason to nest here if you don't have other rules inside of the #box parent:
#box {
button {
}
}
Just do this:
#box button {}
(And be careful with extends. If used in areas where they're not really needed, you can end up with a TON of unnecessary style rules. See this great article.)
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 9 years ago.
Improve this question
What is better using Alt A header nav ul li a {color: red} or Alt B .nav-link {color:red}?
The pros for Alt a is that i don't need to introduce any more css id/classes, but it is more prone to specificity war than alt B.
Check out jsfiddle: http://jsfiddle.net/43znf/1/
This really is subjective. When I first learned I did everything using Alt A, but now I do a mix of A and B. Alt A will apply the style to every <header> <nav> <ul> <li> <a> nested element, meaning that if you have multiple sections that match this nest pattern they will be styled in the designated way. When you use Alt B, you have to apply the class / id to a certain element, meaning that you can pick and choose which nested <a> tag will receive the style.
Bottom line, it really is not practical to just code in Alt A or Alt B. I would recommend using a little of each.
EDIT: If you plan on getting a job where HTML / CSS editing is required, your boss may have a certain way he or she wants it done. Just some heads up.
EDIT 2: It's also a good idea to know when it's the appropriate time to use an ID and when a Class should be used. ID's should only be used once in a document, classes can be used multiple times.
It depends on how versatile you want your CSS to be. If you have a single element that you want styled or just a handful, use the id or class. However, using Alt A will allow you to add new elements without necessarily having to assign the id/class.
You could use both and both have valid use cases in real life.
When you have an element that is unique and sure that its styles need not be used anywhere else you could make use of id for simplicity.
eg: Header section of your website "template" or "layout" which remains same and probably you would not reuse the styles.
But when you have to style an element say a form button, you have to use a css class, as the form button will be used many a times as you would see.
Using classes can be elegant in that if you stick to the principles. Do not overstyle an element using a single class. Split the rules in an intelligent manner so that each class can be used somewhere else. Try to avoid writing context specific rules in a class which will block you from inheriting the class.
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 9 years ago.
Improve this question
Is it a good practice to use many classes on one single HTML element? For example:
<div class="nav nav-centered nav-reversed navbar navigation-block"></div>
I don't mean that two or three classes on one element is bad, but how about four, five or even six?
Short Answer
Yes.
Explanation
It is a good practice since an element can be a part of different groups, and you may want specific elements to be a part of more than one group. The element can hold an infinite number of classes in HTML5, while in HTML4 you are limited by a specific length.
The following example will show you the use of multiple classes.
The first class makes the text color red.
The second class makes the background-color blue.
See how the DOM Element with multiple classes will behave, it will wear both CSS statements at the same time.
Result: multiple CSS statements in different classes will stack up.
You can read more about CSS Specificity.
CSS
.class1 {
color:red;
}
.class2 {
background-color:blue;
}
HTML
<div class="class1">text 1</div>
<div class="class2">text 2</div>
<div class="class1 class2">text 3</div>
Live demo
It's a good practice if you need them. It's also a good practice is they make sense, so future coders can understand what you're doing.
But generally, no it's not a good practice to attach 10 class names to an object because most likely whatever you're using them for, you could accomplish the same thing with far fewer classes. Probably just 1 or 2.
To qualify that statement, javascript plugins and scripts may append far more classnames to do whatever it is they're going to do. Modernizr for example appends anywhere from 5 - 25 classes to your body tag, and there's a very good reason for it. jQuery UI appends lots of classnames when you use one of the widgets in that library.
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 4 years ago.
Improve this question
What is the 'best practice' in terms of including hierarchy within css names? EG:, suppose we have the following html:
<div class="foo">
<div class="$className2">
<div class="$className3">123
</div>
</div>
</div>
Should $className2 include 'foo-' as a prefix, and $className3 include both 'foo-' and $className2 as a prefix? Or should the parent class names not be included within child class names?
There is no need to include a parent class's name. CSS selectors will handle any parent formatting you need.
A class, should be describing the type of content you are using. For example
<div class="sidebar">
<div class="error">
</div>
</div>
It is likely that you are going to want to have formatting specific to the error class, that is irrespective of the sidebar class. In the event that you want formatting for the error class that is specific to the sidebar, a css selector could handle that for you
.sidebar > .error
or
.sidebar .error
Very simply, are you reusing those class names or will you be reusing those class names anywhere other than in the same kind of structure? If not then it is not necessary to limit it by parent. If you are, however, then it would be a good idea to explicitly indicate which child element is which by including their parent node selectors.
One thing that I do most of the time is to prepend an underscore to child classes - I would use the following css for the html from your example:
.foo { ... }
.foo ._$className2 { .. }
.foo ._$className3 { .. }
In this case, ".foo" would be wrapping something like a "foo component". And every child class that is only used inside this wrapper (meaning it wouldn't make sense on its own) is prepended with an underscore. This keeps your css clean and makes it easy for you to see whether a class is intended to be applied to elements everywhere on the page or whether it should appear in a special context.
There aren't hard best practices when it comes to CSS class naming. Relevant factors like how many rules you have, how modular your components are, and the scale of your website are important considerations.
For small sites, I prefer to keep the CSS classes very simple.
In your CSS, you can use a nested selector to target elements that are structured in the way you presented like this:
.foo > .bar > .baz { ... }
HTML:
<div class="foo">
<div class="bar">
<div class="baz">
...
</div>
</div>
</div>
For larger sites, or if you're looking for a prescriptive naming pattern, one popular methodology is block-element modifier (BEM).