Is there a standard method for name classes?

Question

For instance:

class="profile profile-image profile-image-large" 

OR

 class="profile profile-image profile-image-small" 

Is there something wrong with these names or dashes?

Answer 1

To be completely honest, it comes down to individual developers and their own feelings. There are two equally good ways to structure CSS classes, just like you:

 .profile.image.large{ width: 300px; } /* Or: */ .profile-image-large{ width:300px; } 

They achieve the same, but when you start to think broadly, you see how wide the difference between these styles is.

Separating classes makes them reusable: DRY - never be repeated. Separating the large or image classes, we can reuse the same class:

 .blue{ border: 3px solid blue; /* All .blue 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 will look like this:

 .blue{ border: 3px solid blue; /* All .blue will have a blue border */ } .profile-blue{ border: 3px dashed blue; /* We had to redefine the entire style */ } 

In a simple example, such as border , this does not seem to matter. But consider a much larger piece of CSS that you might want to reuse dozens of times throughout your code. You will repeat a lot.

Logically grouped styles are still good: I'm not saying that -classes is bad, they help determine the namespace for your code, so in terms of maintaining modular code, a prefix of styles with an identifier will help prevent conflicts, especially if you are developing code inside the web - an agency that will be reused, or if you are creating a plugin (in this case, a style prefix is ​​absolutely necessary).

Developing in a compiled language like SCSS (my preferred environment) changes the way you think. In SASS / SCSS, we can easily do this:

 .profile{ display: block; &-image{ border: 1px solid blue; } } 

And this is evaluated in the same way as the profile profile-image for an element. Alternatively, SASS also supports:

 .profile{ display: block; &.image{ border: 1px solid blue; } } 

What evaluates the profile image for an element. Very similar, but both styles are limited to the parent element .profile and cannot be used globally. The styles are protected, whereas in my first “natural” CSS example, the blue class can be freely added and included with the any element on the HTML page.

Edit: you can still use the global .image style in your SASS code and then redefine individual examples, but I personally feel that this violates the DRY principle, and I try to avoid it whenever possible.

So what is TL; DR?

In my opinion, there is no “right answer”. In terms of conventions, it’s worth noting that structures like Twitter-Boostrap use a hybrid of two styles — global classes that can be applied everywhere, mixed with prefix classes that protect their children's styles.

The most important thing for any programmer is that your code is read and defined, and you use as little code as possible to achieve your result - no matter what method you use.

Answer 2

It is a good rule of thumb when naming classes are intended to describe the purpose of the contents of an element.

PREFERRED

 <div class="copyright"></div> OR <div class="social-media-buttons"></div> 

On the contrary, for reasons described below, excessive accuracy should be avoided.

LESS BENEFICIAL

 <div class="column-1"></div> OR <div class="right-bottom"></div> 

Here are some suggestions from the W3C :

Use a class with semantics.

Often people use class names such as bluetext or redborder. A much better way to name your classes is through the role of a particular HTML element of this class.

Good names don't change

Think about why you want something to look a certain way, and not really about how it should look. The views can always change, but the reasons for something look the same.

Good names
warning , important , downloadableImage and submenu all good names. They describe what constitutes a certain element, and they are unlikely to change. A warning always remains a warning, no matter how the appearance of the page changes.

Bad names
border4px , lighttext and prettybackground are examples of bad names. You can adjust this border to a whopping 5 pixels or the background may look pretty old after a while, and not at all pretty. The advantage of using CSS is that you don’t have to change much to change the look of your website. If you need to change all light text to dark text, and thereby change all lighttext classes to darktext in all of your HTML page files, you will probably 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, these class names represent the "role element [this] HTML of this class has ??

This is mixed. profile and profile-image are clear roles. But large and small simply represent what the image should look like, which, as the W3C points out, could change. And if the size changes, the class name may also change.

Which leads me to this: the important issue is not the prefix, suffix, or namespace transfer. What really matters is the quality of the name itself.

This may be consistent with the W3C recommendations and offer more benefits in terms of reusability, flexibility and maintenance.

 class="profile profile-image profile-image-main" class="profile profile-image profile-image-thumbnail"