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 9 years ago.
Improve this question
For reference:
SCSS .extend()
Similar post on this question:
Using extend for clearfix
Say I was to make a handful of classes that I could extend and reuse throughout a project:
For example a class could be:
//common boilerplate for most of my parent divs
.scaffold
{
position: relative;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
//or a typical clearfix
.group:after {
content: "";
display: table;
clear: both;
}
Say I had a dozen of these classes with various purposes and/or differences within the attributes. At what point does extending the class become hurtful towards performance vs helpful? For example - if this class had say 50 commas of various classes
Example of written one of the SCSS classes
.site-header
{
#extend .group;
#extend .scaffold;
background: papayawhip;
border-bottom: 1px #ccc solid;
}
Example compiled clearfix could beCSS
.group:after, .site-header, .route-nav, .main-article, .article-header, .side-bar, .site-footer
//this could go on for a while
{
content: "";
display: table;
clear: both;
}
Example HTML
<!DOCTYPE html>
<html lang="en">
<body>
<header class="site-header">
<nav class="route-nav">
<nav>
</header>
<article class="main-article">
<header class="article-header"></header>
</article>
<aside class="side-bar">
</aside>
<footer class="site-footer">
</footer>
</body>
</html>
I feel like this could be one of the DRY—est methods to writing css. I feel like this approach could become very efficient and successful after writing just a few sections of a page. Moreover, majority of these classes could be refined and used through many project. I really want to experiment with it but I fear it could cause some performance issues in the long run, esp when classes start using pseudo-classes like :after :before.
Would there be a performance hit vs just adding the classes or writing a mixin? Does anyone have any statistics to backup the best route?
I like the idea of making scss placeholders and re-using them by #extend. This is known as the "OOSCSS" approach by some, you can find more about it if you google that. It helps writing DRY code and promotes reuse and consistency. I think you're on the right track with that idea generally, but specifically your scaffold class seems like it could be better:
.scaffold
{
position: relative;
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
Margin, padding could be set to 0 globally with a CSS reset approach, and so no need to set them each time. Box-sizing could be set with * selector, as I'm not sure you'd want to mix different box models on the same page. Making every element position relative may cause problems, I'm not sure I'd do that unless there's a good reason too. 100% width is the default anyway for block-level elements, and won't do anything for inline ones. And 100% height is rarely a satisfactory solution in my experience.
So I don't really think there's a need for that class at all. That's just an example though, the general point is if you're careful about structuring your HTML and CSS then you can get a lot of reuse from #extend without having many, many lines of commas in the generated CSS. I've found #extend'ed classes work best if they're small and specific, e.g. classes for different colors in your site color scheme, and then include them in various more specific classes as needed. It needs a bit of discipline (e.g. don't define colors anywhere else but in colors.scss, and think each time you #extend it if there's a better way), but gives very consistent and DRY code in the end.
In terms of performance, I think it's essentially a non-issue and not worth worrying about. Debugging is a bigger issue, as too much extending a single class will 'spam' the Chrome/FF CSS developer tools with huge selectors that make it more difficult to track down issues. For statistics, check out http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/
The biggest surprise is how small the delta is from the baseline to the most complex, worst performing test page. The average slowdown
across all browsers is 50 ms, and if we look at the big ones (IE 6&7,
FF3), the average delta is just 20 ms. For 70% or more of today’s
users, improving these CSS selectors would only make a 20 ms
improvement.
Optimizing your selectors gives only a 50ms performance improvement at most - and that was data from over 4 years ago, so the difference may well be less than that now. Writing CSS that's designed for maintainability, consistency and reuse is a higher priority IMO, as gains from micro-optimization of it for performance are all but unnoticeable.
The parsing of the selector has nothing to do with the performance. It's how to keep track of everything that matches. * is obvious, you have to update every element. Long queries require a lot of traversing to determine if an element matches a query. Commas? They don't matter, what matters is the content of each selector
Its not mandatory how much classes you can nest or group but I don't understand your logic behind it. Let me explain with example.
.a{
color:white;
}
.b{
font-size:10px;
}
.c{
background-color:red;
}
in HTML
<div class="a b c">TEST</div>
Why you wanna do this???
You can actually do this
.a{
color:white;
font-size:10px;
background-color:red;
}
in HTML
<div class="a">TEST</div>
Your CSS file is downloaded by the browser so if very hugh CSS style file would take more time to load, please do take it in mind. You are free to add more classes in grouping as you like but the more useless classes will be there the more slower the site will load. It will decrease your performance.
UPDATE
If you are worried about mixing classes over and over again then you should not be worried because that why we have CSS and its classes to use anywhere in the code and declared once at the top. It something like function in php, you can use function anywhere but you can use function with different arguments and hence the result will be difference.
For example in CSS,
.hidden{
display:none;
overflow:hidden;
}
.text{
font-size:10px;
color:black;
}
#id .text{
font-size:20px;
color:green;
}
So now in HTML
if we will use
<diiv id="id">
<div class="text">Text</div>
</div>
and
<div class="text">Text</div>
the results are not same.. :)
Related
Hello i'm creating a webpage from scratch and I'm running into a problem
I know using the style tag is not very good, but would it be in this case okay to use? or maybe is there a better way of doing it?
let's say I have this CSS
.group-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: rgba(30,30,30);
padding: 15px;
height: 100px;
border: 1px solid rgba(10,136,0, 0.2);
}
and I have
<div class="groupbox"></div>
but now let's say I wanted to make my groupbox bigger for one-time use, is it okay to do?
<div class="groupbox" style="height: 300px;"></div>
or should I just make a whole separate class like a small-groupbox and a big-groupbox with all the same properties, just different heights values? I'm leaning more towards the style attribute. But maybe there is a better way?
I am wondering what the CSS "coding" standard would say about this question. my question is subjective, but I want to know what most others who are more experienced at CSS would do in my situation.
Thanks
It totally depends on ‘your situation’. In particular considering maintainability/readability for future developers. There can be no one right answer. Both methods are allowed by the standard.
The thing to watch if using classes is cascading/specificity which you can be confident are dealt with if using style.
But set against that is the ability in a stylesheet to use class names which have meaning. And there is true separation between styling and semantics, the styling not being ‘buried’ amongst HTML. You can also group settings so the maintainer isn’t hunting through many lines of code to find changes.
You can use both, however, it's always best practice to use external CSS, and class than inline-CSS, however if it's very few line, then it'll not affect the performance much.
I am working on a project that contains some complex mixins. We are using a modified BEM class naming strategy, so a typical mixin looks something like this:
#mixin mixin__nestedHeader {
color: grey;
&__title {
font-size: 1.2em;
}
&__message {
font-size: 0.6em;
}
}
And this would style a block of HTML that looks like this:
<div class="header">
<h4 class="header__title">Title Text</h4>
<div class="header__message">Message Text</div>
</div>
So, the problem we are running into, is that the mixin determines what our HTML structure is. On one hand, we want this HTML to always be styled the same since we're using a mixin, so needing it to always be the same is not the end of the world. But, if this HTML code is already nested inside an "item" block, it causes our classes to be "item__headerTitle" and "item__headerMessage" which makes the mixin not work.
Now, we can add the classes using arguments on the mixin, which is what compass does. But, that makes the mixin more complex to use.
I'm wondering what are everyone's thoughts on letting a mixin dictate what HTML structure is used. Do you just deal with it since you're getting the benefit of using the mixin? Or is it something that is a deal-breaker for you which causes you to stay away from more complex mixins that style multiple elements with specific class naming. There are no wrong answers, we are just trying see what people think.
TL;DR: With gratuitous code-commenting, I think dictating the structure in the styling is fine. Also, having your mixin accept arguments makes it more flexible to use, but exponentially more complex to build/maintain. Really think hard if you're ok with that tradeoff.
The nice thing about working in any sort of environment/language that will ultimately be compiled or minified before it gets to production, is that it allows you to be incredibly verbose with your code comments. At best, they can be an incredibly helpful insights into how stuff works. At worst, they are easily ignorable and get stripped when compiling for production anyways, so there really isn't a cost. SASS is no exception.
With that preface in mind...
I have done something similar in the past where we were using placeholder selectors as a base style for a particular family of elements that would each get extended with their own unique styles given the situation. The structure of the markup that those elements needed to use, along with how to write and an extended style was all included within that particular SASS include. It ended up looking something like:
%full-width-story-block {
/* Can be included with article.story-block elements which need to occupy their container's full width.
See "Usage" section after the style definitions for notes & examples. */
flex-basis: 100%;
display: flex;
& > * {
#include make-col(6);
display: flex;
flex-direction: column;
justify-content: center;
align-content: center;
}
& > div {
padding-left: $story-block-spacing*2;
}
& > a { display: block; }
#include media-breakpoint-up(md) {
h3 { padding-top: 0; }
}
#include media-breakpoint-down(sm) {
flex-wrap: wrap;
& > div {padding-left:0;}
& > * {
#include make-col(12);
}
}
/* Usage :
+ Ensure that the element is rendered on the page in the following pattern:
(note the div containing everything but the 1st anchor/image tags.
This is generally not included when story-block elements are used in "Content Walls")
<article id="post-4321" class="story-block">
<img src="story-pic.jpg" />
<div>
<h3> Story Title </h3>
<p>A short excerpt from the article...</p>
<div class="save-article">
<a class="save-to-pocket" href="/pocket/url"/> <svg>...</svg></a>
<a class="save-to-instapaper" href="/instapaper/url"/> <svg>...</svg></a>
</div>
</div>
</article>
+ Extend the styling to the element container:
.container-needing-full-width-story-block {
.story-block { #extend %full-width-story-block; }
}
*/
}
The big thing was communicating that the info was there and being consistent in the implementation. There were a couple of different families of components that shared that sort of structure, and they each had their required markup structures and process of extension laid out in the code comments in a similar manner. This made it easy for other dev to come along and start using & extending the structures we had already spent time setting up.
Also, the fact that all of this documentation (for a lack of a better word) existed within the codebase itself means that all this knowledge would be ported around with the project files by default. So in 2 years when a fix or update needs to be applied, as long as we have the code-base, we're not trying to track down some obscure internal knowledge-base/wiki article or the devs who originally built it.
All of that being said, I would caution you on writing something that would accept arguments. In theory it does allow for more flexibility in the structure of markup, but that flexibility comes at the cost of increased complexity in building and maintaining that mixin. I've seen/built things like that which had good intentions, but ultimately ended becoming very "switch case"-ey, with each usage of the mixin elsewhere in the project requiring changes to the mixin itself to handle that particular situation's idiosyncrasies. Just something to think about...
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
For example:
class="profile profile-image profile-image-large"
OR
class="profile profile-image profile-image-small"
Is there something wrong with these names or dashes?
A good rule of thumb when naming classes is to describe the purpose of the element's content.
PREFERRED
<div class="copyright"></div>
OR
<div class="social-media-buttons"></div>
In contrast, for reasons described below, being overly precise should be avoided.
LESS BENEFICIAL
<div class="column-1"></div>
OR
<div class="right-bottom"></div>
Here are some guidelines from the W3C:
Use class with semantics in mind.
Often people use class names like bluetext, or redborder. A much
better way to name your classes is with the role a certain HTML
element of that class has.
Good names don't change
Think about why you want something to look a certain way, and not
really about how it should look. Looks can always change, but the
reasons for giving something a look stay the same.
Good names
warning, important, downloadableImage and submenu are all
good names. They describe what a certain element represents, and they
are not likely to change. A warning will always remain a warning, no
matter how much the look of the page changes.
Bad names
border4px, lighttext and prettybackground are examples of bad names. You
might fatten that border to a whopping 5 pixels, or the background may look
pretty old after a while, and not pretty at all. An advantage of using
CSS is that you won't have to change much in order to change the looks
of your website. If you have to change all light text into dark text,
and thus change all classes lighttext to darktext in all your HTML
pages, you're likely to miss a few.
So, to answer the question:
Is there something wrong with this?
class="profile profile-image profile-image-large"
class="profile profile-image profile-image-small"
Well, do these class names represent "the role [the] HTML element of that class has"?
It's mixed. profile and profile-image are clear roles. But large and small simply represent how the image should look, which, as the W3C points out, can change. And if the size changes then the class name may have to change, as well.
Which leads me to this: The important issue isn't really the prefixing, suffixing or hyphenation of class names. What really matters is the quality of the name itself.
Maybe this would align with the W3C guidelines and offer greater benefits in terms of reusability, flexibility, and maintenance.
class="profile profile-image profile-image-main"
class="profile profile-image profile-image-thumbnail"
To be perfectly honest, this comes down to individual developers and their own feelings. There are two equally good ways of structuring CSS classes, just like you suggested:
.profile.image.large{
width: 300px;
}
/* Or: */
.profile-image-large{
width:300px;
}
They achieve the same thing, but when you start thinking broadly, you see just how wide the gap between these styles becomes.
Separating classes makes them re-usable: The DRY convention is to never repeat yourself. By separating the large or image classes, we can reuse the same class:
.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile.blue{
border-style: dashed; /* Inherits from the previous blue and replaces the solid with a dash. */
}
In the second approach - using - separators, the code would be:
.blue{
border: 3px solid blue; /* All .blue's will have a blue border */
}
.profile-blue{
border: 3px dashed blue; /* We had to redefine the entire style */
}
On a simple example like a border, this doesn't seem to matter. But take into account a much larger CSS chunk that you may want to re-use dozens of times throughout your code. You'll be repeating yourself a lot.
Logically grouping styles is still a good thing: I'm not saying that -classes are a bad thing - they help define a namespace for your code, so in the sense of maintaining modular code, prefixing your styles with an identifier will help prevent conflicts, especially if you're developing code inside a web agency that will be re-used, or if you're building a plugin (in which case, style prefixing is absolutely needed).
Developing in a compiled language like SCSS (my preferred environment) changes how you think too. In SASS/SCSS we can easily do this:
.profile{
display: block;
&-image{
border: 1px solid blue;
}
}
And that evaluates to the same as profile profile-image on the element. Alternatively SASS also supports:
.profile{
display: block;
&.image{
border: 1px solid blue;
}
}
Which evaluates to profile image on an element. Very similar - but both styles are restricted to their parent element .profile and can't be used globally. The styles are protected, whereas in my first 'natural' CSS example, the blue class could freely be added and incorporated by any element in the HTML page.
Edit: You could still use a global .image style in your SASS code, and then override individual examples, but personally, I feel this violates the DRY principle and I try to avoid doing it where possible.
So what's the TL;DR?
In my opinion, there's no "right answer". From a conventions standpoint, it's worth noting that frameworks like Twitter-Boostrap use a hybrid of the two styles - global classes that can be applied everywhere, mixed with prefixed classes that protect their children's styles.
The most important thing for any programmer is that your code is clearly readable and defined, and that you use as little code as possible to achieve your result - no matter what method you use.
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.
Lately I'm using a CSS structure that makes HTML much cleaner but I don't know if there's something wrong with this.
Instead of using:
.top { //properties }
.top-wrapper { //properties }
.top-logo { //properties }
And for HTML:
<div class="top">
<div class="top-wrapper">
Logo
</div>
</div>
I'm actually coding like this:
.top { //properties }
.top .wrapper { //properties }
.top .wrapper .logo { //properties }
And for HTML:
<div class="top">
<div class="wrapper">
Logo
</div>
</div>
Is it wrong to do this?
It is not wrong, but the more selectors you have, the higher the resulting specifity of your style. For more information about specifity see http://www.w3.org/TR/CSS21/cascade.html#specificity.
Imagine your example
.top .wrapper .logo { font-size: 10px; }
followed by this:
.logo { font-size: 20px; }
The <a class="logo"> will have a font-size of 10px, even though you specified it to be 20px for the second declaration.
It isn't necessarily "wrong" to do this, it works and if you find it easy to use I'd say go for it!
However - there are some drawbacks to this approach, for example your CSS file will end up larger, which will mean longer download times for anybody viewing the website (granted this effect may be negligible)
There's also the issue that, if you want to re-use the styles of top-wrapper on another element, you have to place that element inside a div with a top class, this ends up cluttering your HTML.
(For more information on the above point see OOCSS)
At the end of the day there are benefits and drawbacks to any approach, if you feel really comfortable with this approach, and it is working for you - then stick with it!
EDIT:
It should also be noted that you're second approach will take longer for the browser to render than you're first approach (the browser has to check multiple conditions instead of just one) for more info see this question
Nope.
What your second code is doing is saying, "target all the elements inside elements that have class top, that have the class wrapper and apply such and such properties"
On the other hand, your first code is only targeting the elements that have the class top-wrapper (or whatever) regardless of their parents class.
Depends how you will use that specified class
.logo { //general properties }
.top .wrapper .logo { //specific propery to top wrapper properties that overrides .logo }
.bottom .wrapper .logo { //specific property to bottom wrapper that overrides .logo }
HTML
<div class="top">
<div class="wrapper>
Logo
</div>
</div>
<div class="bottom">
<div class="wrapper>
Logo
</div>
</div>
Generally, it is better
It's not wrong, but it may get verbose and a little slower if you are have 10 levels of nesting. The result may also be harder to debug if both .logo and .wrapper .logo are styled.
On the other hand it may be nice to have a .button looking different in .content or in .menu. In general, use what makes sense in a specific use case.
No right and wrong here: everything depends on the site you are building, if you are in a team and what makes sense to you.
Personally I don't think the html is any cleaner now than it was previously (in this small example) but your CSS specificity has increased and that could have a detrimental knock on effect.
I now ask myself 'why do I want this element styled in this way?'. Sometimes it's because of inheritance, sometimes because it's a specific case that happens to be in a certain area. The example you use seem a good candidate for inheritance, but looking at the rest of the site might lead to a different conclusion.
Adding longer class names doesn't, to my knowledge, greatly decrease performance. I suspect the only effect would be marginal and is unlikely to be noticeable. Really dependant on the implementation
Additionally if you were 'reading' the html it may make more sense to read have class names like top-logo, other wise you need to look for the appropriate ancestor (bearing in mind there may be more than one that could be applicable).
I'm busy moving toward an OOCSS / BEM method (google these for more, so many resources out there...) myself because I believe it will make maintenance easier in the future, plus I find it makes more sense within a team environment. These are approaches that could lead to 'classitis' or otherwise 'messy' html. I don't mind that though and think the larger the site the more sense this makes. If you're making a 4 page site, maybe don't bother.
But this works for me and may not for you. So I go back to my original statement, there's no right or wrong here :)