Teams, styles and scalable applications
- 11. and I saw my LEGO again
.class{
background-color: green;
}
. {
border-top: 1px solid blue;
}
- 14. 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 {…}
- 16. This is when I
realized I needed
to using tools
to ease my life
- 17. 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
- 26. 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
- 29. 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
- 32. 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
}
- 36. 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
- 39. 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;
}
- 40. not nice
if you don’t want
verbose, heavy
HTML
v
EXPRESSIVE CSS
UTILITY/HELPER
CLASSES
<div class=“message move-left margin-top
more-padding no-padding-left just-a-few-
border-left no-border—top”>
…
</div>
- 41. 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
- 45. 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;
}
- 46. 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
- 48. 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
- 50. Maybe mixing parts of these
approaches together to do it
in your way
SMACSS
OOCSS
Expressive
CSS
BEM
Your way
to do it
- 52. 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
- 58. What about the velocity of this
process?
Is everything going always
slightly fast?
- 59. 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
- 60. We’ve got a good workflow,
but we still have messy code
organization, how can we boost
team speed?
- 61. If you’ve noticed this problem,
you should consider to start
adding style guides to your
development workflow
- 62. 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.
- 63. 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
?
?
?
- 65. a tool to pass front-end code to
back-end developers
- 66. Base use in icon.css || .scss || .less
/*@pollo
@name: Icon
@html: <i class="icon icon--flag"></i>
*/
.icon {
…
}
.icon––flag {
…
}
- 67. 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: <i class="icon icon--flag"></i>
*/
.icon {
…
}
.icon––flag {
…
}
- 68. Multiple examples in icon.css
/*@pollo … */
/*@pollo … */
/*@pollo … */
/*@pollo … */
/*@pollo … */
.icon {
…
}
.icon––flag {
…
}
- 70. 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
- 71. 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
- 72. 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
- 73. These shelves are probably
how we’d like to handle
our CSS code snippets
to make a faster front-end
development environment