I'm curious to know which way is 'best' performance wise, think of this simple general example, I wish to have an element which contains text, to be bold underlined and blue of colour.
I can use this way:
<p class="bold underlined blue">Happy little clouds</p>
or
<p class="bold-underlined-blue">Happy little trees</p>
The first would obviously produce more classes, but the ultimate re-use of these classes seems to be better than making the one very specific class, but again on the other hand, producing more classes, I presume this would have performance implications.
The former approach (using multiple classes) is definitely better. Not only can you style the elements individually with:
.bold {
font-weight: bold;
}
.underlined {
text-decoration: underline;
}
.blue {
color: blue;
}
But you can also style them for specific combination with each other such as:
.bold.underlined.blue {
font-size: 18px;
}
In the above example, the font-size will only be applied if the corresponding element has all three classes, which would essentially be the same as the latter method in itself :)
Not only does using specialised classes give you more versatility, but it is also faster -- as you are likely to reuse styles like font-weight: bold multiple times throughout your document, a dedicated class means that you will only have to write the declaration once, rather than having to write it in each individual selector.
However, these specialised classes should only be created for things that you will reuse multiple times -- creating a specialised class for something that is only used once would be redundant.
Hope this helps!
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 8 years ago.
Improve this question
It seems there are two major schools of thought on how to structure CSS and HTML. I was taught to keep the HTML as clean as possible, and all things stylistic should be on the stylesheet. This has served me well thus far, but with this approach I often notice redundancies and inefficiencies.
I read up on the atomic approach, and I really like the idea. It seems to be the method I naturally gravitate toward anyway.
My question:
Which way is really faster, considering the two following blocks of code:
HTML:
<div class="main">
<h1 class="m-10 theme-c1">header with margin and theme color 1</h1>
<p class="fz-1 theme-c1 m-10">paragraph with font-size 1em.</p>
<div class="m-10">
<p class="fz-1 m-10">blah</p>
<p class="sub-paragraph">Sub paragraph</p>
</div>
</div>
Stylesheet:
/*margin-left rule*/
.ml-10 {margin-left:
/*font-size rule*/
.fz-1 {font-size:1em}
/*theme color*/
.theme-c {color: #333};
/*display rule*/
.dps-blk {display: block}
/
/*sub paragraph styles*/
.sub-paragraph {
margin-left: 10px;
font-size: 1em;
font-color: #333;
}
Elements in the HTML above all get whatever style they need, and the styles above are non-descendants except for .sub-paragraph.
So is it faster for each element to cherry pick which styles it needs, or is it better to just give it a chunk of styles (like for .sub-paragraph)? With .sub-paragraph, I can see how it only takes one match to get all the styles. The trade off, however, is that there isn't much else you can do with that set of styles except use it on sub-paragraph, or override some of its properties with another rule when applied to something else.
I'm think with these two approaches, it's a decision on whether to the cost on data size or on processing time.
Edit
I appreciate all the feedback. I forgot to mention that I'm specifically interested in the processing speeds of the different approaches.
This is interesting nonetheless.
If you were to begin cherry picking individual styles, you would end up with a stylesheet like:
.red{ color: red; }
.green-background{ background: green; }
.w500{ width: 500; }
.ml20{ margin-left:20px; }
Which is not very maintainable.
It sounds like what you are looking for is a way to extend certain classes (i.e. .sub-paragraph) with pre-existing classes, adding the styles of other classes into .sub-paragraph. SASS's .extend directive is a great way of doing this.
Sass and other preprocessors are great at merging the ideas of maintainable code and semantic code together.
Edit 1:
If you are looking into which method (more classes/less properties or less classes/more properties) is faster, I would suggest doing some testing with Chrome Dev Tools' Timeline. The two methods of coding aren't the only thing that are going to affect how fast a page renders/paints, so it is always a good idea to test these if you are concerned about speed.
I organize my CSS by grouping certain types of classes together. When creating CSS classes I ask myself, am I going to reuse this class definition for anything else? Is it logical for me to separate this class' definition, will someone who has to read this after me want to shoot themselves?
Basically I would say, go for maintainability, an extra 1Kb on your Css will not choke anyone.
CSS is designed to use classes for certain groups of styles. The .sub-paragraph method is usually way better than the seperate classes method. If you are going to assign classes for each style seperately, you might as well just use inline styles, via the style attribute. You should usually try to avoid that for maintenance reasons though.
I think there is a place for both.
I don't feel that the abstraction belongs at class names like .p1-gr-brdr, though.
If you're writing very tightly-composed, atomic HTML partial-templates (for things like AngularJS directives), then you'd likely get more mileage out of .title, .subtitle, .just, .content, where you can specify very specific output for those components.
Changing those components will be very simple and straightforward, as they're so compact and self-contained.
And if you find yourself in a position where you need to override one, to compose an inherited class, then you either have the option of composing a new class-name, which now might not be 100% semantic/generic (".big-green-subtitle"), but is still 100% self-contained for those moments where you want your special-cases to feel loved, too...
...or you can then specify behavior with a second-level selector.
If your .header has a padding, but you don't want your .update > .header > .subtitle to be subject to that padding-bottom, on mobile-phones, in landscape orientation, on Tuesdays, then you can simply have an exception which states .update > .header { padding-bottom : 0; }.
Otherwise the cascade will continue as normal, and things will either pile on top of one another, or you will cancel out side-effects with specialized classes which cover the same properties...
Otherwise, I don't see why all CSS sheets don't look like:
.p1-br { border-width : 1px; }
.p2-br { border-width : 2px; }
.p3-br { border-width : 3px; }
.p4-br { border-width : 4px; }
.gr-br { border-color : green; }
.lgtgr-br { border-color : lightgreen; }
.sfmgr-br { border-color : seafoamgreen; }
.aqmr-br { border-color : aquamarine; }
.em1-wd { width : 1em; }
.em2-wd { width : 2em; }
.em3-wd { width : 3em; }
.rm1-wd { width : 1rem; }
.pc1-wd { width : 1%; }
...et cetera, until you've written out every atomic option you could possibly want, for any theme your project (and all of its components) might want to support, across all platforms.
That seems like a terrible use of your day, to write a unique class-name for every possible edge-case out there:
<div class="pos-rel
p1-br
p18-ng-tp
mrpc12-br-r
lggr-bg
bg-im-spr-id-123
pc15-bg-im-algn-lf
ofl-x-hd
ofl-y-aut
brd-bx">
Seems hefty for a single div, for instance.
This would not, however, be a bad idea, if you could write CSS rules, give them to classes, where you expect flexibility, and later had the hard-numbers to those rules.
Such that, say, you write out a class which expects to treat height in rems, margins in percents, border-radius in ems, will take a background-colour and an image-sprite (say it's a backdrop container for a corporate/retail site, with a watermark and logo, where other content will scroll above it).
Now you want to reuse that set of classes on the same component, but for a different client...
It would help if you could simply have some variables, which could live in a separate file, and be referenced by your classes, so that your units don't necessarily need to change, but you can modify all of your hard-coding stuff in one or two places, and swap different variable values in for different clients as easily as pointing at a different sheet...
...but that's what SASS already does, if you take the time to sit down and figure out how you want to engineer something, and make your build process adhere to that desired outcome.
I have this base HTML/CSS template out of which I will do a lot of child websites that will use different colours and image variations for stuff like <h> tags, background color, etc etc.
I am looking for approaches to modify the base theme and make it so that in order to create child templates with color variations I will modify a single line of code (something like .this-smart-class{color: #mycolorcodehere) and voila, all the elements using that color change.
I am already cooking a method to do this myself, but I am a beginner/intermediate in front end development and I would be curious of different approaches to do this.
I am looking to use only CSS for this, maybe some jQuery but only if proves to make it a lot practical.
To better understand the question have a look at the screenshot:
variations of the same layout.
If you find this question to "unspecific" please ask me before voting down or closing it and I will break it in multiple questions, but I think good answers may come out of this, I might not use the proper terms to be as specific as I want as I am not experienced enough.
It would probably be best to use a CSS preprocessor (I prefer LESS).
You can make different color configuration files like for example "color-config-red.less" and "color-config-violet.less" where you define your different colors in variables like #background-color etc. and reuse them over the whole project. With that set up you can simply include the different color configurations for different websites while having the same layout.
I tend to use a number of generic classes which I can apply to any number of elements.
For example:
.smalltext { font-size: 0.8em }
.bold { font-weight: bold }
.clear { clear: both }
.highlight { background-color: #999999 }
I have mentioned this before and some people were critical of it but it works for me.
Then I can say:
<div id="footer" class="smalltext"></div>
<div id="box-header" class="highlight bold"></div>
I am learning CSS on the fly, so if this is stupid, bear with me. I need a lot of different types of <p> tags, as I am using CSS styles to manage an ebook in HTML (this format is required, and I am not allowed to deviate from the established structure). At the moment I have 15 different <p> classes, and I will need a lot more (probably over 50). Many of theses classes are very similar, with only a 1 or 2 differences between any 2.
So, is it possible to have tag classes that inherit from other classes, similar to how OOP works? And if that isn't possible, then is there some way to make this more efficient?
No, there is no such things as multiple inheritance, and this is not about inheritance at all.
To format paragraphs in different ways, you can use several classes in a <p> tag, separated with spaces,e.g. <p class="warning important aside">. For each class, you can set CSS properties as desired (ranging from setting a single property to a complicated setup).
You need not (and should not) declare e.g. font family for each class separately. It normally suffices to set it for all paragraphs, e.g. p { font-family: Calibri, sans-serif; }. A class is not an object, or object-like. It is just a way to classify elements so that you can set CSS properties on a set of elements.
What I have seen in most of Giant sites like Google, Yahoo, etc.
1] Define minimum common style in one css class like:
.hFont { font-family: Helvetica, San-serif; }
.vFont { font-family: Tahoma; }
.sBold { font-weight: semi-bold; }
.bBold { font-weight: bold; }
2] You can define multiple classes in 1 tag. So Use this multiple classes in tags like:
<h1 class="hFont sBold">Hi this is Heading!!! </h1>
I think this should be best and efficient method which we can use.
This is just an example. So reduce and combine your same style in one css class.
You can use multiple classes:
<p class='main-class secondary-class'></p>
After that, style:
.main-class {
/*Your CSS code */
}
.secondary-class /*Selects <p> tags with second class*/
{
/*Styles that is different than the main class*/
}
I am coding a .psd image to html. But i confused with the best practise to do so. i.e
for styling a achor like a button i use following style attributes
.button {
padding: 10px;
display: inline-block;
text-decoration: none;
background-color: #3f4551;
color: white;
background-image: url("../images/icons/icon_left.png") no-repeat 10px center;
}
now i can use the to get the desired result.
However i have lots of anchor which have same styling as before only with minor changes like icon on right side instead of left and different color,gradient etc.. so i decided to break it in multiple class i.e
.button{
padding: 10px;
display: inline-block;
text-decoration: none;
background-repeat: no-repeat;
}
.icon_left{
background-position: 10px center;
}
.color_blue{
color:blue;
}
now i can use these classes to style i.e <a href="#" class="button icon_left color_blue></a>"
But in this way the markup is getting more and more clumsy and weird.So i decided to ask for which is the best practice ??? THANKS in Advance :)
That's a good start and you are going in the right direction.
Some further hints though, considering best practice:
Use descriptive names which are not explicitly telling their value. For example, do not use color_blue as class name because the color could change if you redesign your application. Better are names that reflect the purpose of that element, like default-action, disabled or emphasized. In the same manner, with-icon would be a better class name than icon_left. Names are about semantics, and not the visual representation.
Use specific selectors if applicable. For example, if the button classes are used by button elements use selectors like button.emphasized. That let's you reuse that class name for other types of elements (i.e. div.emphasized), so that you do not have to rename them into .button-emphasized and .block-emphasized.
If you know more about the structure of your document, you could even distinguish between #content > button.emphasized and #sidebar > button.emphasized and use different button classes depending on the element hierarchy.
Use selector inheritance if applicable. If a class shares the same property-value pairs amongst others that differ, you should use inheritance. For example .emphasized for rules that apply to all elements using this class, and button.emphasized & div.emphasized for specific rules, which can overwrite the more general ("parent") selector.
Apply naming conventions. Usually, the names are lowercase and the minus sign is prefered instead of using the underscore. Therefore, with-icon is better than with_icon. You can also use uppercase letters like so: withIcon. Personally i prefer the first version.
If I understand correctly ..Your on the right path! I know it looks like your source code is too stuffed but that's the way it works.Remember that classes are used for styling more than one element, and Id (if used in the proper way) are used to style a single entity/element
I'm trying to tidy all my css code on my site, I want to be able to be specific with the type. Let's say the type will be 20px, bold and blue e.g.
<h1 bold blue>Hello world</h1 blue bold>
So the css file will have:
h1 {
font-size:20px;
}
bold {
font-weight:bold:
}
blue {
color:blue;
}
Then as I go through my design process i can mix and match with colors and sizes etc. Is something like this possible?
this isn't possible exaclty like you want to, but what you can do is this:
<h1 bold blue>Hello world</h1 blue bold> // your idea
<h1 class="bold blue">Hello world</h1> // correct html, even slightly shorter
and
h1 {
font-size:20px;
}
.bold { // added . for being a class
font-weight:bold:
}
.blue { // added . for being a class
color:blue;
}
css-variables itself are possible when using something like lesscss, but this works in another way than the one you mentioned and your html-markup still has to be valid.
EDIT:
please note that, as edem (and others) said, using blue and bold as classnames in a real project isn't a good idea. i assumed you just gave this as short examples to ask for how to combine different "sets of css-rules" (read: classes). if thats not the case: stick to edems or tims explanation and take a look at guides for "semantical markup".
Colors rarely make good identifiers. Suppose "blue" is no longer blue? Maybe you want it to be red instead?
Font-weights ("bold" in your example) also are not good identifiers. Perhaps in the future you may prefer a font which looks better with a normal font-weight.
Determine the purpose of the style (e.g. article byline, or picture caption) and/or the semantic purpose of the element to which it is being applied, and name your styles accordingly.
You can then use a combination of classes (as others have mentioned) to achieve your desired goal.
This is against good practices. Let's say you have an article header type which can be found on any article page and a main header which is on every page:
.mainHeader {
font-size:20px;
font-weight:bold:
color:blue;
}
.articleHeader {
font-size:15px;
font-weight:bold:
color:red;
}
What if some day you decide that your article header won't be blue any more. If you change
.blue {
color:blue;
}
to
.blue {
color:red;
}
that wont'be good. You should name your classes/ids according to their semantical purpose.
The point is that CSS supposed to be succint so you can change the looks of your whole page with modification in 1-2 lines. The idea you present here is not succint therefore not considered a good practice.
I think you should use less css as the answer suggested above. By the way if you use some scripting language on your webpage like python or php you can use a template engine which supports inheritance and you can generate your own css code and you can use variables there. This simply does not fit in CSS alone.
Yes. Use classes.
<h1 class"bold blue">Hello world</h1>
h1 {font-size:20px;}
.bold {
font-weight:bold:
}
.blue {
color:blue;
}