Teams, styles and scalable applications

Slide 1

Slide 1 text

Teams, styles and scalable applications vittorio vittori @vttrx vitto #css #team #style-guide

Slide 2

Slide 2 text

I started to love modular design thanks to…

Slide 3

Slide 3 text

…my beloved LEGO!

Slide 4

Slide 4 text

it was love for modular design and engineering

Slide 5

Slide 5 text

I dreamed to became an artist

Slide 6

Slide 6 text

and one day I met internet

Slide 7

Slide 7 text

so, full of dreams and ideals, I became…

Slide 8

Slide 8 text

a Macromedia Flash developer

Slide 9

Slide 9 text

for 6 years

Slide 10

Slide 10 text

but this wasn’t the end I switched to HTML, CSS and JS

Slide 11

Slide 11 text

and I saw my LEGO again .class{ background-color: green; } . { border-top: 1px solid blue; }

Slide 12

Slide 12 text

with infinite possibilities

Heilo world!

Slide 13

Slide 13 text

so, I decided to move on and…

Slide 14

Slide 14 text

write beautiful CSS #home.new table div tr {…} /* buy bread @ SUPERMAKET */ .Pag .red_area#ORO HR {…} /* not working */ /* MUST BE A CSS BUG */ .str.CIAO..new > * > div {…}

Slide 15

Slide 15 text

ok, I know I’m missing something CSS

Slide 16

Slide 16 text

This is when I realized I needed to using tools to ease my life

Slide 17

Slide 17 text

Using a framework helps you gain time on reusable stuff like grids & widgets you need for your scaling application Using an approach gives you the opportunity to grow your code between scaling application that changes during development

Slide 18

Slide 18 text

Now let’s talk about approaches not frameworks

Slide 19

Slide 19 text

APPROACH AUTHOR SMACSS  smacss.com Jonathan Snook  snook.ca OOCSS github.com/stubbornella/oocss/wiki Nicole Sullivan  stubbornella.org Expressive CSS  johnpolacek.github.io/expressive-css John Polacek  johnpolacek.com BEM bem.info Vitaly Harisov vitaly.harisov.name what’s around

Slide 20

Slide 20 text

SMACSS Scalable and Modular Architecture for CSS

Slide 21

Slide 21 text

v SMACSS BASE for common element selectors body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }

Slide 22

Slide 22 text

