Html/LessCss
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
Html/LessCss
By Hamza Erbay
Html/LessCss
- 439