make your css beautiful again
DESCRIPTION
This is the first of three presentations detailing the front end optimization of goodtoknow.co.uk. Part one describes how we refactored the CSS, part two will address the HTML structure and implementation of Behat tests, and part three will contend with image optimization specifically addressing data URI’s and sprites. Full notes here: http://spannerspace.com/make-your-css-beautiful-again/TRANSCRIPT
{
Make your CSS beautiful again
Refactoring without incurring a testing overhead
Goodtoknow has more than 36 stylesheets.
gtkMain.css
gtkHeader.css
base.css
galleryCarousel.css
bauOverride.cssgtkFooter.css
rightRail.css
gtkFacebook.css
brightcove.css
tabbedBox.css
recipeArticle.css
atoz.css
videos.csssubmitPic.css
comments.css
pluck.cssgalleryCarousel.css
recipes.css
gtkMain.css
gtkHeader.css
base.cssgalleryCarousel.c
ss
bauOverride.cssgtkFooter.css
rightRail.css
gtkFacebook.css
brightcove.css
tabbedBox.css
recipeArticle.css
atoz.css
videos.css submitPic.css
comments.csspluck.cssgalleryCarousel.css
recipes.css
Each page uses approx. 10 of those stylesheets at a combined weight of around 280k
The average page only uses 50% of the CSS served
At an average of 1500 CSS rules per page, around 300 are inefficient and 150 are very inefficient.
The average page speed score is 82/100
{ Its time to make our CSS
beautiful again*
*without exhausting our test analysts
You need Cactus!https://github.com/winston/cactus
CSS tests are simply a baseline representation of your style guide.
<shame>Don’t have one? Neither did we!</shame>
By writing CSS tests you can refactor with confidence, whilst building & reinforce your style guide
+ =
Link to jQuery Add the cactus.js file Write some tests
Cactus.expect(".header", "font-size").toEqual("24px");Cactus.expect(".header", "font-family").toContain("Helvetica");Cactus.expect(".header", "color").toEqual("#ff0000");Cactus.expect(".header").toHaveMargin("10px");Cactus.expect(".header").toHaveBorderWidth("1px");Cactus.expect(".header").toHaveBorderColor("#ff000");Cactus.expect(".header“, “float”).toContain(“left");
This page needs a screengrab of our yml file
<p class=“heading”><h3 class=“smaller”><h2 class=“bigger”>
YOU CANNOT BE SERIOUS!
Refactor with confidence Ensures code quality Reduce testing overhead Build a style guide Promotes semantic markup Reduce CSS file size Reduce page load times And it can even be automated (but we’re not doing this just yet!)
Why use cactus?
More?
“Sass is an extension of CSS3 which adds nested rules, variables, mixins, selector inheritance, and more. Sass generates well formatted CSS and makes your stylesheets easier to organize and maintain.”
gem install sass mv style.css style.scss sass --watch web/sass-folder:web/css-
folder
now write some Sassy CSS…
Nesting
CSS
SCSS
This is the CSS generated by Sass for our nested SCSS
4 out of the 5 rules are inefficient
Nesting without creating inefficient selectors
:( :)
Sass allows you to declare variables that can be used throughout your stylesheet. Variables begin with $ and are declared just like properties. They can have any value that’s allowed for a CSS property, such as colors, numbers (with units), or text.
Variables
Selector inheritance
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
Operations, Functions & Interpolation
Mixins
.pagination .next,
.pagination .previous {@include button;
}
example:
CSS old SASS CSS new
0
50
100
150
200
250
300
350
400
450
Tabbed box css Channel cssTotal rules
Nesting can create inefficient selectors Generated CSS file can be slightly more
inflated if used carelessly Be cautious that you’re not duplicating
variables and mixins
Reasons to be cautious:
Reasons you love Sass: Build and easily maintain a style guide SCSS file is more concise Variables and mixins prevent careless errors Stacks of great functions available Error handling for poor code Easier to maintain Use the math functions for responsive builds Now your CSS is beautiful again!
footnotes
