[meta] Make sure CSS classes are prefixed properly [#2029187]

We have several bugs introduced in D8 times that makes theming just nightmare. The simplifications made are too simple and causes a lot of troubles.

Don't ship Drupal without this issues resolved, please!

How a class should never named:

.icon
.box
.tray
.hidden
.active
.vertical
.lining
.primary
.secondary

Good named class names:

.toolbar-icon
.toolbar-box
.toolbar-tray
.system-hidden

Comments

Comment #0.0

hass CreditAttribution: hass commented 26 June 2013 at 23:11

Issue summary:

View changes

Comment #1

ry5n CreditAttribution: ry5n commented 27 June 2013 at 02:55

I just want to point out that we have CSS coding standards that recommend a very similar approach to this, plus a naming convention to help clarify intent:
https://drupal.org/node/1887918#sub-components

To sum up, the recommendation is to name UI components like so (with the __ indicating sub-components):

.toolbar {}
.toolbar__box {}
.toolbar__tray{}

This works great in general, but for Drupal core classes that are loaded along with themes, like system CSS and the toolbar, even this may not be enough. For example, themes could easily define a .toolbar class themselves. For core classes that are loaded with the front theme, the safest namespace would actually be drupal-. So we might consider this:

.drupal-toolbar {}
.drupal-toolbar__box {}
.drupal-toolbar__tray{}

Not all core classes need to be namespaced; pragmatism should be the rule. For example, I don’t currently believe classes like .visually-hidden (formerly .element-invisible) need to be namespaced in this way, since the 80% case is that themes need them for exactly the same purpose as Drupal does, and they are de facto standards.

Comment #1.0

ry5n CreditAttribution: ry5n commented 27 June 2013 at 02:55

Issue summary:

View changes

Comment #2

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 29 June 2013 at 02:48

Priority:	Major	» Normal
Status:	Active	» Postponed

I agree with Hass, but this issue is a functional duplicate of the goals of #1921610: [Meta] Architect our CSS

Let's postpone this bug so we can work on the meta issue that will make this bug obsolete.

Comment #2.0

hass CreditAttribution: hass commented 29 June 2013 at 08:11

Issue summary:

View changes

Comment #3

hass CreditAttribution: hass commented 29 June 2013 at 19:46

@ry5n: Boilerplate is not a defacto standard. I never used it nor do I have an idea what boilerplate is. I guess from 5 minutes reading it's something from a private company names twitter, if i'm not totally mistaken. This means boilerplate could be something that a few people may know and like, but in the rest of the world it's unknown and not used at all.

I'm not aware of this coding standards from #1. they are not from drupal.

I'm using YAML CSS Framework that is the "defacto standard" for me like boilerplate for you. :-)

Comment #4

nesta_ CreditAttribution: nesta_ commented 1 July 2013 at 00:50

hass: Condition: For the free use of the YAML framework, a backlink to the YAML homepage (http://www.yaml.de) in a suitable place (e.g.: footer of the website or in the imprint) is required.

Not like... but if I agree in everything that is said, and there are themes like yaml or many others that consider the nomenclature, foundation type classes used much familiar and easy, if we can have a good naming D8 everything would be more standard , homogeneous, easy and clean :)

Hass Good initiative