Define CSS conventions (naming, structure, etc.)

[AlexSerrano22]

.{ g | c | d } -{component_name | directive_name} (-{ layout | theme | target_name }) (--{description}) (__{ is | has })*

block 1 g: global c: component d: directive

block 2 component or directive name where the css rule is declared.

block 3 layout: this class has rules to modificate the layout of the element. theme: this class has rules to modificate the look and feel of the element. target_name: general css rules for an specific element, like title, header, text-area...

block 4 description: could be a text to describe a modifier that is not a state of the element. like --flex or --bold

block 5 is or has: to indicate thar this is an state of the element. like has-error or is-selected.

()*: this is an optional block.

[AlexSerrano22]

I'm thinking on use a naming convetion similar to SUIT where do you have:

• u-utilityName
• ComponentName
• ComponentName--modifierName
• ComponentName-descendentName
• ComponentName.is-stateOfComponent
• Component Variables

I would like add/change some rules to be sure that we are covering all cases that we have:

• g-globalClassName this classes are not encapsulated
• add the namespace c- or d- depending of if the css is related to some Component or Directive. (this could be removed in case that we don't have a lot of directives that use CSS rules )
• use camel case instead of pascal case.
• if we use camel case we should change the descendant rule to ComponentName__descendentName
• add ComponentName.has-stateOfComponent

[AlexSerrano22]

or we can take the all advantage of the encapsulation this option does not finish convincing me but we could use clases only when these are necessary and apply the css directly to the html tags.

• u-utilityName
• g-className
• className--modifierName (only when necessary)
• .(is or has)-state

e.g.

<document>
  <div class="documents-widget">
    <header>
        Documents
        <div>
            <i class="refresh" (click)="refreshWidget()"></i>
            <i class="remove" (click)="closeWidget()"></i>
        </div>
    </header>
    <section [class.broken]="hasError">
        <div>{{documentsTotalCount}}</div>
    </section>
</div>
</document>

the css could be something like:

:host{
    .documents-widget{
        header{
            ...
            div{
                ...
                i{
                    ...
                }
            }
        }
        section{
            ...
            &.hasError{
                ...
            }
            div{
                ...
            }
        }
    }
}