Download - Make your CSS beautiful again
![Page 1: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/1.jpg)
{
Make your CSS beautiful again
Refactoring without incurring a testing overhead
![Page 2: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/2.jpg)
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
![Page 3: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/3.jpg)
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
![Page 4: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/4.jpg)
{ Its time to make our CSS
beautiful again*
![Page 5: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/5.jpg)
*without exhausting our test analysts
![Page 6: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/6.jpg)
You need Cactus!https://github.com/winston/cactus
![Page 7: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/7.jpg)
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
![Page 8: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/8.jpg)
+ =
![Page 9: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/9.jpg)
![Page 10: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/10.jpg)
Link to jQuery Add the cactus.js file Write some tests
![Page 11: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/11.jpg)
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");
![Page 12: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/12.jpg)
![Page 13: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/13.jpg)
This page needs a screengrab of our yml file
![Page 14: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/14.jpg)
<p class=“heading”><h3 class=“smaller”><h2 class=“bigger”>
![Page 15: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/15.jpg)
YOU CANNOT BE SERIOUS!
![Page 16: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/16.jpg)
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?
![Page 17: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/17.jpg)
More?
![Page 19: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/19.jpg)
“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.”
![Page 20: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/20.jpg)
gem install sass mv style.css style.scss sass --watch web/sass-folder:web/css-
folder
now write some Sassy CSS…
![Page 21: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/21.jpg)
Nesting
CSS
SCSS
![Page 22: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/22.jpg)
This is the CSS generated by Sass for our nested SCSS
4 out of the 5 rules are inefficient
![Page 23: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/23.jpg)
![Page 24: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/24.jpg)
Nesting without creating inefficient selectors
:( :)
![Page 25: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/25.jpg)
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
![Page 26: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/26.jpg)
Selector inheritance
![Page 27: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/27.jpg)
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html
Operations, Functions & Interpolation
![Page 28: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/28.jpg)
Mixins
.pagination .next,
.pagination .previous {@include button;
}
![Page 29: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/29.jpg)
![Page 30: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/30.jpg)
example:
CSS old SASS CSS new
0
50
100
150
200
250
300
350
400
450
Tabbed box css Channel cssTotal rules
![Page 31: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/31.jpg)
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:
![Page 32: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/32.jpg)
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!
![Page 33: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/33.jpg)
footnotes
![Page 34: Make your CSS beautiful again](https://reader035.vdocument.in/reader035/viewer/2022070321/558d2561d8b42a34638b45a6/html5/thumbnails/34.jpg)