make your css beautiful again

{

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?

Syntactically Awesome Stylesheets

http://sass-lang.com/

“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