Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Test-proof CSS
vittorio vittori
@vttrx
#css-testing
As a front-end developer
I write CSS, HTML and JavaScript
for different size projects
sometimes we start
SMALL PROJECTS
some HTML templates
mobile ready
LESS, SASS or CSS
sometimes we start
BIG PROJECTS
many templates
PHP/JS template engines
all responsive
retina support
a lot of LESS or SASS
sometimes we work on
PROJECTS THAT NEEDS HELP
huge project
no template engines
no coding standard
half working
CSS only
and
we make
MISTAKES.
we make mistakes
It’s normal
It's the main way to
grow and learn
me
excluded!
but sometimes
a small mistake
can lead to a big problem
checkout
t-shirt 8.00 $
Sport bag 22.50 $
Golf club 95.00 $
total 125.50 $
suppose a 25.000 $/day seller site
checkout
t-shirt 8.00 $
Sport bag 22.50 $
Golf club 95.00 $
total 125.50 $
Chrome render
60% of users
IE8 render
40% of us...
.buy-bg {
/* background-color: #ECECEC; */
background-color: rgba(0,0,0,0.15);
}
this is a missing fallback color
rgbwhat??
your client can say goodbye to
10.000$ per day
until you fix
the missing fallback color
how can I avoid these problems
without being crazy?
CSSLINT
a tool to test CSS problems
• Possible Errors
• Disallow duplicate properties
• Disallow empty rules
• Require use of known properties, etc…
• Compati...
how it works?
CSSLINT
style.css
report
.csslintrc
CSSLINT / syntax checking
also on some text editors
jetbrains.com/phpstorm sublimetext.com
gruntjs.comnodejs.org gulpjs.com
RESEMBLEJS
a tool to test regression mistakes
how a regression test works?
image
created
image
changed
THE DIFFERENCE
the result
if the image is changed
you’ll see it
suppose a BIG WEBSITE
with tons of different widgets
needed to be reused in different places
how RESEMBLEJS works?
RESEMBLEJS
page-01.html
page-02.html
test PASSED
page-…html
fingerprints
casper
}
fingerprints
how RESEMBLEJS works?
RESEMBLEJS
…01.html
…02.html
test FAIL
…html
new images
casper
v
Sometimes
they need specific state
relative to the view for design needs
this helps you to keep
changes isolated on the ...
v
regression tests should be on
static HTML templates to:
• avoid fails by fixtures changes
• get faster tests performance...
RESEMBLEJS / regression tests
gruntjs.com
nodejs.org
can be used with
phantomjs.org casperjs.org
BackstopJS gulpjs only
gi...
UNCSS
a tool to remove unused selectors
how it works?
UNCSS
page-01.html
page-02.html
style.uncssed.css
page-…html
style.css
CSS
.logo {
background-image: url(…);
}
.js-selector {
position: fixed;
}
div header {
background-color: pink;
}
nav {
pad...
HTML
<body>
<header>
<a class=“logo” href=“#”></a>
<nav>
<a href=“#”>Hello</a>
</nav>
</header>
</body>
CSS
.logo {
background-image: url(…);
}
.js-selector {
position: fixed;
}
div header {
background-color: pink;
}
nav {
pad...
UNCSS / unused styles remover
nodejs.org
can be used with
gulpjs.comgruntjs.com
STYLESTATS
a tool to see how you wrote your styles
how it works?
STYESTATS
style.css
report
Published Wed Feb 25 2015…
Paths github.css
Stylesheets 1
Size 231.0KB
Data Uri Size 0
Rules 2957
Selectors 3289
Simplicit...
STYLESTATS / unused styles remover
gruntjs.com
nodejs.org
can be used with
gulpjs.com
how I choose which tests to use?
OBJECTIVES - dev priority

Client needs, which browsers, UX needed

COMPLEXITY

Team size...
Is that all with tests/tools?
no, there are tons of nodesjs and gruntjs plug-ins
WHAT TYPE
csslint syntax test
ResembleJS ...
SMALL
WHAT USE
csslint Y
ResembleJS N
uncss O
StyleStats O
less budget margins
BIG
WHAT USE
csslint Y
ResembleJS Y
uncss Y...
THANK YOU
vittorio vittori
@vttrx
#css-testing
Upcoming SlideShare
Loading in …5
×

Test-proof CSS

912 views

Published on

An overview on nodejs tools I use @ ideato to test my CSS generated by LESS or SASS.

Published in: Internet
  • Be the first to comment

Test-proof CSS

  1. 1. Test-proof CSS vittorio vittori @vttrx #css-testing
  2. 2. As a front-end developer I write CSS, HTML and JavaScript for different size projects
  3. 3. sometimes we start SMALL PROJECTS some HTML templates mobile ready LESS, SASS or CSS
  4. 4. sometimes we start BIG PROJECTS many templates PHP/JS template engines all responsive retina support a lot of LESS or SASS
  5. 5. sometimes we work on PROJECTS THAT NEEDS HELP huge project no template engines no coding standard half working CSS only
  6. 6. and we make MISTAKES.
  7. 7. we make mistakes It’s normal It's the main way to grow and learn me excluded!
  8. 8. but sometimes a small mistake can lead to a big problem
  9. 9. checkout t-shirt 8.00 $ Sport bag 22.50 $ Golf club 95.00 $ total 125.50 $ suppose a 25.000 $/day seller site
  10. 10. checkout t-shirt 8.00 $ Sport bag 22.50 $ Golf club 95.00 $ total 125.50 $ Chrome render 60% of users IE8 render 40% of users suppose a 25.000 $/day seller site
  11. 11. .buy-bg { /* background-color: #ECECEC; */ background-color: rgba(0,0,0,0.15); } this is a missing fallback color
  12. 12. rgbwhat?? your client can say goodbye to 10.000$ per day until you fix the missing fallback color
  13. 13. how can I avoid these problems without being crazy?
  14. 14. CSSLINT a tool to test CSS problems
  15. 15. • Possible Errors • Disallow duplicate properties • Disallow empty rules • Require use of known properties, etc… • Compatibility • Require compatible vendor prefixes • Require all gradient definitions • Require fallback colors, etc… • Performance • Disallow units for zero values, etc… • Maintainability & Duplication • Disallow IDs in selectors, etc… • Accessibility • OOCSS Rule types github.com/CSSLint/csslint
  16. 16. how it works? CSSLINT style.css report .csslintrc
  17. 17. CSSLINT / syntax checking also on some text editors jetbrains.com/phpstorm sublimetext.com gruntjs.comnodejs.org gulpjs.com
  18. 18. RESEMBLEJS a tool to test regression mistakes
  19. 19. how a regression test works? image created image changed
  20. 20. THE DIFFERENCE the result if the image is changed you’ll see it
  21. 21. suppose a BIG WEBSITE with tons of different widgets needed to be reused in different places
  22. 22. how RESEMBLEJS works? RESEMBLEJS page-01.html page-02.html test PASSED page-…html fingerprints casper }
  23. 23. fingerprints how RESEMBLEJS works? RESEMBLEJS …01.html …02.html test FAIL …html new images casper
  24. 24. v Sometimes they need specific state relative to the view for design needs this helps you to keep changes isolated on the page
  25. 25. v regression tests should be on static HTML templates to: • avoid fails by fixtures changes • get faster tests performance • get less test writing costs
  26. 26. RESEMBLEJS / regression tests gruntjs.com nodejs.org can be used with phantomjs.org casperjs.org BackstopJS gulpjs only github.com/garris/BackstopJS PhantomCSS github.com/Huddle/PhantomCSSgulpjs.com
  27. 27. UNCSS a tool to remove unused selectors
  28. 28. how it works? UNCSS page-01.html page-02.html style.uncssed.css page-…html style.css
  29. 29. CSS .logo { background-image: url(…); } .js-selector { position: fixed; } div header { background-color: pink; } nav { padding: 20px; }
  30. 30. HTML <body> <header> <a class=“logo” href=“#”></a> <nav> <a href=“#”>Hello</a> </nav> </header> </body>
  31. 31. CSS .logo { background-image: url(…); } .js-selector { position: fixed; } div header { background-color: pink; } nav { padding: 20px; } WHITE LIST KEPT DELETED KEPT
  32. 32. UNCSS / unused styles remover nodejs.org can be used with gulpjs.comgruntjs.com
  33. 33. STYLESTATS a tool to see how you wrote your styles
  34. 34. how it works? STYESTATS style.css report
  35. 35. Published Wed Feb 25 2015… Paths github.css Stylesheets 1 Size 231.0KB Data Uri Size 0 Rules 2957 Selectors 3289 Simplicity 89.91% Most Identifiers 4 Most Identifiers Selector .is-uploading .avatar… Lowest Cohesion 24 Lowest Cohesion Selector .add-line-comment Total Unique Font Sizes 36 Unique Font Size 0.9em … Total Unique Colors 66 Unique Color #000 … and so on…
  36. 36. STYLESTATS / unused styles remover gruntjs.com nodejs.org can be used with gulpjs.com
  37. 37. how I choose which tests to use? OBJECTIVES - dev priority
 Client needs, which browsers, UX needed
 COMPLEXITY
 Team size, tasks diversity, to-do list
 BUDGET - client priority
 Setup time, writing and testing time
  38. 38. Is that all with tests/tools? no, there are tons of nodesjs and gruntjs plug-ins WHAT TYPE csslint syntax test ResembleJS layout regression test uncss unused selectors tool StyleStats css stats tool checkout http://csste.st to see more
  39. 39. SMALL WHAT USE csslint Y ResembleJS N uncss O StyleStats O less budget margins BIG WHAT USE csslint Y ResembleJS Y uncss Y StyleStats Y more budget, handle complexity, front-end under control Y N O YES NOT RECOMMENDED OPTIONAL, easy to setup VS
  40. 40. THANK YOU vittorio vittori @vttrx #css-testing

×