Need some guidance understanding CSS targeting of classes - html

After googling quite a bit I haven't been able to find documentation that was specific, to be honest, I don't know how to phrase this question without getting an irrelevant response because I have no idea what the name of the item I am looking for is called. In my mind I'd call it a element/class selector.
When targeting specific elements to style I do not always get the result that I want due to the style not applying. For example in something like this:
<div class=box>
<div class=smallerbox>
<div class=something>It has some text in it</div>
<div>
</div>
Now I would like to just be able to edit with CSS to look like this:
.something {color:#FFF}
But instead sometimes it doesn't work and I have to do this:
.box .smallerbox .something {color:#FFF}
Now the problem is I am not always sure how far back to go and I end up adding in extra stuff that I don't need or wasting time because I do not fully understand what I am doing. Adding !important doesn't always work either.
The reason I think I have to do this is because I am using bootstrap.css and this way I have to specifically target the class or it gets overridden by the parent class styles.
Am I correct for thinking this way?
Any tips or methods to save me from madness of learning HTML/CSS/Javascript/PHP through random guides and documentation would be gladly appreciated.

What you are referring to is class/CSS specificity. This is a good start in understanding: http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/
But there are plenty of other articles online you can look at.
Basically a rule of thumb is not to over qualify your selectors (i.e. use the minimum needed). This way if you need to override a style later on you can be slightly more specific or add an extra class to add/override styles to the existing style.
When you nest your style references too much it soon becomes a nightmare to manage and you MUST try to avoid !important at all costs. If CSS is done correctly it shouldn't be needed.
Some libraries can set styles with certain class names and some do use long chains, so naming your classes becomes a difficult task too. But most shouldn't interfere too much as long as you load their CSS first and yours after.

.box .smallerbox .something {color:#FFF}
means, give color : #FFF to something inside smallerbox which is kept inside box, so, this would be applied only to div named something for below
<!-- box
|
|
|-------smallerbox
|
|
|-------something <= make this white -->
but when you say :
.something {color:#FFF}
it means, any something which has no css defined for it...check this fiddle for understanding better
Fiddle here

Related

Can I use identifiers in CSS3?

I want to apply some different styles to HTML elements giving them custom classes for which I will write different CSS style rules.
I'd like to do like:
<p class="padding-top-15">
And then have CSS rules where top and 15 are just identifiers.
For example I'd like my CSS to be like:
.padding-$identifier1-$identifier2 {
padding-$identifier1: $identifier2 px;
}
Is this even possible with CSS3?
No, you cannot. There is nothing even remotely like that in CSS.
Try asking a new question where you explain what you wish to accomplish, instead of presenting an invented syntax to solve an unspecified problem. Note that if it occurred to you use a class name like padding-top-15, you have probably misunderstood some basic ideas of CSS. Think how confusing things will be if you later decide to change the top padding of that class to a top margin of 10px.

How to deal with the need to change CSS class names

I'm looking for people's strategies for dealing with the inevitable need to change or otherwise adapt a CSS class to accommodate new HTML elements. I find myself in this situation fairly often so I'm hoping other people share my pain and can advise here.
Imagine you have a table of products with the nice semantic class name products. This is styled appropriately in your stylesheet. A few months down the line, your boss asks you to create a staff list on the site, "styled exactly the same as the products list".
This immediately raises an important question: what to call the new staff table. The only options I can think of are:
Give it the class name products as well. This is the quickest solution but ruins the semantics. The naming makes little sense especially to future developers.
Change the class name to something that can encompass both products and staff listings. This would negate the utility of separation of markup from style as the HTML would need changing. Also, I can't think of a single non-presentational class name that could conceivably apply to a products and a staff list.
Introduce a new class name and edit the CSS file such that .products { ... } becomes .products, .staff { ... } and .products thead th.number { font-weight: bold } becomes .products thead th.number, .staff thead th.number { font-weight: bold }, etc. Another ugly solution which will only get more complicated as time goes by.
What's the best course of action to take here?
N.B. I'm sure this problem is easily solved using frameworks like LESS (I've not used it personally) but this solution strikes me more as a 'cover-up' than an actual remedy.
If you had to put your style of the table into a few words, what would it be? I try and use that to name styles that I am gunna use in more then one place. Then I have an idea of what it will look like if I use the class.
Example:
.table-striped{}
How about Option 4:
Make a copy "products" as "staff" and continue to work on them separately as time goes on.
There are basically two schools of thought here.
1) Style that follows markup
2) Markup that follows style.
You have to figure out which one you want to do, and try to stick to one or the other. if you mix too much then it's pointless and you just have a huge mess.
In the first, you have a set markup that doesn't change. You figure out style to make it look the way you want. This is in the vein of css zen garden. It requires that your markup be extremely semantic. The drawback is that you often have a lot of duplicate styles because it's not always possible to style cleanly when using this method.
In the second, you create a lot of common styles, then adapt your markup to fit the styles. For instance, you might have a classes of "float", "thinBorder", "bold" then apply those styles to your markup. The drawback here is that if your style needs change then you have to change the HTML (or make bold not be bold, or some such). The positive is that your CSS is much more clean and maintainable.
It sucks, but you have to make tradeoffs.
Hmm...
Basically the root the problem is that your original thought of creating the first style class (.products) was too narrowly named. It is not always possible to know that you will need to reuse a significant portion of a CSS definition at a later point but based on your question it seems like you are in that line of business.
The core CSS framework does not have the way to say 'make my new style (.staff) be the same as another style (.products) with these overrides'
But I believe that the LESS framework does give you the ability to define a class (.coolTable) with all the properties and re-use these properties in multiple other class defintions (.products and .staff) quickly.
The LESS framework is not a 'cover-up' as much as an extension to the capabilities of CSS.
This is one of the things I really dislike about CSS. With all the powerful languages at our disposal, this one just seems crippled from the get-go to handle very common scenarios like yours. I too struggle with this all the time and end up either copying all the .product-related class defs to my new one or adding my new one to the .product ones. They could be pulled out later.
I need to study up on the pre-processors too because what I would love to do is something OOP-y - define b 'base class' that both .product and .mynewone inherit from and go from there.
But #3 is your best bet IMO.
I am going with first option because if everything is same & there just a change in content. So, is better to use the previous products class for staff also & Your can separately define your staff panel with the help of comment <-- staff plan-->inside the HTML page.
I would go with first option, to have class products with this block.... or maybe like class="products staff"
This way I won't be having duplicate styles(even from future aspects,when code/styles might change a lot), and any specific styles for products can be done like this by new class(or by another way of using parent class in styles to give more specificity of styles).
Yes, product class word doesn't makes much sense here, but again even for future developers, it still means you are using styles of staff class,not related to logic...
But still yes, if possible to modify markup at ease from product to some other word , I would do it.. but not as such a major requirement in these case...
Introducing individual class name for new type of content would probably be most right solution. But unfortunately current CSS syntax is far from perfect and thus forces us to be too verbose in our CSS by listing full selectors one by one.
So in practice, most maintainable solution is usually to try to find a common name for different things styled identically.

Should css class names like 'floatleft' that directly describe the attached style be avoided?

Lots of websites use class names like floatleft, clearfloat, alignright, small, center etc that describe the style that is attached to the class. This seems to make sense so when writing new content you can easily wrap (for example) <div class="clearfloat">...</div> around your element to make it behave the way you want.
My question is, doesn't this style of naming classes go against the idea of separating content from presentation? Putting class="floatleft" on an element is clearly putting presentation information into the HTML document.
Should class names like this that directly describe the attached style be avoided, and if so what alternative is there?
To clarify, this isn't just a question of what to name classes. For example a semantically accurate document might look something like:
<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>
...
<div class="foobar">Another unrelated topic</div>
Say all these divs need to clear floats, the css would look something like:
div.foo, div.bar, div.foobar {
clear:both;
}
This starts to get ugly as the number of these clearing elements increases - whereas a single class="clearfloat" would serve the same purpose. Is it recommended to group elements based on the attached styles to avoid repetition in the CSS, even if this means presentational information creeps into the HTML?
Update: Thanks for all the answers. The general consensus seems to be to avoid these class names in favour of semantic names, or at least use them sparingly provided they don't hinder maintenance. I think the important thing is that changes in the layout should not require excessive changes to the markup (although a few people said minor changes are okay if it makes overall maintenance easier). Thanks to those who suggested other methods to keep CSS code smaller as well.
It's great until you re-design, and narrow is highlighted yellow, center converts better left-justified, and the image you called floatleft now belongs on the right.
I'll admit to the sin of using floatleft and clear as CSS class names, but it is much easier to maintain your CSS if you choose names that relate to the semantic meaning of the content, like feedback and heroimage.
Presentational class names
The HTML spec is clear on this issue:
There are no additional restrictions
on the tokens authors can use in the
class attribute, but authors are
encouraged to use values that describe
the nature of the content, rather than
values that describe the desired
presentation of the content.
Does clearleft describe the nature of the content? Not really. Eric Meyer made a joke about this a while ago.
Try to find a structural relation between the seemingly unrelated elements
Let's say you have paragraphs about ducks, paragraphs about monkeys and paragraphs about frogs. You want them have a blue background.
<p class="duck"></p>
<p class="monkey"></p>
<p class="frog"></p>
You could add this CSS rule:
p.duck, p.monkey, p.frog {
background-color: blue;
}
But aren't they all animals? Just add another animal token:
<p class="animal duck"></p>
<p class="animal monkey"></p>
<p class="animal frog"></p>
And change the CSS rule to:
p.animal {
background-color: blue;
}
It is hard and it might not always be possible but the important thing is not to give up quickly.
What if you can't?
If you have a lot of elements with absolutely no structural relation between them, that indicates a structural problem with your document. Try to decrease these elements. That said, grouping n CSS selectors on one rule is still better than adding n presentational class tokens in your HTML document.
Style classes should be semantic. This is a great article on semantic web page design (well, I found it really helpful anyway).
EDIT: I just read another article that makes some good points for using things like display: inline-block, display: table etc. instead of floats. That should help avoid those pesky floatleft and clearfix classes. Making them semantic is always up to you though.
The main problem with having classes named floatleft, clear or the like is the fact that changes in the design imply changes in the HTML markup. This should not happen, true separation between content and presentation is achieved only when you can re-use the same markup in multiple designs or even media (think sharing the same HTML between desktop and mobile versions of your site and only switching sylesheets).
Now, for a practical example :). To add on Fredrik's answer, LESSCSS allow you to hide styles declarations/mixins from developers. This way you can protect reusable components in your stylesheets without the danger of having them pop up in your HTML.
Sample markup:
<div class="branding">Company Name</div>
Sample less code:
// example of reusable functions
.noText() {
color: transparent;
text-indent: -9999px;
}
.clear-after() {
&:after {
content: ".";
display: block;
visibility: hidden;
height: 0;
clear: both;
}
}
.branding {
.clear-after();
.noText();
background-image: ...;
}
Of course, for mobile you might just want to have the company name in bold, without any other styling:
.branding {
color: pink;
font-weight: bold;
}
I think it depends on how you are using the styles.
Content should be named accordingly, as the style may change but the content will likely remain the same.
For instance, if you have a div that contains stock info, you should name the div something like div class="stockInfo", so that no matter what the presentation, you can change the styles and the name will not contradict those styles (as opposed to naming the div div class="yellow" and then changing the background-color to red).
However you will have "helper styles" and these should be named for what they do.
For instance, you will likely want to use a <br /> to clear some floats. In this case, it is perfectly reasonable to name it <br class="clear" /> and to give it a style of br {clear:both;}.
Again, most Web sites float their images right or left. To assist with this, you can set <img class="right" src="" /> and <img class="left" src="" /> and then have the styles to match, img.right {float:right;} etc.
So it depends on the usage.
Class names and ids that describe the function is better than using names that describe the styling of the element.
I usually end up not doing it religiously though, because it is in my opinion more convenient to i.e. clear floating elements by using the famous clearfix hack rather than adding clear:both all over the stylesheets.
But I think that LESS and SASS creates interesting opportunities to get the best out of both worlds, because you can have mixins and functions that describes some style and still have semantic correct names by just including whatever 'style' you want.
Instead of having this HTML and CSS
<div class="navigation roundedcorners">...</div>
.roundedcorners {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
you could use SASS to create this mixin:
=rounded-corners
-moz-border-radius: 5px
-webkit-border-radius: 5px
border-radius: 5px
and include it into your .navigation class like this:
.navigation
+rounded-corners-5px
which would reduce your HTML to this:
<div class="navigation">...</div>
and therefore still get the advantage of having semantic correct names while having a convenient way to share styles between different elements.
Andrew; it's good to give sensible name to an class & id which easy to understand for you & your fellow member's which are working on that project. For me classes small , center , floatleft etc define nothing to me because when you give class center that's indicate that the element on the center but there are other properties also in that class like color, background etc
For example
<div class="wrap">
<div class="center">lorem</div>
</div>
css:
.center{margin:0 auto;}
in this example class center don't clear to me. but we can use them as a helper class.
For example
<div class="wrap">
<div class="panel center narrow">lorem</div>
</div>
css:
.center{margin:0 auto;}
from above example now it clear to me what the role of class center in that panel div
FOR MORE CHECK THESE LINKS :
What's the best way to name IDs and classes in CSS and HTML?
http://www.ronniesan.com/blog/entry.php?title=organizing-your-dom-elements-with-the-proper-ids
http://cssglobe.com/post/3745/my-top-10-most-used-css-class-names
If your question is:
Is it recommended to group elements
based on the attached styles to avoid
repetition in the CSS, even if this
means presentational information
creeps into the HTML?
Then my flat answer would be that in real world, semantic and presentation isn't everything. So my answer would be: it depends.
...depends if bandwidth is important to you... On a site with many visitors per hour, then the classnames could even simply be something like "c11" (yes, I've seen it) instead of meaningful, but looong class names.
...depends also if you perfectly know that when the look and feel will change, then the CODE will change also. (exemple: you redesign a site today in XHTML, but you perfectly know that when you'll re-do the CSS in 2 years, then you'll want the markup to be HTML5, so you will pretty much change the structure anyways...)
...depends also if you're already 3 days late on a delivery. When you're 3 days late, believe me, classnames like "nopadding" starts to appear, as you don't have anymore time to think straight about semantic (neither does your client).
Depends on so many things, I'd say... That's my "real life" point of view of your question.
From what I've seen, developers have the tendency to overload their HTML pages with way too many unnecessary classes and extra markup. These classes not only make the page size bigger (and thus the load time longer), they also crowd up the page and make it difficult to manage and modify at a later time.
Having things like center and float-left might be helpful when you're dealing with display text that was input by a user (such as a post on a forum), but for general markup purposes you're better off just adding text-align: center and float: left to the appropriate classes. This especially helps if you are trying to change the appearance of your site without changing the HTML much. The less you have hardcoded into your template, the easier it is to only have to change around the CSS when modifying your template. That bit alone is worth it to me.
As a general rule of thumb, you really should only give elements classes when it describes what the content is, not where or how it is being displayed. i.e. <span class="movie-information"> instead of <span class="bold">.
The only time I feel that it makes sense to give an element a class when it isn't necessary is if you are concerned with Search Engine Optimization. You should definitely read up on Microformats if you are interested in seeing how adding the right classes can actually help search engines. That being said, adding classes that describe how the page is visually displayed does nothing for the search engines.
The only time I would ever "group" classes is if they are either displaying the same thing, or if they are siblings. It gets really messy in your CSS when you have elements from all over your page defined together. You're much better off grouping your classes in your stylesheet in ways that you will be able to find them later, rather than saving a few lines by combining them.
I think this is where old meets new in web technologies. From times past, it has been difficult to unobtrusively render an outstanding web experience. These class names mostly came in handy when websites were changing webmasters to aid them in understanding the code. It served its cause well but with the new technologies of this day and age, I think this is slowly dying out - infact, it should be dead.
The question we should ask is, "Do we need to create a new class for every new innovative design that could pass as a template?". I do not think so. The markup on a site should do what it is meant for - markup. The class names used in the markup should be descriptive of the content and not its looks. The stylesheets - on the other hand - should be able to select elements on a document based on the information in the markup, and style them.
I want to relate this to the Rails association naming convention. Consider this...
class Post < ActiveRecord::Base
has_one :personifyable
has_many :personifications, :through => :personifyable
has_many :taggables
has_many :tags, :through => taggables
belongs_to :destroyers
end
Obviously, this is not a real model; it is something I am using to drive a point. Consider the case of a deeply nested dependency. These names will grow ridiculous - if they aren't already (i.e. in CSS, <div class='mediumwidth floatright centeredtext graytheme master'></div> or something of the like)
Now consider the case where you have different principles. Different developers and designers may - if not 'most definitely will' - have different reasons for using a specific naming convention. How would this affect refactoring time. I will leave that to your imagination. Also, if your business partner notices a new trend with sites themes that attracts traffic - more technically, assume this business partner has performed some experimental A/B testing and come up with some specs - you don't want to change the contents of the whole stack (ie HTML and CSS and possibly JS pages) to implement this new style.
In conclusion, keep styling hints out of your markup. Unobtrusively interact with the document to style and manipulate it. Sass gives you a fine way of styling a site while having your CSS mock your markup. jQuery is another awesome UJS library. HTML5 gives you methods too that make the markup more flexible and yields more information to CSS and JS.
I don't think adding a descriptive class name to your document is really a big issue. I find it's easier to work with explicit class names like "floatleft" as opposed to things that are purely semantic or reliant on the cascade. It's usually easier for later developers who don't have the document structure in their heads as well.
You don't want to use them for everything--you wouldn't want to add a class of floatleft to every li in a left-floated menu, but these kind of styles are very good when you need to do a specific thing to one or more elements, and you want to make other developers aware that you did it.
It's like putting in <div class="clear"> or even <div style="clear:both;">: maybe not the prettiest but it sure is obvious what you are doing.
My rule of thumb is: whatever makes you have to think less, do that.
EDIT: As I said in my comment above, this is most true for classes that refer to clearing and floats, i.e., things that are purely presentational, non-semantic, and yet must be referred to in the HTML. I think in this case it is actually preferable to indicate that you are using a purely presentational class, like floatleft, rather than forcing the float to be attached to some semantic element.
I am a developer before a programmer, so for me I use something like a "floatleft" css class as a sort of UtilityMethod.
Meaning, my css class is "floatleft"...and that's all that class does.
so if I say <div class="floatleft"></div> in my mind that is saying "make this div float to the left".
So if that Div also needs a blue background and is my main header it's going to have a different class for that and I end up with <div class="mainheader floatleft"></div>
Doing it this way also avoids issues with refactoring. If I am changing my design later, I will know that "floatleft" ALWAYS floats things left and nothing more.
I think, at the end of the day it is about what works for you. If your class name is descriptive of what it does, that does not really go against the rule of separating markup from styles. Another factor to consider is, are you the sole developer, or part of a team. If you are part of a team, or you know your code will be worked on later by other devs, you should establish, and document the naming conventions used.
I am currently contracting with Down Jones on some very large projects, and we have a rather lengthy document on naming conventions for our classes, including when to use camel-case, or dashes or underscores, as well as specific prefixes on the class name based on the project we work on. It sounds crazy, but when you have a dozen or so front-end devs working on stuff at the same time, it is a life saver!
You are saying something like this:
.red
{
color:red;
}
so in order to use this class:
<ul>
<li class="red">hello</li>
</li>
ALTERNATIVE SOLUTION
ul li
{
color:red;
}
Usage:
<ul>
<li>Hello</li>
</ul>
By this you can actually remove the presentation information from the content.
I personally name them things close to what they will be doing. Say I have a class that is on an image gallery and its a primary most used class it will be something like "gallery" or if I'm setting borders around things that are meant to be more decorative I'll name it "decoborder". I try to keep them semi short and somewhat related what task they provide. I don't like to do things like "small, large, H1underlined" or anything that can mimick another tag or function because that can just get confusing. Beyond that I think you should really name it in whatever way makes the most sense to you.
If the question is only one of naming, then for one specific class...
class="floatleft"
or
class="myClass"
or
class="gibberish"
....changes absolutely nothing. They are only different class names. The programming functions the same.
Either your content & presentation is separated, or it isn't... totally regardless of how you created the names.
For what it's worth, if I remember correctly the class keyword in HTML isn't currently used for anything other than CSS stylesheets. Thus, the example that you provided...
<div class="foo">Some info about foo</div>
...
<div class="bar">Info about unrelated topic bar</div>
...wouldn't really be a way of identifying data. I would suggest either the name or id attribute if you really want to identify data within your HTML tags. (They both have slightly different uses - name is generally used for server-side queries while id can be styled and is generally more versatile. IDs must be unique, but names don't have to be.) You can check further documentation using the W3C HTML specification.
In short - don't worry about tying content to presentation through your tag classes; until they're specifically used for anything else, they will not have any real effect on your raw content. As such, I'd say name your classes whatever you want, as long as it makes sense. Personally, I would err on the side of logical naming versus style-type naming (e.g. class name "editorcomment" instead of class "graybgfloatleft" or something like that), but in the end, your class names aren't going to tie your data to your presentation like an ID or a name would.
Good luck.
I've done both and I have to say nowdays I lean towards using non presentational classnames. I found this nifty framework called OOCSS https://github.com/stubbornella/oocss/wiki which helped me alot when I was creating a new layout for my web application and suited my requirements so well.
It is mostly because the definition of basic classes for spacing, headers and text works so well when you have to deal with alot of content. Because you use the same classes everywhere it helps make the layout better and maintainable.
Offcourse this means a element in your html can look like this: <div class="unit size1of3 lastUnit"> But isnt that what HTML is about? Making sure your information is presented properly.
I disagree on the whole redesign point, be honest, when you have to redesign your website most CSS goes out the door anyways. And, by dividing the CSS into proper classes for spacing/heading/text it becomes less likely to have conflicting css rules that mess stuff up like ul li div{}
Offcourse the classes do not describe the contents, but as CSS does not allow class inheritance and you have to support old technology like IE6...does it really matter? And do classnames like animal and duck really make for better html? Id like to think HTML is for the browser and when the browser renders it, thats for humans.
It depends, sometimes it makes sense just to add a class to let an element float. The problem with the semantic approach is that you will end up ball of mud of css classes. Sure, names like redLink or blackHeader have to be banned but sometimes you will need little helpers like "clear" or "floatLeft".
Read this article of Nicole Sullivan who explain this in deep.
There are two things that I feel get entirely left out of these discussions all too often. The first is WHY you would want to be all semantic or all not. The keywords are Branding and Skinning. Presentational class names may be justifiable if you work on some internal, departmental websites where branding and skinning will never in a million years get funding. On the other hand, customer facing sites, such as car manufacturers and department stores live in a world where every single new product that gets launched results in an entirely new skin for the website. New colors, new layout, new background images and all of this lead by designers who should be able to make the change purely in css so there's no chance they can break any working php (or what-have-you). There are also branded sites, where you have multiple skins, potentially running on the same site simultaneously. On sites with that requirement, you can't have visual changes impact html or you end up breaking every other brand just to update one of them. In these situations, semantic class names are a necessity.
The second thing that often gets left out is how to combat the problem of repeating groups of properties created by semantic class names, as in:
.content-nav {
float: left;
margin-right: 10px;
background-color: #ccc;
}
.content-nav .user-photo {
float: left;
margin-right: 10px;
border: solid 1px #000;
}
.content-nav .user-display-name {
float: left;
margin-right: 10px;
text-decoration: underline;
}
People often point this out as a drawback of semantic names, and I think that that's a valid point. On the other hand I would like to point out that there are tools that can help you keep semantic css DRY, such as LESS and SASS. I did see one other commenter mention this above, but I just thought that this point was worth highlighting.

What is the right way to use more than 1 CSS class on an element?

I can imagine it can get complicated fast trying to debug style issues when there are multiple classes associated with elements. Currently I'm using multiple classes but in a way that one type of class is for jQuery manipulation and the other is for style. So I can have an element
<div id='myDiv' class'ActionControl SearchBox'></div>
where the .ActionControl is used by jQuery and the .SearchBox has a style associated in the CSS file. Is this right or wrong? What do people more experienced with this think?
What issues have other people come up against? How have they been resolved?
As long as your code is comprehensible, maintainable and clear to others, your system is good.
There is no standard I am aware of in how to give CSS classes, except one:
If you need to target a single element in the page using JS or CSS you should use an ID and not CLASS.
This is definitely a good practice...
What you have to keep in mind always is not to remove the class attribute, instead you will be removing the classes you exactly want to remove.
Also, another problem (not for me) is that multiple classes are not supported for OLDER browsers.
Keep in mind to code your CSS in a way it prevent code duplication so a float:left class can be used in many different elements, this is to keep code clear.
I can't see anything wrong with that. Probably, you could prefix the jQuery classes with e.g. jActionControl, so you have a better overview over who uses what classe if it gets really ugly with many classes.
Of course, you can assign as many classes as you want so there is nothing wrong with your approach in my eyes.
Another way to use multiple classes is to get a kind of inheritance.
.thing { ..blah.. }
.thing.subthing { ..tweaks.. }
<div class="thing"></div>
<div class="thing"></div>
<div class="thing subthing"></div>
Here all the things get "blah" applied to them, but only the subthing div gets the tweaks.
Yes, it can get complicated. As with any power tool, you need to apply it judiciously and with discipline.

CSS vs DRY

You're creating an HTML layout. Let's assume that you don't need the benefits of multiple stylesheets, that a small increase in HTML size is not a concern, and that you have a style which will only be used once. I'm often in favour of using an inline style here, as I view the repetition of your CSS class name or ID as the cost of an abstraction you don't currently need, and may not ever use.
Standard doctrine these days is to always create HTML layouts using semantic markup and CSS styles, so am I missing something here? Please let me know your thoughts.
Even if you only use a particular style once there are still benefits to keeping it with your other styles and not putting it inline. First, there is the separation of concerns that leads to improved maintainability. If you know you are going in to make only a style change, there is a single place to look for any changes. Another benefit is the self-documentation from having to type out the class name. By giving that style a name, even though it is used once, it makes the semantic code below more declarative -- you can read that not only is this random p a paragraph, it is also, say, the intro paragraph.
This is, of course, assuming that you are never going to use that particular style again. If you might than there is even more reason to factor it out into a named style. Inline styles aren't evil, but they are somewhat of a gateway drug.
Ideally your CSS should be "Object Oriented" (at least, as OO as CSS can be). You should "inherit" from classes that set common properties and create new classes when you define properties that could be used elsewhere.
Take a look at the OOCSS project which is trying to espouse these principles (or re-introduce them as it were).
To quote Welbog:
... It seems to me that "OOCSS" is just CSS that isn't written haphazardly. Much the same way you can write non-object-oriented designs in OO languages, you can easily mess up the fundamental ideals upon which CSS was created. OOCSS seems to be saying, "Let's not screw up anymore, guys."
One advantage of keeping the HTML and CSS separate is that you can re-skin the webpage without changing any of the HTML.
Steve
There are some situations in which I usually neglect creating a new class for a simple style change on a single element. It is usually pretty clear when you are doing it that there's a low-to-zero chance of you needing to apply that particular style to something else later down the road. The most common case for me is when I need something to have a particular padding/margin to be in the right place but it's not an element important enough to have its own ID.
This may not be a popular opinion here, but in those scenarios I don't think an inline style is evil.
Personally, I've found that I have an element or two and I would put an inline style in, go back and see that I need more than that element, so I'd change it to a class or forget about it and be not able to change it.
You could also try putting a certain div / page class, and write descendent styles for that in the stylesheet instead of inline elements.
Also, if you ever decide to add javascript, you won't already have a well-labeled class there and you'll need to change it.
Usually this isn't much problem with dynamically generated websites, but it can become a large problem when you go overboard and have tons of inline tags to switch out. It also can make it harder for people if they wish to disable styles for accessability etc-- you usually can overcome this by using a class.
Say, using <b style="color:red">bold</b> instead of body.products div b {color:red}.
I'm personally a fan of selectors, not using too many classes. They are more reusable, and you can edit the whole site in one place with the stylesheets.
But this is overkill <p style="font-weight:bold;font-size:1.2em; text-index:20px;">Indented Bold Paragraph</p> so it this <p class="indent bold larger">text</p> instead you can door ``<p><b></b></p>.
"A foolish consistency is the hobgoblin of little minds"
So, in this case is which is the foolish consistency? :) Why does DRY take precedence over the separation of markup and style?
Can you be sure that your CSS rule will only be used once? More over, how can you be sure that it won't need to be changed in the future, and how can you be sure that you would be the person needing to make the change? Are you sure you even need to add a class or id to target this unique element?
I guess I am having trouble seeing how adding
<input type="submit" style="border: 1px solid red;"/>
is some how "superior" to 12 or so more characters
<input type="submit" class="b-red">
.b-red {border: 1px solid red;}
or to a potentially equivalent character count
input {border:1px solid red;}
Of course there are situations where every rule of thumb can and should be violated. The question is, what do you gain from following DRY that outweighs the importance of following markup/style dichotomy?