Global Less Files

• variable.global.less
• reset.global.less
• flexbox.global.less
• mixins.global.less
• utilities.global.less
• responsive.utilities.global.less
• scaffolding.global.less
• Icomoon.global.less

udemy/js/base-components/universal/

v5 & packages-v6

v5

Angular components

Packages v6

React page specific less files

Base components

React components

V6 packages usage

• build.global.less
• main.less
• responsive.less

Package-name

package-name.css

output

entry-main.css

• Critical (entry-main.css)
• Page specific

Writing methods

Prefix usage

• c_ components
• m_ mixins
• p_ page specific
• exp_ experimental
• ie_ ie hack

Naming convention

Hypens-naming

Bem methodology

• c_component-name__child
• c_component__child--modifier

Icomoon Library Update

• source ~/.virtualenvs/udemy/bin/activate​

 

• ./manage.py icomoon --settings=udemy.settings.local

Okta > icomoon

Do

• !important

Don't

• .class-name {...}
• .parent-class > div {...}

• wrap__parent
  • parent__child
  • parent__child--modifier

• Item__child__child
• item--modifier--modifier

BEM

Global Class

• div { ... }
• .h1 span {...}
• .tac { ... }

• body h1 span .class
• body h1.class a div

Nested items

• .wrapper .child .class

Inheritance

.c_bestseller-badge {
    background:yellow;
    font-size:9px;
    position:relative;
    &:after{
        content: '';
        background:yellow;
        width:12px;
        height:12px;
        ....

    }  
}

.exp_c_bestseller-badge {

    .c_bestseller-badge;

    background: red;

    color:white;
    &:after{
       display: none;        

    }  
}

Thanks