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

WTM19 - CSS for People That Hate CSS by Robin Dykema

WTM19 - CSS for People That Hate CSS by Robin Dykema

What’s the difference between Flexbox and CSS grid? How can I create animations? Should I use a preprocessor? Why is it so hard to center a ?! Can’t I just use Bootstrap or Materials UI instead? Learn the basics of CSS, along with strategies and resources for writing better CSS.

https://youtu.be/C7enQQruv-Y

Women Techmakers Montreal

March 23, 2019
Tweet

More Decks by Women Techmakers Montreal

Other Decks in Technology

Transcript

  1. Hello! I’m Robin Dykema. I’m a UI engineer at Taulia

    in Austin, TX. I’ve been using CSS since the days of my Geocities Backstreet Boys fan page.
  2. What is CSS? CSS stands for Cascading Style Sheets. It

    is a style sheet language used for describing the presentation of a document written in a markup language like HTML.
  3. What we will cover in this talk ‐ Keeping a

    healthy mindset about CSS ‐ Basic CSS ‐ Intermediate CSS ‐ Resources
  4. Growth Mindset “I can separate my design skills from my

    CSS skills. If I’m given a mockup, I can learn how to turn that design into code.” Fixed mindset vs Growth mindset Fixed Mindset “I’m not good at design, so I’ll never be good at CSS.”
  5. Basic CSS concepts to master Display/Position Inline, block, inline-block Absolute,

    static, relative, fixed Selectors Type selectors, class selectors, id selectors, !important Specificity Cascading (C of CSS), CSS Box Model Content, padding, border, margin Box-sizing: border-box; Responsiveness Media queries, layouts Dev Tools Debugging / developing
  6. Basic CSS: Position static, relative, absolute, fixed .parent { display:

    static; } .child { display: absolute; bottom: 0; }
  7. Basic CSS: Position static, relative, absolute, fixed .parent { display:

    relative } .child { display: absolute; bottom: 0; }
  8. Basic CSS: Position static, relative, absolute, fixed .parent { display:

    relative } .child { display: fixed; bottom: 0; }
  9. Basic CSS: Selectors #happy-cake { /* CSS properties goes here

    */ } <!-- WILL match --> <div id="happy-cake"></div> <!-- Will NOT match --> <div id="sad-cake">Wrong ID!</div> <!-- Will NOT match --> <div class="happy-cake">That's not an ID!</div>
  10. Basic CSS: Selectors .module { /* CSS properties goes here

    */ } <!-- WILL match --> <div class="module"></div> <!-- Will NOT match --> <div class=".module">The dot is for CSS, not HTML</div> <!-- Will NOT match --> <div class="bigmodule">Wrong class</div>
  11. Basic CSS: Selectors h2 { /* CSS properties goes here

    */ } <!-- WILL match --> <h2>Hi, Mom</h2> <div> <!-- WILL match --> <h2>Anywhere</h2> </div> <!-- Will NOT match --> <div class="h2">Wrong tag, can't trick it</div>
  12. Basic CSS: Pseudo selectors Pseudo class :active, :hover, :focus, :visited

    :checked, :disabled :nth-child, :first-child, :last-child, :only-child Pseudo element ::before, ::after
  13. Basic CSS: Specificity Specificity is a weight that is applied

    to a given CSS declaration, determined by the number of each selector type in the matching selector.
  14. Don’t overwrite broken code; fix it! div.main > div >

    div#top + div#main ul li.selected > a[href*=”link”] + span.large { … }
  15. Don’t overwrite broken code; fix it! div.main > div >

    div#top + div#main ul li.selected > a[href*=”link”] + span.large { … }
  16. Basic CSS: Responsiveness /* Mobile Styles */ @media only screen

    and (max-width: 400px) { body { background-color: #F09A9D; /* Red */ } } /* Tablet Styles */ @media only screen and (min-width: 401px) and (max-width: 960px) { body { background-color: #F5CF8E; /* Yellow */ } } /* Desktop Styles */ @media only screen and (min-width: 961px) { body { background-color: #B2D6FF; /* Blue */ } } Source: https://internetingishard.com/html-and-css/responsive-design/
  17. Basic CSS: Get to know dev tools Mac: cmd +

    control + i Windows: F12 Or: right click, “inspect”
  18. Intermediate CSS skills to master Cross Browser Compatibility Vendor prefixes,

    Page Layout Tools Flexbox, CSS grid Semantic HTML Stepping away from the <div> No Frameworks Removing reliance on Bootstrap, Materials UI, etc CSS Preprocessors Sass, Less, Stylus Naming Methodologies BEM, SMACSS, OOCSS
  19. INTERMEDIATE CSS: CROSS BROWSER COMPATIBILITY Talk to your team about

    browsers you support Vendor prefixes ‐ -webkit-, -ms-, -moz- ‐ Add autoprefixer to your build process Can download a VM to test IE/Edge (see resources)
  20. INTERMEDIATE CSS: PAGE LAYOUT TOOLS CSS Grid 2 dimensional (rows

    and columns) Best when starting from scratch Flexbox 1 dimensional (a row or a column) Best when adding a component to an existing layout
  21. INTERMEDIATE CSS: PAGE LAYOUT TOOLS (Flexbox) div { display: flex;

    align-items: center; justify-content: center; } http://howtocenterincss.com/
  22. Intermediate CSS: Semantic HTML Fewer <div>s and <span>s Prevents collision

    Source: https://internetingishard.com/html-and-css/semantic-html/
  23. Intermediate CSS: Stepping away from frameworks Many CSS frameworks out

    there: Bootstrap, Semantic UI, Material-UI Why you might use them: Quick side projects Beginners who don’t have the time to learn CSS
  24. Intermediate CSS: Stepping away from frameworks Why you might not

    use them: Many times end up writing new rules on top of the library’s rules Looks like every other app using that library Nothing magical under the covers - just CSS TIP: Pick and choose UI elements you find aesthetically pleasing from those libraries and reproduce them with your own code
  25. Intermediate CSS: Preprocessors Sass, Less, Stylus Make it easier to

    write and organize CSS Nesting, variables, reusable mixins/functions, imports, extends, loops
  26. Intermediate CSS: Naming methodologies BEM, SMACSS, OOCSS Provides a modular

    structure Reduce naming conflicts Source: https://medium.com/@dannyhuang_75970/what-is-bem-and-why-you-should-use-it-in-your-project-ab37c6d10b79
  27. Credits Special thanks to all the people who made and

    released these awesome resources for free: ‐ Presentation template by SlidesCarnival