CSS for Developers
OR
CSS for Junior Jacob, Back-End Brian, and Mid-Level Melissa
This talk is targeted to 3 main personas & I actually introduce them and reference them throughout the talk...
- A junior developer who is trying to get started with CSS and get their head around it. Most concepts apply to this persona
- A back-end developer who understands code really well, but CSS makes no sense & they typically fear it and use Twitter Bootstrap instead of learning how CSS works. Most concepts apply to this persona
- A mid-level web developer who is proficient at CSS, but haven't really kept their skills up-to-date. The first half of the talk may not apply to this persona as much, but there is plenty of concepts that apply later in the talk
The first part of the talk is aimed at getting a back-end or junior dev up to speed by introducing foundational concepts such as the Box Model, Specificity, Position, Cascading, and Sizing. Then we'll move to newer concepts such as Flexbox, Sass, BEM, Autoprefixer, and CSS modules. You'll walk away with a set of tips and techniques to help make CSS easier to organize, understand, and maintain.
If you relate to any of the following personas, you're not alone. CSS for Developers aims to bridge the gap between using CSS to authoring and understanding CSS.
Junior Jacob: Jacob is a junior developer who is new to Front-End Development and is trying to get his head around it. He just finished watching a PluralSight or Treehouse course on web development; he has learned most of the basics, but desires a deeper understanding of foundational concepts.
Back-End Brian: Brian is a back-end developer who has a strong software development background, but CSS makes no sense to him and usually tries to avoid it. When he has to use it, he gravitates towards drop-in solutions such as Twitter Bootstrap, instead of learning how CSS works.
Mid-Level Melissa: Melissa is a mid-level web developer who is proficient in using CSS, but hasn't kept her skills up-to-date. She has a solid foundation and can build most any site asked of her, but the CSS she authors isn't organized well and is not maintainable. She wants to learn newer & more advanced CSS.
The first part of the talk is aimed at getting Jacob and Brian up to speed by introducing foundational concepts such as the Box Model, Specificity, Position, Cascading, and Sizing. Along the way, some advanced concepts that Melissa may have missed will be sprinkled in.
As the talk progresses, we will cover newer concepts such as Flexbox, Sass (intro/docs/linting), Atomic Design, BEM, Autoprefixer, and the concept of including your styles in JavaScript. Each persona will walk away with a set of tips, tricks, and techniques that help make CSS easier to organize, understand, and maintain.