css scalabile: sfide e ricompense di un percorso in salita
Post on 11-Apr-2017
106 Views
Preview:
TRANSCRIPT
CSS SCALABILESfide e ricompense di un percorso in salita
Carla Soloperto@uochimiluochi
WE WILL TALK ABOUT:
CHALLENGES
RESPONSIBILITIES
REWARDS!
six packweb
biceps
quadriceps
Let’s climb!
HOW DOES THE TEAM WORK?
BACKENDBACKENDBACKENDUI
FRONTEND
ITERATIVE / INCREMENTAL
Iteration 1
Iteration 2
Iteration 3
as a
I want
so that
USER STORIES
type of user
some goal
benefit, value
HOW DOES THE FRONTEND DEVELOPER
NOT WORK?
USER STORIES
ITERATIVE / INCREMENTAL
STATIC TEMPLATES
- contain more than the product will ever need
- hard to split into partials
- hard to expand
- living their lives outside the actual product
Harry RobertsTen Principles for Effective Front-end Development
{ @csswizardry }
#6
Harry RobertsTen Principles for Effective Front-end Development
{ @csswizardry }
#9
v documents-list
v documents-list
- READABLE CODE
- DRY CODE
- SCALABLE CODE
- MODULAR CODE
CHALLENGES
= CODING CONVENTIONS
LINTERS
NAMING CONVENTIONS
ARCHITECTURE
Share them!
Rely on semantics
Avoid presentational class names
Some tips
use a TEMPLATE ENGINE for your markup
- break your html into smaller files
- populate your markup with data
Tip
Nunjucks, Handlebars, Dust.js
Faker
MODULAR
index.html
htmlvv
vv
v
customers
documents
users
products
componentsv
import.scss
stylesv
vv
vv
customers
documents
users
products
componentsv
v
v
MODULAR?
index.html
htmlvv
customers
customers-list
products
componentsvv products-list
v customers-list
v products-list
.list { … }
.list__item { … }
.list__title { … } .list__create-new { … }
.list { … }
.list__item { … }
.list__title { … } .list__create-new { … }
don’t let MODULARITY become REDUNDANCY
RESPONSIBILITIES
- OTHER FRONTEND DEVELOPERS
- BACKEND DEVELOPERS
- OURSELVES!
adopt and share yourCODING CONVENTION
let someoneREVIEW YOUR CODE
thinkMODULAR
!REWARDS
- READABLE CODE
- DRY CODE
- SCALABLE CODE
- MODULAR CODE
Thank youCarla Soloperto
@uochimiluochi
top related