CSS the right way?

Overview of CSS for modern Web Applications. CSS architecture methodologies and best practices.

Transcript

1. CSS the right way?
   

   View Slide

2. View Slide

3. Michael Lancaster
   @weblancaster @weblancaster
   Front End Developer
   

   View Slide

4. What do you think when you hear
   the word catastrophe?
   

   View Slide

5. View Slide

6. Code that does not have..
   Scalability
   is a catastrophe
   Modularity
   Performance
   Maintainability
   Reusability
   Understanding
   Flexibility
   Predictability
   Consistency
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. View Slide

11. CSS bad practices
    

    View Slide

12. #header {
    width: 960px;
    }
    #aside {
    width: 260px;
    float: left;
    }
    #content {
    width: 680px;
    float: right;
    }
    #content #article {
    width: 100%;
    padding: 20px;
    }
    #content #article #title {
    font-size: 12px;
    }
    #footer{
    width: 960px;
    }
    Specificity
    Dude! You are doing it wrong.
    

    View Slide

13. div#header {
    width: 960px;
    }
    ul#aside {
    width: 260px;
    float: left;
    }
    ul#aside li.items p.title {
    text-align: center;
    font-size: 12px;
    }
    div#content div h4 span {
    font-size: 16px;
    }
    Over-qualify
    Dude! You are doing it wrong.
    

    View Slide

14. #search .box .lbl .input-txt {
    width: 250px;
    }
    #content div h4 span a {
    font-size: 16px;
    }
    Long-descendants (nesting)
    Dude! You are doing it wrong.
    

    View Slide

15. “Don’t style websites.
    Build Web Applications”
    

    View Slide

16. The good practices
    Free tips!
    

    View Slide

17. • Use classes they are your best friends
    • Avoid ID’s
    • Avoid Tag-qualification
    • Avoid long-descendants (nesting)
    • Use CSS pre-processors (applying the tips above)
    • Find patterns on the design and build style guide documentation
    • Performance matters
    • Browsers “match” CSS from right to left
    • Use name convention. CamelCase, camelBack, snake_case. Whatever
    

    View Slide

18. View Slide

19. Bonus
    

    View Slide

20. Three main CSS
    Methodologies
    

    View Slide

21. SMACSS
    BEM
    OOCSS
    

    View Slide

22. SMACSS
    (Scalable and Modular Architecture for CSS)
    • Base
    • Layout
    • Module
    • State
    • Theme
    

    View Slide

23. Base
    

    View Slide

24. body {
    font-size: 62.5%;
    background: #fff;
    color: #000;
    }
    a {
    color: #ababab;
    }
    a:hover {
    color: #3a3a3a;
    }
    h1,
    h2,
    h3 {
    text-transform: uppercase;
    }
    

    View Slide

25. Layout
    

    View Slide

26. #header,
    #container,
    #footer {
    width: 960px;
    margin: 0 auto;
    }
    #sidebar {
    width: 300px;
    float: left;
    }
    #content {
    width: 600px;
    float: right;
    }
    

    View Slide

27. View Slide

28. View Slide

29. Module
    

    View Slide

30. .module > h2 {
    font-size: 22px;
    color: #ccc;
    }
    .module > p {
    font-size: 12px;
    color: #333;
    }
    .module > strong {
    text-transform: uppercase;
    }
    

    View Slide

31. View Slide

32. States
    

    View Slide

33. .is-hidden {
    display: none;
    }
    .tab {
    background: #555;
    color: #fff;
    }
    /* overwrite default styling */
    .is-tab-active {
    background: #fff;
    color: #555;
    }
    

    View Slide

34. View Slide

35. View Slide

36. Themes
    

    View Slide

37. /* module.css */
    .module {
    background: #333;
    }
    .module > p {
    color: #fff;
    }
    /* theme-clean.css */
    .module {
    background: #fff;
    }
    .module > p {
    color: #333;
    }
    

    View Slide

38. BEM
    (Block Element Modifier)
    • Block
    • Element
    • Modifier
    

    View Slide

39. View Slide

40. Block
    

    View Slide

41. View Slide

42. View Slide

43. View Slide

44. Element
    

    View Slide

45. View Slide

46. /* code example */
    
    Logo
    
    ...
    ...
    
    
    

    View Slide

47. Modifier
    

    View Slide

48. View Slide

49. View Slide

50. /* code example modifier */
    
    Logo
    
    ...
    ...
    
    
    

    View Slide

51. OOCSS
    (Object Oriented CSS)
    • Separate structure and skin
    • Separate Content and Container
    

    View Slide

52. View Slide

53. Objective
    • Flexibility
    • Create a component library
    • Minimize Selectors
    • Extend objects applying classes
    • Use consistent styles
    • Build HTML and style from the component library
    

    View Slide

54. .header {
    background: #fbfbfb;
    width: 960px;
    box-shadow: 0px 2px 2px #AAA;
    border: 1px solid #AAA;
    margin: 10px;
    }
    .content {
    background: #fbfbfb;
    width: 960px;
    box-shadow: 0px 2px 2px #AAA;
    border: 1px solid #AAA;
    margin: 10px;
    }
    .footer {
    background: #fbfbfb;
    width: 960px;
    box-shadow: 0px 2px 2px #AAA;
    border: 1px solid #AAA;
    margin: 10px;
    }
    not OOCSS
    

    View Slide

55. .main-theme {
    background: #fbfbfb;
    box-shadow: 0px 2px 2px #AAA;
    border: 1px solid #AAA;
    }
    .main-template {
    width: 960px;
    margin: 10px;
    }
    OOCSS!
    

    View Slide

56. .bt {
    border: 1px solid rgba(0, 0, 0, 0.25);
    color: #444;
    margin: 0px 5px;
    height: 29px;
    width: 65px;
    padding: 8px 13px;
    background-image: -webkit-linear-gradient(#ededed, #ededed
    38%, #dedede);
    text-shadow: 0 1px 0 rgb(240, 240, 240);
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), inset 0 1px 2px rgba(255,
    255, 255, 0.75);
    font-size: 12px;
    }
    .bt.bt-dark {
    -webkit-linear-gradient(#693B3B, #B8B2B2 38%, #dedede);
    }
    .bt.bt-big {
    height: 45px;
    width: 100px;
    font-size: 16px;
    }
    

    View Slide

57. And what’s the best
    Methodology?
    SMACSS?
    BEM?
    OOCSS?
    

    View Slide

58. The one that apply..
    Scalability
    Modularity
    Performance
    Maintainability
    Reusability
    Understanding
    Flexibility
    Predictability
    Consistency
    to your team
    

    View Slide

59. There’s no such thing as “the god master way”.
    But there’s definitely great practices.
    

    View Slide

60. Thanks
    @weblancaster @weblancaster
    

    View Slide