CSS:A Slippery Slope to the Backend

Hi, I’m Kacey Coughlin

Web Developer, LinkedIn

@kaceykaso

Menu:

1.Why is CSS !important?2.What do preprocessors do?3.How do preprocessors make your life easier?4.Basic Sass mixins5.How CSS is becoming more like JS6.Where you can learn more…

Poll: I prefer to write…

1.) HTML/CSS2.) Javascript3.) Neither, backend forever!

When you think of CSS….

When you think of CSS….“Stylesheet architecture”

“Painting with all the colors of the wind onto jagged mountains in order to make them look like a bob Ross piece of art”

“Good CSS gives the web a better feel… bad CSS makes me /headdesk”

“A thing that formats web pages that I totally don't understand”

“Curling into a ball and crying myself to sleep”

CSS (Cascading Style Sheet):A language that describes how to presentation of a document written in a markup language.

Before CSS…

*Possibly the first website ever, still works:http://info.cern.ch/hypertext/WWW/TheProject.html

After CSS…

“All websites are responsive by default, until we start adding styles and breaking them.”

- Ian Yates

csszengarden.com

csszengarden.com

CSS 11996December

1998May

2011September

CSS 2

CSS 3

Font, color, background, alignment, margin, border, padding, table

Absolute positioning, z-index, text-shadow

CSS3 === Christmas!

Element:not(thing) /* targets elements w/o thing */

Element:first-of-type /* targets the first of this type */

Element:nth-child(n) /* targets every nth child */

Element:nth-of-type(n) /* targets every nth type */ Element[foo*=“bar”] /* targets attr containing “bar” */

Element ~ Element-sibling /* targets any general sibling */

Parallax

3D Transforms

https://desandro.github.io/3dtransforms/

CSS Preprocessors

Extends CSS to use variables, operators, functions, and inheritance.

Minifies and concatenates all files into one plain CSS file.

sass-lang.com lesscss.org learnboost.github.io/stylus

$font-stack: Helvetica, sans-serif;$primary-color: #333;

body { font: 100% $font-stack; color: $primary-color;}

