Upgrade to Pro — share decks privately, control downloads, hide ads and more …

OPT-IW011 Advanced CSS Concepts

OPT-IW011 Advanced CSS Concepts

Siddharth Kshetrapal

December 04, 2016
Tweet

More Decks by Siddharth Kshetrapal

Other Decks in Technology

Transcript

  1. Advanced
    HTML / CSS concepts
    OPT-IW011
    http://bit.ly/optiw011

    View full-size slide

  2. December 17, 1996

    View full-size slide

  3. CSS - Programming language?

    View full-size slide

  4. .sidebar .main
    .wrapper
    .footer

    View full-size slide

  5. .sidebar .main
    .wrapper
    800px
    200px
    .footer
    All 4 divs have padding 20px

    View full-size slide

  6. .sidebar .main
    .wrapper
    Big Heading h1
    Big Heading h1 : hover state
    .footer

    View full-size slide

  7. .sidebar .main
    .wrapper
    Big Heading h1
    Big Heading h1 : hover state
    .footer

    View full-size slide

  8. .sidebar .main
    .wrapper
    900px
    250px
    .footer
    All 4 divs have padding 25px

    View full-size slide

  9. CSS at scale

    View full-size slide

  10. Evils at scale
    Repetition
    Inconsistency
    No reusability
    Bloat

    View full-size slide

  11. Create your own micro framework
    1. Create a micro framework for CSS
    a. Production version - minified CSS
    b. Development version (SCSS) - customizable variables and build CSS
    2. Follow a coding standard (github/airbnb/etc)

    View full-size slide

  12. Importance of a styleguide

    View full-size slide

  13. Importance of a styleguide
    Set the standard for code quality across a codebase
    Promote consistency across the application
    Give developers a feeling of familiarity across codebases
    Increase speed of development

    View full-size slide

  14. Core components of a framework
    Resets
    Grids
    Variables
    Colors
    Typography
    Elements - buttons, input boxes, tables, etc.
    Images
    Icons
    Components - navigation, cards, forms, popups, etc.
    Views - login form, etc.
    Theming

    View full-size slide

  15. Philosophies

    View full-size slide

  16. Philosophies
    BEM
    ITCSS
    OOCSS
    SMACSS

    View full-size slide

  17. Common concepts
    Consistency of style
    Coding standards
    Separation of Concerns
    Single Responsibility Principle
    Immutability

    View full-size slide

  18. 2009
    Nicole
    Sullivan
    @stubbornella

    View full-size slide

  19. OOCSS: Lego driven development

    View full-size slide

  20. > global
    reset.scss
    grid.scss
    colors.scss
    typography.scss

    View full-size slide

  21. > global
    reset.scss
    grid.scss
    colors.scss
    typography.scss
    > elements
    buttons.scss
    inputs.scss
    tables.scss

    View full-size slide

  22. > global
    reset.scss
    grid.scss
    colors.scss
    typography.scss
    > elements
    buttons.scss
    inputs.scss
    tables.scss
    > components
    navigation.scss
    sidebar.scss
    list.scss
    card.scss

    View full-size slide

  23. > global
    reset.scss
    grid.scss
    colors.scss
    typography.scss
    > elements
    buttons.scss
    inputs.scss
    tables.scss
    > components
    navigation.scss
    sidebar.scss
    list.scss
    card.scss
    > pages
    compose.scss
    chat.scss

    View full-size slide

  24. Build tools
    Gulp + SASS

    View full-size slide

  25. Coding guidelines
    Consistency of code
    Easier to read & understand
    Predictable behavior
    Airbnb’s coding guidelines
    Github’s coding guidelines

    View full-size slide

  26. Coding guidelines
    Lint your code
    sass-lint
    gulp-sass-lint
    .selector {
    property: value;
    }
    div {
    width: 100px;
    padding:0 10px;
    }
    1: warning at line 3, col 2
    Using width with padding can sometimes
    make elements larger than you expect.

    View full-size slide

  27. Comments
    Useful comments say why (not what)

    View full-size slide

  28. Create your own micro framework
    1. Create a micro framework for CSS
    a. Production version - minified CSS
    b. Development version (SCSS) - customizable variables and build CSS
    2. Use it to make this page
    3. Follow a popular coding standard (github/airbnb/etc)

    View full-size slide

  29. Post reading list
    1. Advanced CSS concepts
    2. Importance of a styleguide
    3. Let's write beautiful CSS comments
    4. Extensive SASS Guide
    5. Object Oriented CSS with SASS
    6. Gulp + SASS
    7. How other companies are writing their CSS:
    Medium's article on their CSS
    Github's article on their CSS
    Eventmobi's on their CSS
    Lonely planet's article on their CSS
    8. CSS selector performance

    View full-size slide

  30. That’s all folks
    [email protected]
    @siddharthkp

    View full-size slide

  31. Pre reading list ?
    1. CSS Basics: Reference for the most used properties
    Time required: 30 mins
    2. Kicking Ass + Taking Names with Sass: Nathan Henderson's video about SASS
    Time required: 20 mins
    3. Developer tools - Updating styles: Quick basic tutorial of styles in developer tools (only #1.2)
    Time required: 5 mins
    4. Getting started with gulp: Zell Liew's Gulp 101
    Time required: 30 mins

    View full-size slide