Keep Calm and Write Sass

Slides of my 18-minutes talk "Keep Calm and Write Sass" at dotCSS 2014 (November 14th).

Transcript

1. View Slide

2. “Your CSS
   is a mess.”
   Jonathan Snook
   

   View Slide

3. Your CSS
   is a mess.
   

   View Slide

4. Broken from
   the start?
   

   View Slide

5. Sass to
   the rescue!
   

   View Slide

6. But... wait.
   

   View Slide

7. It's not all
   bright and
   shiny.
   

   View Slide

8. Complexity,
   maintainability,
   scary code...
   

   View Slide

9. Don't
   over-{think|engineer}
   

   View Slide

10. KISS
    Keep It
    Simple, Stupid!
    

    View Slide

11. KYSS
    Keep Your
    Sass Simple
    Keep Sass Simple at SitePoint
    

    View Slide

12. KYSSS
    Keep Your
    Sass Simple &
    Straightforward
    

    View Slide

13. KYSSSS
    Keep Your
    Sass Simple, Smart &
    Straightforward...
    

    View Slide

14. Write
    simple APIs
    

    View Slide

15. .parent {
    @include _(
    10 8 6 4,
    $gutter: alpha omega omega default
    );
    }
    

    View Slide

16. .parent {
    width: 100%;
    @include respond-to("desktop") {
    width: 75%;
    }
    }
    

    View Slide

17. $color: map-get(
    map-get(
    map-get(
    $themes, "shopping"
    ), "colors"
    ), "secondary"
    );
    

    View Slide

18. $color: theme-conf(
    "shopping", "colors", "secondary"
    );
    

    View Slide

19. Beware of
    selector nesting
    Beware of selector nesting at SitePoint
    

    View Slide

20. Don't do
    everything in
    Sass
    

    View Slide

21. Rethinking
    Atwood's law
    

    View Slide

22. Anything that can
    be written in Sass
    will eventually be
    written in Sass
    (probably by me)
    

    View Slide

23. SassyJSON
    @include json-encode((
    "cats" : true,
    "answer" : 42
    ));
    // {"cats": true, "answer": 42}
    github.com/HugoGiraudel/SassyJSON
    

    View Slide

24. SassySort
    $list: sort(
    "How" "cool" "Sass" "is?" 42
    );
    // 42 "cool" "How" "is?" "Sass"
    github.com/HugoGiraudel/SassySort
    

    View Slide

25. SassyBitwise
    $value: bitwise(42 '&' 48);
    // 32
    github.com/HugoGiraudel/SassyBitwise
    

    View Slide

26. Some things
    shouldn't
    be done
    

    View Slide

27. Vendor
    prefixing?
    Maybe not.
    

    View Slide

28. Autoprefixer
    Less code
    Up-to-date
    github.com/postcss/autoprefixer
    

    View Slide

29. REM?
    Think twice.
    

    View Slide

30. px_to_rem
    Less code
    Easier
    github.com/songawee/px_to_rem
    

    View Slide

31. View Slide

32. Clean
    your code
    

    View Slide

33. .selector {
    color: blue;
    backgroud: url(unicorn.png);
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    position: relative }
    

    View Slide

34. .selector {
    position: relative;
    -webkit-transform: rotate(15deg);
    transform: rotate(15deg);
    color: blue;
    backgroud: url("unicorn.png");
    }
    

    View Slide

35. cssguidelin.es
    

    View Slide

36. scss-lint
    github.com/causes/scss-lint
    

    View Slide

37. Document
    your code
    

    View Slide

38. .selector {
    overflow: hidden;
    white-space: nowrap;
    margin: -.5em;
    z-index: 42;
    }
    

    View Slide

39. /**
    * 1. Clear inner floats
    * 2. Force all items on same line
    * 3. Cancel items padding
    * 4. Above content, below modal
    */
    .selector {
    overflow: hidden; /* 1 */
    white-space: nowrap; /* 2 */
    margin: -.5em; /* 3 */
    z-index: 42; /* 4 */
    }
    

    View Slide

40. Document
    your Sass
    

    View Slide

41. SassDoc
    sassdoc.com
    

    View Slide

42. /// Mixin to size an element
    /// @access public
    /// @param {Number} $width - Width
    /// @param {Number} $height - Height
    /// @example scss - Sizing an element
    /// .element {
    /// @include size(100%, 5em);
    /// }
    SassDoc
    

    View Slide

43. SassDoc
    

    View Slide

44. Test
    your code
    

    View Slide

45. True
    or
    BootCamp
    

    View Slide

46. @include describe("A suite") {
    @include it("contains spec with expectation") {
    @include should(
    expect(2 + 2),
    to(be(4))
    );
    }
    }
    Bootcamp
    github.com/thejameskyle/bootcamp
    

    View Slide

47. KISS - KYSS
    clean, test,
    document
    

    View Slide

48. And everything
    will be fine.
    

    View Slide

49. Thanks!
    @HugoGiraudel
    

    View Slide