Test-proof CSS

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 users suppose a 25.000 $/day seller site

.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… • 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

how it works? CSSLINT style.css report .csslintrc

CSSLINT / syntax checking also on some text editors jetbrains.com/phpstorm
sublimetext.com gruntjs.com nodejs.org gulpjs.com

RESEMBLEJS a tool to test regression mistakes

how a regression test works? image created

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 page

v regression tests should be on static HTML templates to:
• avoid fails by fixtures changes • get faster tests performance • get less test writing costs

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/PhantomCSS gulpjs.com

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 { padding: 20px; }

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 { padding: 20px; } WHITE LIST KEPT DELETED KEPT

UNCSS / unused styles remover nodejs.org can be used with
gulpjs.com gruntjs.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 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…

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, tasks diversity, to-do list  BUDGET - client priority  Setup time, writing and testing time

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

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

THANK YOU vittorio vittori @vttrx #css-testing

Test-proof CSS

Test-proof CSS

More Decks by Vittorio Vittori

Other Decks in Programming

Featured

Transcript