Download - Test-proof 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
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
• 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
CSSLINT / syntax checking
also on some text editors
jetbrains.com/phpstorm sublimetext.com
gruntjs.comnodejs.org gulpjs.com
how RESEMBLEJS works?
RESEMBLEJS
page-01.html
page-02.html
test PASSED
page-…html
fingerprints
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/PhantomCSSgulpjs.com
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
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…
how I choose which tests to use?
OBJECTIVES - dev priorityClient needs, which browsers, UX needed
COMPLEXITYTeam size, tasks diversity, to-do list
BUDGET - client prioritySetup 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