This file should be improved

CLASS NAMING CONVENTION

• based in BEM but reinterpreted for sass and vue
• prefixes prevent the collision with vendor styling
• the "x" stands for xamu

ELEMENT or LAYOUT:

.x-elementName{} EJ: .x-view{}

• some of this will expect certain tag EJ: a.x-link{}
• whenever possible avoid using long names

CHILDS:

• a "-" will be used to showcase nested elements .x-parentName-childName{} EJ: .x-view-item{}

UTILITY CLASSES:

• each element comes tied with a set classes to alter it EJ: .x-view.is__active{}
• this allows the duplication without collision

STATUS: (is or has)

.x-elementName.is__statusName{} EJ: .x-view.is__active{}

MODIFIERS:

.x-elementName.m__modifierName-value{} EJ: .x-view.m__maxWidth-none{}

• some modifier could be conditionated to the presence of another one EJ: .x-view.m__theme-light.m__shadow{}

UNIONS: (combination of modifiers, shortcuts for common modifier combinations)

.x-elementName.u__unionName-firstModifier-secondModifier{} EJ: .x-view.u__flexAlign-center-stretch{}

• if both values are equal the could be merged EJ: .x-view.u__flexAlign-center-center{} //spread EJ: .x-view.u__flexAlign-center{} //merged

PSEUDOS:

*[data-atributeName]{} EJ: *[data-tip]{}

• for this case we will be using data atributes

MODIFIERS:

*[data-atributeName-modifierName="expectedValue"]{} EJ: *[data-tip-position="top"]{}

• these are almost always expecting some argument

ANIMATIONS:

.a-animationName{} EJ: .a-fadeIn{}

UTILITY CLASSES:

• each animation comes tied with a set classes to alter it EJ: .a-fadeIn.is__animated{}
• the disponible classes are listed here

ANIMATED STATUS:

.a-animationName.is__animated{} EJ: .a-fadeIn.is__animated{}

• without this class no animation will run

MODIFIERS:

• this status comes with his own set of modifiers

DELAY:

.is__animated.m__delay-value{} EJ: .is__animated.m__delay-2{animation-delay: 0.2s;}

ITERATIONS:

.is__animated.m__iterations__value{} EJ: .is__animated.m__iterations-2{animation-iteration-count: 2;}

GLOBAL MODIFIERS:

.xm__modifierName-value{} EJ: .xm__maxWidth-none{}

• these work as any other modifier but work in any element
• some modifier could be conditionated to the presence of another one EJ: .xm__theme-light.xm__shadow{}

GLOBAL UNIONS:

.xu__unionName-firstValue-SecondValue{} EJ: .xu__flexAlign-center-stretch{}

• these work as any other union but work in any element
• if both values are equal the could be merged EJ: .xu__flexAlign-center-center{} //spread EJ: .xu__flexAlign-center{} //merged

SASS / CSS RULES

• sass is an amazing preprocesor but some of their rules could become overused

1. NO MORE THAN 3 LEVES OF NESTING

2. DONT USE THE AMPERSAND TO NEST ELEMENTS CHILDS

EJ: .x{&-name{&-child{}}}

• avoid that

3. AMPERSAND USAGE IS ALLOWED FOR MODIFIERS & SIMILAR

EJ: .x-elementName{&.m__modifierName{&__modifierValue{}&__otherModifierValue{}}}

• this is because usually you would be only searching for the element or the modifier name
• as you can see this doesn't break the first rule

4. FOR CONDITIONAL MODIFIERS PREPENDING IS PREFERED

EJ: .x-elementName{&.m__requiredModifier.conditionalModifier{&__modifierValue{}&__otherModifierValue{}}}

• this limits the nesting and shows the required modifier

5. EACH PROPERTY SHOULD FOLLOW THE NEXT ORDER

• TAG, ELEMENT or LAYOUT (a, .x-elementName, etc...)
• PSEUDOSELECTORS (:hover, :focus, etc...)
• STATUSES (.is__statusName, etc...)
• MODIFIERS (.m__modifierName-value, etc...)
• SUBELEMENTS or CHILDS
• OVERWRITES
• MEDIA QUERIES

6. AND FOR EACH GROUPED RULES SHOULD GO IN THE END

EJ: .x-element1{} .x-element2{} .x-element1, .x-element2{}

Responsive styles

We are following a similar approach to the tailwind framework (global & layout modifiers only)

.xm__hidden:sm => Hide if element has less than 640px of width; .xm__hidden:sm-inv => Hide if element has more than 640px of width;

sm => 640px // small md => 640px // medium, disabled lg => 640px // large xl => 640px // extralarge, disabled