I was at a presentation at a php conference on this exact topic last weekend

You can see the slidedeck here https://drive.google.com/file/d/0B7FGMFd-aDPWQlpMaDdna2ExbWM/view

I hope the video will be online in a few days

There is likely to be some principles of PHP naming that could be used here. I guess HTML classes would have less variables which would allow us more specific naming.

BEM (Block, Element, Modifier) is effective. However I am not sure how we feel about using double underscores and hyphens.

The BEM principle..

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__login {}

/* Modifier that changes the style of the block */
.btn_orange {} 
.btn_big {}

One of its benefits is it allows everything to have a unique class which makes CSS specificity very flat and low (less nesting). You can also tell how a class can be reused without conflict and its function by the class name (Eg. btn--orange - a modifier only used within any btn).

The flip side is some think it makes for ugly looking code. I'm not suggesting we go to the extreme of BEM but maybe we can borrow from it.

How we name the 'blocks' is something to consider separately. For the highest level blocks we could use the Joomla architecture...

ExtensionType-Extension-View (Eg. com-content-archive).

I am not sure how sustainable this is throughout all the markup, anyone with a broader knowledge of Joomla architecture could probably answer this. My knowledge here has proven to be limited at best (",)

@ciar4n hmph, not a sure if i am a fan of double hyphens or underscores.. Is it really making things easier?

Yes, you can easier see the relations and dependencies, but i think most know from Bootstrap that you have a .btn as base and a .btn-primary or an alert and alert-info etc.

How we name the 'blocks' is something to consider separately. For the highest level blocks we could use the Joomla architecture... ExtensionType-Extension-View (Eg. com-content-archive).

Maybe as surround class? (Strapping)

<div class="com-content-archive">
<!-- Content -->
</div>

Than the elements don't get too long .. and you still can use .com-content-archive .element-name to style it easy

@ciar4n hmph, not a sure if i am a fan of double hyphens or underscores

I'm not a huge fan either. It just avoids over nesting in CSS/SCSS. So instead of ..

.block-name {
  .element-name {
    ...
  }
}

You use the following which makes for better CSS specificity (will never conflict)..

.block-name__element-name {
  ...
}

It is not pretty and I am in no way suggesting we use it. Just thought I would mention BEM as it has its merits and is considered a gold standard by many (https://github.com/airbnb/css).

Maybe as surround class? (Strapping)

Strapping I think is fine and should be expected. We just need some sort of naming convention for the element identifiers that has an application for every possible case.

I started to use BEM in my extensions and can say that it makes the markup consistent. The good thing is that it gives you a clear simple guidance. Perhaps somebody should come up with a small pr on a back end view to illustrate the usage of it in Joomla.

I'm using Airbnb style and they recommends to use BEM and OOCSS. I'm more love OOCSS.

https://github.com/airbnb/css

The BS4 seems follows this style and OOCSS and always keep nested structure less than 3 levels.

So how BEM will work with Bootstrap? Are you going to rewrite BS4 to BEM?

One does not exclude another, if we use the BS4 classes then we have to mix them. Or do I miss here something?

As I see it here are some achievable goals we can expect from a naming convention...

• A strict naming convention for HTML classes adoptable throughout Joomla.

• All elements are uniquely identifiable and can be selected within CSS. This excludes framework classes (Bootstrap). This does not mean that every element needs to have class. In most cases elements can be selected by the class of a parent element.

• The root element (containing div) of a view can be easily identified within the DOM.

• The location of a view within the Joomla architecture can be easily identified by the root element of a views class name (ExtensionType-Extension-View (Eg. com-content-archive).

Set to "closed" on behalf of @franz-wohlkoenig by The JTracker Application at issues.joomla.org/joomla-cms/15279

closed as having Pull Request #20147