1
<div class="navigation header-transparent-light aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--14 aem-GridColumn--offset--default--0">

Why do classes of a division have all this information? Isn't a class supposed to be simply for allowing a CSS file to target it and customize it on the stylesheet?

This is from line 126 in the homepage page source of www.marcus.com.

And the body starts off with a bunch of div creations.

    <div class="root responsivegrid">

<div class="aem-Grid aem-Grid--14 aem-Grid--default--14 ">

    <div class="responsivegrid aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--14 aem-GridColumn--offset--default--0">

<div class="aem-Grid aem-Grid--default--14 ">

    <div class="experiencefragment aem-GridColumn--default--none aem-GridColumn aem-GridColumn--default--14 aem-GridColumn--offset--default--0">

What's with all the long class names that are pervasive in large websites?

Disclaimer: I'm just getting started with HTML (3 days in).

Looking at all this for the first time, I ask myself.. "how do they not lose track?"

usernameirrelevant
  • 19
  • 4
  • "Isn't a class supposed to be simply for allowing a CSS file to target it and customize it on the stylesheet?" No it isn't. What a class is for is semantically classifying the content in your HTML. It's the selector's job to bind those semantics to the styling. But most web designers don't grok that. – Alohci Aug 25 '19 at 02:04
  • Actually 95% of the *large* websites have their HTML generated automatically along with the class names and also the CSS. The common example is Wordpress which is 34% of all the websites in the internet. – Temani Afif Aug 25 '19 at 06:08
  • I don't think this is "primarily opinion-based". It's a question about a coding pattern that is in use for a long while, with solid rationales generally known to which you can find solid reference in the answers (see chosen answer). The question does not ask about judgements of value, such as right/wrong, but simply why that pattern is used, to which I dare say you will find a concise, consensual answer with little debate. – Dinu Aug 26 '19 at 03:40

4 Answers4

2

I think I might be able to shed some light on things here.

Naming conventions in CSS have become an important part of web development over the past decade in an attempt to prevent your styles from "leaking" across your application and to ensure you don't have to write CSS that's overcooked with specificity.

By conforming to a naming convention it should hopefully mean writing styles unique to an element and not battling global styles. BEM is probably the most common convention used but it can lead to massive class names and it can get tricky when to know what to define as a "block".

These days with web components hopefully a lot of these issues are going to disappear. I'd advise reading css-evolution-from-css-sass-bem-css-modules-to-styled-components to get a good understanding of why CSS looks the way it does today and get a sense of where is could be going.

As another little nice to know HTML class names are case insensitive. So whilst you may see pascalCasing in class names typically a class name should be kebab-case ie .global-header instead of .globalHeader.

stwilz
  • 2,226
  • 2
  • 21
  • 24
1

Just to add to @stwilz excellent answer a short version :

One of the most gruesome tasks in web development is refactoring CSS. Refactoring means that you sometimes want to split or join rules for some scopes.

CSS has no purpose-driven semantics, which means rules are all about the result, there is no way to convey meaning. There is also no scoping, all rules are global. SASS can help to some extent. But largely, you need to use very descriptive class names with some kind of inheritance marking (like the --s you see) so that:

1) Descriptiveness: when you revisit your code a year from now, you can tell why in the world that rule exists, where it applies and how it can be moved or dropped or split and what it will probably affect.

2) Modularity: to prevent rules that are very specific to a scope from leaking global, or even more troubling, from leaking to inner elements, you will usually prefix all rules in that scope with a same prefix. Now, in your design you may decide that a scope needs a -sub and a -sub-sub scope... Imagine, if you will, a programming language where all variable names are global. You would surely use a similar strategy to name them...

Dinu
  • 1,374
  • 8
  • 21
  • Good points about modularity and refactoring @dinu :) CSS is a very misused technology and it's not uncommon to see enormous bloat in stylesheets that have tones of legacy styles that are no longer in use. At least when keeping things modular it allows you to remove all the associated code when refactoring. – stwilz Aug 25 '19 at 23:20
  • @stwilz Well, where you wrote "misused" some might write "broken". Either way you look at it, on the one hand we have the starship-level component encapsulating Shadow DOM and on the other... But this rant might not add value to the answer :) – Dinu Aug 28 '19 at 23:02
0

some designers create their own framework it's a bit like bootstrap https://getbootstrap.com/ we use this framework to build websites more faster for example : when we write 

<div class="col-md-9 hidden-xs fixed-top text-center"></div>

in the classes above we make the div width 9/12 from the screen width , hidden in mobiles , fixed in screen top and finally the text align center

so some designers create their classes and use them so the classes seem to be complicated but it let them to write less CSS or design a complete website without writing any css only using the classes they have in the framework

currently the best framework is bootstrap because its classes names is easy to learn and it has a lot of features but with time you'll probable create your own framework and you own classes that specific your needs .

i hope that this answer helped you , Have fun :)

Bishoy Romany
  • 26
  • 1
  • 3
0

As a designer you'll learn separating your CSS code from 'layout' related code to 'typology' related code will allowing for refactoring later when changes are required. Plus, it makes the code easier to read.

In order to make the above task easier, adding multiple classes to an object helps.

I can give you a simple example to illustrate the point:

<div class="container top left"></div>
<dic class="container bottom right"></div>

When making a media query, I know I can reference the 'top' and 'bottom' and at another viewport, I can reference the 'left' or 'right'. It's just easier to write and remember.

Please note the above may not be convention and is personal preference.