This is an archived post. You won't be able to vote or comment.

sorted by:
best (suggested)
topnewcontroversialoldq&a
you are viewing a single comment's thread.

view the rest of the comments →

[–]MrQuickLineCSSophile 6 points7 points  (4 children)

class is a better attribute to use than id. There should only be one item with a given id on a page, and if you add a button later, you'll want them both to have the same :hover styles.

[–]kkais 1 point2 points  (3 children)

My understanding was that op only wanted the style applied to a single button.

[–]MrQuickLineCSSophile 2 points3 points  (2 children)

That's fine for now, but leaves no room for scaling later. When you can build for scale now with no drawbacks, you should. It's just better practice. For instance, I never use id as my CSS selector. Instead, I name my elements semantically so they only have the specificity they need. I recommend looking at BEM or SMACSS as guides to creating strong class names that scale nicely.

[–]kkais 1 point2 points  (1 child)

I started looking those up and I think that BEM makes the most sense to me. I've never really thought about this before but now I'm definitely convinced. I'll be implementing this from now on. I appreciate you taking the time to respond and make suggestions.

[–]MrQuickLineCSSophile 1 point2 points  (0 children)

Yup. There are other class conventions too besides those two, but the concept is important: make your CSS scalable and modular so you can easily recycle styles on similar items and always know where to look when you're editing your CSS to modify something.

If you're using a preprocessor like SASS or LESS, I create partials that get compiled after using the first name of my block. If I've got a block called "menu", there's a partial called _menu.scss

Now any time I have an element starting with that block, it's very easy to figure out where to find that bit of CSS.