body { font: 100% Helvetica, sans-serif; color: #333;}

Variables!

nav { ul { margin: 0; padding: 0; list-style: none; }

li { display: inline-block; }

a { text-decoration: none; }}

nav ul { margin: 0; padding: 0; list-style: none;}

nav li { display: inline-block;}

nav a { text-decoration: none;}

Nesting!

Imports!

// _tabs.scss

.tabs { list-style: none; padding: 0;}

// base.scss

@import “_tabs”;

body { background: #a8a8a8;}

// style.css

.tabs { list-style: none; padding: 0;}

body { background: #a8a8a8;}

Mixins!

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius;}

.box { @include border-radius(10px);}

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px;}

Operators!

article[role="main"] { float: left; width: 600px / 960px * 100%;}

article[role="main"] { float: left; width: 62.5%;}

*Calc can do this, kinda :P

article[role=“main”] { float: left; width: calc(600px / 960px);}

Vs.

@import ‘_tabs.less’;

@color-base: #2d5e8b;

.main-type { font: 14px/100% Helvetica, sans-serif;}

.class1 { .main-type; background-color: @color-base; width: 100% / 2;

.class2 { background-color: #fff; color: @color-base; }}

@import ‘_tabs’;

$color-base: #2d5e8b;

@mixin main-type { font: 14px/100% Helvetica, sans-serif;}

.class1 { @include main-type(); background-color: $color-base; width: 100% / 2;

.class2 { background-color: #fff; color: $color-base; }}

ProsModularizationDRYMixins/functionsNesting (less typing!)

ConsAll or nothingAbstractionNeeds to be processedFile sizes can be deceivingCan’t make live changes(?)

Sass Mixins: Prefixing

@mixin vendor-prefix($name, $argument) { -webkit-#{$name}: #{$argument}; -ms-#{$name}: #{$argument}; -moz-#{$name}: #{$argument}; -o-#{$name}: #{$argument}; #{$name}: #{$argument};}

p { @include vendor-prefix(border-radius, 5px);}

p { -webkit-border-radius: 5px; -ms-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}

Sass Mixins: Typography

@mixin my-font($size: 14px) { font-family: Helvetica, sans-serif; font-size: $size; font-weight: 300;}

section { @include my-font(); p { @include my-font(12px); } }

section { font-family: Helvetica, sans-serif; font-size: 14px; font-weight: 300;} section p { font-family: Helvetica, sans-serif; font-size: 12px; font-weight: 300; }

Sass Mixins: Breakpoints

@mixin bp-tablet { @media only screen and (max-width: 600px) { @content; }}

section { @include bp-tablet { width: 100%; margin: 0; }}

section { @media only screen and (max-width: 600px) { section { width: 100%; margin: 0; } } }

Sass Mixins: Animations

@mixin keyframes($animation-name) { @-webkit-keyframes #{$animation-name} { @content; } @-moz-keyframes #{$animation-name} { @content; } @-ms-keyframes #{$animation-name} { @content; } @-o-keyframes #{$animation-name} { @content; } @keyframes #{$animation-name} { @content; }}

@mixin animation($str) { -webkit-animation: #{$str}; -moz-animation: #{$str}; -ms-animation: #{$str}; -o-animation: #{$str}; animation: #{$str}; }

Sass Mixins: Animations (cont.)

@include keyframes(slide-down) { 0% { opacity: 1; } 90% { opacity: 0; }}

.element { width: 300px; height: 100px; background: #eee; @include animation('slide-down 5s 3');}

Sass Mixins: Transitions

@mixin transition($args...) { -webkit-transition: $args; -moz-transition: $args; -ms-transition: $args; -o-transition: $args; transition: $args;}

a { color: #adadad; @include transition(color .3s ease);

&:hover { color: #000; }}

a { color: #adadad; … transition: color .3s ease;

&:hover { color: #000; }}

Sass Mixins: Visually Hide@mixin hide-element() { margin: -1px; padding: 0; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); position: absolute;}

.hidden-element { @include hide-element();}

<button class="mobile-navigation-trigger"> <span class=”hide-element"> Open the navigation </span> <img src="img/mobile-navigation-icon.svg"></button>

Preprocessors:Making your life easier since 2006!

1. Less typing2. Saves dev time3. See 1 and 2

CSS is becoming more like Javascript…

Minifying (and compiling): CSShtml body,html * { font: normal 200 14px/1.5 "Helvetica Neue", "Helvetica", "Arial", sans-serif;}

body { background-color: #F0F3F6; width: 100%;}

nav.navbar,.tools-navbar.navbar { padding: 0 48px;

.navbar-brand { @include typography($size: large, $style: light, $color: #fff); letter-spacing: 1px; }

.navbar-nav, .navbar-nav > li a > span { @include typography($size: small, $style: light, $color: #fff); font-weight: 100; letter-spacing: 1px; line-height: 2; }

.navbar-nav > li .dropdown-menu > li a > span { color: #000; }}

html *,html body{font:normal 200 14px/1.5 "Helvetica Neue",Helvetica,Arial,sans-serif}body{background-color:#F0F3F6;width:100%}.tools-navbar.navbar,nav.navbar{padding:0 48px}

http://cssminifier.com/

Minifying (and compiling): JS(function ($) { /** * @function * @property {object} jQuery plugin which runs handler function once specified * element is inserted into the DOM * @param {function} handler A function to execute at the time when the * element is inserted * @param {bool} shouldRunHandlerOnce Optional: if true, handler is unbound * after its first invocation * @example $(selector).waitUntilExists(function); */

$.fn.waitUntilExists = function (handler, shouldRunHandlerOnce, isChild) { var found = 'found'; var $this = $(this.selector); var $elements = $this.not(function () { return $(this).data(found); }).each(handler).data(found, true);

if (!isChild) { (window.waitUntilExists_Intervals = window.waitUntilExists_Intervals || {})[this.selector] = window.setInterval(function () { $this.waitUntilExists(handler, shouldRunHandlerOnce, true); }, 500) ; } else if (shouldRunHandlerOnce && $elements.length) { window.clearInterval(window.waitUntilExists_Intervals[this.selector]); }

return $this; }}(jQuery));

!function(t){t.fn.waitUntilExists=function(n,i,s){var e="found",a=t(this.selector),l=a.not(function(){return t(this).data(e)}).each(n).data(e,!0);return s?i&&l.length&&window.clearInterval(window.waitUntilExists_Intervals[this.selector]):(window.waitUntilExists_Intervals=window.waitUntilExists_Intervals||{})[this.selector]=window.setInterval(function(){a.waitUntilExists(n,i,!0)},500),a}}(jQuery);

http://jscompress.com/

Animations: JS vs CSS

$(’button').hover(function() { $(this).animate({"color":"#efbe5c","font-size":"52pt"}, 1000); //mouseover}, function() { $(this).animate({"color":"#e8a010","font-size":"48pt"}, 1000); //mouseout});

*Requires Jquery, Jquery Colors, etc

button { transition: color 1s ease-in-out; -moz-transition: color 1s ease-in-out; -webkit-transition: color 1s ease-in-out; -o-transition: color 1s ease-in-out; }

button { @include transition(color, 1s);}

Animations: JS vs CSS*

Jquery and Javascript are not interchangable.

Jquery GSAP CSS

CSS does better with simpler transitions.

JS is better with complicated cubic bezier, 3D, wandering points, etc.

https://css-tricks.com/myth-busting-css-animations-vs-javascript/

http://codepen.io/GreenSock/full/2a53bbbcd47df627f25ed1b74beb407d/

PerformanceCSS Jquery

• CSS only repaints what it needs to

• CSS lets the browser know up front

• Browser cannot predict with JS

• JS must recalculate all styles first, then paint

• Produces visible lag up front

http://css3.bradshawenterprises.com/blog/jquery-vs-css3-transitions/

Functions

$columns: 4;

@for $i from 1 through $columns { .cols-#{$i} { width: ((100 / $columns) * $i) * 1%; }}

var $columns = 4;

for (var i = 0; i < $columns; i++) { $(‘.cols-’ + i).css({ ‘width’: ((100 / $columns) * i) * 1%) });}

CSS JS

Functions

@if lightness($color) < 50% { text-shadow: 1px 1px 1px rgba(#fff, $opacity); } @else { text-shadow: -1px -1px 1px rgba(#000, $opacity); }

color: $color;

JS

CSS

if (lightness($color) < 50%) { this.css(‘text-shadow’,’1px 1px 1px rgba(#fff, $opacity)’); } else { this.css(‘text-shadow’, ‘-1px -1px 1px rgba(#000, $opacity)’); }

this.css(‘color’, $color);

CSS: The Future!

*CSS4 Spec (Draft): https://drafts.csswg.org/selectors/

Element:matches(param1, param1) /* opposite of :not, takes multiple params */

Element:nth-match(n) /* targets nth matching sibling */

Element:has(param1, param2) /* targets element if it contains params */

Element:dir(rtl) /* targets document language direction */

Element:any-link /* targets any anchor, do not need to specify */

Element:indeterminate /* targets states not checked or unchecked*/

Element:column(thing) /* targets column of element with thing in it */

Element /foo/ Sibling /* targets sibling by element’s attr foo */

Element! > Thing /* targets thing’s parent of type element */

HTML -> CSS -> Javascript -> ???

The more you know….

Learn MOAR!

https://css-tricks.com/

http://codepen.io/

http://www.smashingmagazine.com/

Shop Talkhttp://shoptalkshow.com/

Boagworldhttps://boagworld.com/show/

The Big Web Showhttp://www.zeldman.com/Category/the-big-web-show/

http://stackoverflow.com/

https://www.quora.com/

http://caniuse.com/

Thanks!!

@kaceykaso @linkedin