v SMACSS BASE not nice for element ’s attribute selectors input[type=“text”] { color: #039; } .alt-input { color: red; } .i-said-alt-input { …: #03F!important; }

Slide 23

Slide 23 text

v SMACSS LAYOUT for repeated layout elements without style changes or states #header, #article, #footer { width: 960px; margin: auto; } #article { /* etc. */ }

Slide 24

Slide 24 text

v SMACSS LAYOUT not nice they may need to be changed in the future #article { /* bg yellow */ } .bg-blue { /* bg blue */ } #article.bg-blue { /* bg blue */ }

Slide 25

Slide 25 text

SMACSS MODULE designed to exist as a standalone component .module > h2 { padding: 5px; } .module span { padding: 5px; }

Slide 26

Slide 26 text

v span { /* BASE styles */ border: 2px solid; border-color: red; } .module > h2 { padding: 5px; } .module span { padding: 5px; /* unwanted inherited propos */ border: 2px solid; border-color: red; } SMACSS MODULE resets needed because of BASE in some cases

Slide 27

Slide 27 text

SMACSS STATE something that augments and overrides all other styles .tab { color: white; } .is-tab-active { color: black; border: 1px … #000; } .is-active { color: black; }

Slide 28

Slide 28 text

v SMACSS STATE not nice for potential states duplication .tab { color: white; } .is-tab-active { color: black; border: 1px … #000; } .is-active { color: black; } .is-button-active { color: black; }

Slide 29

Slide 29 text

SMACSS  Scalable and Modular Architecture for CSS CONS xYou have to be careful on widget children selectors strength  xMany design levels, layout, base, widgets, etc. that can lead to conflicts if you work on a team  xWidget’s element selectors are not a best practice PROS ✓Organizing files by widgets it’s nice for avoiding conflicts  ✓Very fast on building codebase with state selectors

Slide 30

Slide 30 text

SMACSS by Jonathan Snook  smacss.com

Slide 31

Slide 31 text

OOCSS Object Oriented CSS

Slide 32

Slide 32 text

v OOCSS STRUCTURE AND SKIN SEPARATION to make every selector reusable in different contexts .message { /* structure */ width: 200px; height: 50px; padding: 10px; } .pink-box { /* skin */ background: pink; border: 1px solid; border-color: #C5D }

Slide 33

Slide 33 text

v OOCSS STRUCTURE AND SKIN SEPARATION

…

not nice if you want to avoid changes in HTML template for some client changes

Slide 34

Slide 34 text

v OOCSS CONTAINER AND CONTENT SEPARATION break components dependency of their containers .footer .category { /* avoid this */ font-family: a, b; font-size: 24px; line-height: 1; } .category {  /* use this */ font-family: a, b; font-size: 24px; line-height: 1; }

Slide 35

Slide 35 text

v OOCSS CONTAINER AND CONTENT SEPARATION not nice cause you may be forced to reset some props .category { font-family: a, b; font-size: 24px; line-height: 1; } /* SMACSS states */ .small-font { font-size: 12px; }

Slide 36

Slide 36 text

OOCSS  Object Oriented CSS CONS xYou will write verbose HTML  xVisual changes are made mainly in the HTML templates PROS ✓Smaller CSS files size with reusable selectors  ✓Nice for prototyping  ✓Easy to write  ✓Can be combined with other approaches

Slide 37

Slide 37 text

OOCSS by Nicole Sullivan github.com/stubbornella/oocss/wiki

Slide 38

Slide 38 text

EXPRESSIVE CSS Scalable CSS using utility classes

Slide 39

Slide 39 text

v EXPRESSIVE CSS UTILITY/HELPER CLASSES a list of ready to be used styles /* Bootstrap like */ .center-block { display: block; margin-left: auto; margin-right: auto; } /* HTML5 boilerplate like */ .hidden { display: none !im…; visibility: hidden; }

Slide 40

Slide 40 text

not nice if you don’t want verbose, heavy HTML v EXPRESSIVE CSS UTILITY/HELPER CLASSES

…

Slide 41

Slide 41 text

EXPRESSIVE CSS  Scalable CSS using utility classes CONS xNeeds documentation to share infos to the team on the stuff you write  xIf you use Foundation, Bootstrap or other you can get some conflict selector PROS ✓Approach very similar to frameworks like Bootstrap, so it’s easy to learn for people already using them  ✓Easy to read if the team has the docs  ✓Very, very, very fast writing

Slide 42

Slide 42 text

EXPRESSIVE CSS by John Polacek  johnpolacek.github.io/expressive-css

Slide 43

Slide 43 text

BEM Block Element Modifier

Slide 44

Slide 44 text

v BEM BLOCK ELEMENT MODIFIER self container modules without deep selector levels /* block */ .button { display: block; background: black; } /* element (a block child) */ .button__text { color: white; } /* modifier */ .button––yellow { background: yellow; }

Slide 45

Slide 45 text

v BEM BLOCK ELEMENT MODIFIER not nice you are forced to make more modifiers .button { display: block; background: black; } .button__text { color: white; } .button––yellow { background: yellow; } .button__text––black { color: black; }

Slide 46

Slide 46 text

BEM  Block Element Modifier CONS x It’s time consuming  x Hard to naming things and keep it consistent  x Verbose selectors naming  x Bigger CSS file size  x Suggested to be used with CSS critical path PROS ✓Nice scalable solution  ✓Just 1 level class selectors  ✓Conflict proof selectors  ✓Ultra flexible and reusable widgets  ✓Nice for teams when they know how it works

Slide 47

Slide 47 text

BEM by Vitaly Harisov  bem.info

Slide 48

Slide 48 text

Why all these approaches listed? Because the more approaches you learn the more solutions you have the more viewpoints you see the more problems you consider

Slide 49

Slide 49 text

What is the future?

Slide 50

Slide 50 text

Maybe mixing parts of these approaches together to do it  in your way SMACSS OOCSS Expressive CSS BEM Your way to do it

Slide 51

Slide 51 text

now, what about CSS & TEAMS ?

Slide 52

Slide 52 text

Front-end developer Builds the templates from the designs to make them responsive or other Iterates the staging pages the back-end dev made to give feedback Client iteration How we are used to do develop Back-end developer Takes the HTML static templates from the fdev and make them dynamic

Slide 53

Slide 53 text

Client feedback iterations Back-end developer Staging app / pages back-end tests Production app The fdev prepares the templates Front-end developer HTML static templates front-end tests

Slide 54

Slide 54 text

Back-end developer Staging app / pages back-end tests Production app Client feedback iterations Front-end developer HTML static templates front-end tests The client gives iteration feedback

Slide 55

Slide 55 text

Production app Back-end developer Staging app / pages back-end tests Client feedback iterations Front-end developer HTML static templates front-end tests The bdev bakes the app

Slide 56

Slide 56 text

Production app Back-end developer Staging app / pages back-end tests Client feedback iterations Front-end developer HTML static templates front-end tests The client gives iteration feedback

Slide 57

Slide 57 text

Production app Back-end developer Staging app / pages back-end tests Client feedback iterations Front-end developer HTML static templates front-end tests We are is ready to go in production

Slide 58

Slide 58 text

What about the velocity of this process? Is everything going always slightly fast?

Slide 59

Slide 59 text

Front-end developer static page + widgets static page + widgets static page + widgets static page + widgets static page + widgets I just need a purple button, but where is it? static page + widgets static page + widgets static page + widgets static page + widgets static page + widgets static page + widgets static page + widgets static page + widgets Back-end developer ? ? ? Now we have 70 static views let’s play to hide and seek. + 53

Slide 60

Slide 60 text

We’ve got a good workflow, but we still have messy code organization, how can we boost team speed?

Slide 61

Slide 61 text

If you’ve noticed this problem, you should consider to start adding style guides to your development workflow

Slide 62

Slide 62 text

There’s a tons of style guide generators around   github.com/davidhund/styleguide-generators  styleguides.io • Hologram • StyleDocco • Huge styleguide. • Styledown • stylifyme • mdcss • Kalei • kss • tapestry • etc.

Slide 63

Slide 63 text

We also have our style guide coded for our back-end devs Hey! I still need this #!$?% button! Can you help? static page + widgets static page + widgets static page + widgets Back-end developer ? ? ?

Slide 64

Slide 64 text

a-pollo

Slide 65

Slide 65 text

a tool to pass front-end code to back-end developers

Slide 66

Slide 66 text

Base use in icon.css || .scss || .less /*@pollo @name: Icon @html: */ .icon { … } .icon––flag { … }

Slide 67

Slide 67 text

More tags in icon.css || .scss || .less /*@pollo @name: Icon @auth: [Vittorio Vittori](http://vit.to) @category: Icons @date: 2016-01-11 @text: This is an icons set composet by… @html: */ .icon { … } .icon––flag { … }

Slide 68

Slide 68 text

Multiple examples in icon.css /*@pollo … */ /*@pollo … */ /*@pollo … */ /*@pollo … */ /*@pollo … */ .icon { … } .icon––flag { … }

Slide 69

Slide 69 text

Hexo is used by a-pollo hexo.io/docs/themes.html

Slide 70

Slide 70 text

a-pollo repo @ github.com/vitto/a-pollo website @ vitto.github.io/a-pollo ✓ Widget files doc/s ✓ Project stats ✓ Based on hexojs to easily custom style guide theme ? CSS stats ? SASS doc ? LESS doc ? Default markdown style guide articles Features Roadmap

Slide 71

Slide 71 text

Global usage # Global installation $ npm install -g a-pollo # Config file a-pollo.yml creation $ a-pollo init # Default command to generate style guide $ a-pollo # Choose a different config file $ a-pollo config=file.yml

Slide 72

Slide 72 text

Project usage # Project installation $ npm install ––save a-pollo # Config file a-pollo.yml creation $ ./node_modules/.bin/a-pollo init # Default command to generate style guide $ ./node_modules/.bin/a-pollo # Choose a different config file $ ./node_modules/.bin/a-pollo config=file.yml

Slide 73

Slide 73 text

These shelves are probably how we’d like to handle our CSS code snippets to make a faster front-end development environment