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

COLORNAMER

PIGMENTS

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