Best Practices for HTML/CSS

Question

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 <a href="#" class="button"></a> 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 :)

The best practice for a button, is to use a button, and not a link. — Madara's Ghost, Mar 15 '12 at 09:26
@Truth: Why do you say that? They *are* links. This is the point of CSS, UI decisions are another topic. — Wesley Murch, Mar 15 '12 at 09:27
What do you mean by ".psd image to html" and how, if at all, is this relevant to your question? — Shadow The GPT Wizard, Mar 15 '12 at 09:27
@Madmartigan: Because when a link is clicked, the expected result is that the page will change into another page. When a button is clicked, the expected result is that something will change on the current page. When you want a button, use a button. — Madara's Ghost, Mar 15 '12 at 09:28
@Truth: Not true, he's called it a 'button', but its clearly more a link image. A lot of places use buttons to link to other pages. How long have you been using the internet? Seems to me like you should just standardise your buttons so you can declare one style? — , Mar 15 '12 at 09:28
@Truth take a look at the twitter bootstrap code. They use links that look like buttons all the time. :) — Thomas Clayson, Mar 15 '12 at 09:29
@Truth: As I said, this is a design decision - not a markup one. — Wesley Murch, Mar 15 '12 at 09:29
possible duplicate of [CSS multi-class or groupped class best practices](http://stackoverflow.com/questions/7732561/css-multi-class-or-groupped-class-best-practices) — Shadow The GPT Wizard, Mar 15 '12 at 09:29
I don't think its that relevant , but i just mentioned it to clear my context. — Vivek, Mar 15 '12 at 09:30
@Madmartigan: No it's not. It's a semantic issue. Someone with a screen-reader will not see your pretty style, he will see a link, and not a button, as he should. — Madara's Ghost, Mar 15 '12 at 09:30
@Truth this is not relevant at all to the question here. Vivek - I would take [Rob answer](http://stackoverflow.com/a/7732597/447356) sounds relevant in your case as well as far as I understand your question. — Shadow The GPT Wizard, Mar 15 '12 at 09:31
@JoshuaM: I've been using (and building) the web long enough. A button is used for one of two things, either submit a form, or change something on the page. Anything else is wrong use. A link is used to **link** to a different page, not to cause something to happen. As a general rule, if you have `` on your page, you likely need a button. — Madara's Ghost, Mar 15 '12 at 09:32
@Truth I want to style the `anchor` coz its the client request and its looks nice also. Moreover i can use the same class `.button` to style generic `button` to maintain the look and feel of template as well — Vivek, Mar 15 '12 at 09:34
@Madmartigan: The context of the post is about **best practices** of styling anchors, in which case, the approach to the problem is wrong, as one shouldn't style a link as a button, he should style a button as a button. I've posted a comment to indicate that, and you people inflated it into a monster. Buttons should be buttons, and links should be links. That's the end of this ridiculous discussion. — Madara's Ghost, Mar 15 '12 at 09:34
@Truth I think that if twitter, one of the biggest websites in existence, uses links/anchors that are styled to look like buttons then its probably ok for OP to do the same. In any case anchors are used to create a link to another resource, regardless of what they look like - styling them to look like a button is absolutely fine. — Thomas Clayson, Mar 15 '12 at 09:35
@Madmartigan: There's a very good reason I've posted a comment and not an answer. The question asks for styling an anchor, I'm just stating the he shouldn't do it this way, that doesn't make it an answer. — Madara's Ghost, Mar 15 '12 at 09:35
@ThomasClayson: So if Google started to support IE5.5 and above you'd do the same? And if they told you to jump off a roof? You're a developer, not a copycat. — Madara's Ghost, Mar 15 '12 at 09:36
@Truth: Still don't see the harm in styling an anchor. People style anchors all the time. Look at website navigation. That's a styled anchor, which more common than not looks like a button. I should be making my navigations buttons, not anchors? I think its personal preference of yours that buttons == buttons, anchors == plain links. — , Mar 15 '12 at 09:38
@Truth: The only possible bad practice I see `href="#"`, which may just be a placeholder for the sake of keeping the examples in the question concise. There's no text in the link either, it appears to be merely an example. Obviously if it's a link, it should be an anchor. — Wesley Murch, Mar 15 '12 at 09:38
@JoshuaM: Again, the fact that people are "doing it" does not make it OK. People drink and drive, that doesn't make it legal, or OK. A website navigation **is meant to be links! it links to different pages!** — Madara's Ghost, Mar 15 '12 at 09:40
@Madmartigan: Correct, if it's a link, it should be an anchor, but the fact that he's naming his classes `.button` makes me think he probably wants a button, rather than a link. If the link is used for linking, it should indeed be a link. — Madara's Ghost, Mar 15 '12 at 09:41
@Truth: Now you're talking about class naming convention, which is again, off topic. (How can we move to chat? good idea) — Wesley Murch, Mar 15 '12 at 09:42
I'm not saying that the fact people are doing it makes it okay. I'm saying it's a standard way of working. Yes, I know that. What I'm saying is that a website navigation is commonly styled links (you know, styled to look like buttons). But by your logic, you shouldn't style navigation because they are links. I think @Madmartigan has this one. He might have just used href="#" for the sake of his example, meaning it will actually be linking to another page, hence *can* be a link. And *can* be styled how he wants it. _E_ also, naming it `.button` shouldn't matter. He can name it what he wants. — , Mar 15 '12 at 09:42
This is getting ridiculous. I'm going to stop commenting now. — Madara's Ghost, Mar 15 '12 at 09:43
@Madmartigan yes i used `href="#"` coz i m not sure to put the actual link, if thats not the way to do it, i will edit it to `Some Address>`. However i think thats not the big deal in context of styling the anchor — Vivek, Mar 15 '12 at 09:44
@Truth/JoshuaM: If anyone's interested I'm in CSS chat: http://chat.stackoverflow.com/rooms/3840/css — Wesley Murch, Mar 15 '12 at 09:44
Interesting, i saw your discussion just after i posted my answer. I'd like to hear some opinions. — Alp, Mar 15 '12 at 09:56
@Madmartigan - consider [this from Ian Hickson](http://lists.w3.org/Archives/Public/public-html/2010Jun/0388.html) (editor/author of HTML5) "...using just an external style sheet you can turn any link into something having the appearance of a button." "...doing so is invalid. The spec says: # Authors must not use elements, attributes, or attribute values for purposes other than their appropriate intended semantic purpose." — Alohci, Mar 15 '12 at 12:53
@Alohci: There is some confusion about what the author of this post is doing: it turns out he is really styling *links*, which is what I suspected, and what the OP says: "styling a anchor like a button", not "using a button as a link" or vice-versa. The `href="#"` was just a placeholder for brevity's sake. Everybody is on the same page here. — Wesley Murch, Mar 15 '12 at 13:14

score 7 · Accepted Answer · edited Jun 20 '20 at 09:12

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.

Thanks for your time to answer the question.But Sometime i really got stuck with naming conventions.For example C# says to name methods name with capitalisation, html says to use minus(-) sign. — Vivek, Mar 15 '12 at 17:02
Each language has its own naming conventions. There is no generally valid convention. Can be quite disorienting if you switch alot from one language to another. — Alp, Mar 15 '12 at 18:59
it may sounds unprofessional , but can i ask you if i can use the same naming convention of my choice, with all the languages i use regularly lyk C#,sql,java last but not least HTML/CSS — Vivek, Mar 15 '12 at 19:13
Please don't do it. Conventions are there for a reason, namely coding collaboration, code reusability, maintainability and so on. In the end, it's up to you, but i wouldn't recommend it. — Alp, Mar 15 '12 at 20:01

score 0 · Answer 2 · answered Mar 15 '12 at 09:31

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

Best Practices for HTML/CSS

2 Answers2

Linked