CSS Classes naming conventions

[fragdochkarl]

I stumbled upon naming of CSS classes for instance in PHTML:

https://github.com/integer-net/solr-magento2/blob/master/src/view/frontend/templates/autosuggest/index.phtml#L38-L38

<div class="integernet_solr-products-box">

and corresponding Stylesheets:

https://github.com/integer-net/solr-magento2/blob/master/src/view/frontend/web/autosuggest.css#L58

#search_autocomplete .integernet_solr-products-box h3 {..}

At first, the existing implementation confused me, as there seems to be no proper scheme applied at all. While I guess the "integernet_solr" part is mainly a vendor prefix I would like to raise a general discussion about the way we go here. These are my thoughts:

1. I find the "integernet_solr" rather long for a vendor prefix. Maybe we could come along with something shorter to not clutter up markup and classes
2. What scheme should we use. In M1 version we sticked to the existing standard. In M2 I would not necessarily recommend this as it is a mess and probably prone to sooner changes. Although being my personal flavour I would suggest going with BEM using Two-Dashes-Syntax: .block__element--modifier
3. We should avoid using specificity on IDs like #search_autocomplete. When using BEM there would be other possibilities without interfering with other CSS
4. As our code base is pretty manageable in terms of markup we could do great in avoiding unspecific selectors like h3 or ul.some-class-name which makes cascading easier and saves rendering performance.

[schmengler]

As discussed, there is no distinct scheme for CSS and markup in the autosuggest window, it's mostly copied from the Magento 1 module.

We can use a scheme as you suggested. Go ahead and change it (and document the frontend conventions)