CSS for Developers

Wait, what!?! **CSS for Developers**? Aren't developers supposed to know **CSS**? Yes, the title of this blog post and associated talk may seem odd at first, but I feel it reaches out to several audiences that need it... and one of those used to be **me**.

The more that I meet and build relationships with other Front-End Developers I'm starting to see a trend of really talented software developers moving towards Front-End development and trying as hard as they can to stay away from CSS.

Have you ever or do you currently think this...

"CSS is a necessary evil that is bloated, confusing, brittle, and hard to maintain." --Back-End Brian (see personas below)

Novice Notion

For a minute, think about a Back-End developer that is transitioning to Front-End work...

JavaScript typically isn't too hard for them to grasp once they get past the dynamic and functional nature of the language.

HTML is easy enough for them to learn and typically they don't run into issues with markup as they build websites or webapps.

CSS seemed simple enough when going through a quick tutorial, but once they started trying to style something according to design it quickly become frustrating and overwhelming.

Personas

It's a challenge to make a talk that provides values for a diverse experienced audience. So, I decided to try something new. I created 3 main personas (based on Random User Generator) and referenced them throughout the talk as the material progresses.

Junior Jacob: Jacob is a junior developer who is getting started with Front-End Development and trying to get his head around it. Image that he just finished watching a PluralSight or Treehouse course on web development.

Back-End Brian: Brian is a back-end developer who understands software development really well, but CSS makes no sense to him and he tends to gravitate to Twitter Bootstrap instead of learning how CSS works.

Mid-Level Melissa: Melissa is a mid-level web developer who is proficient at CSS, but hasn't really kept her skills up-to-date. She can build most any site she is asked, but the CSS isn't organized very well or maintainable.

Tips, Techniques, and Tools

Thankfully with a some basic foundational concepts, modern techniques, and tooling we can raise the bar of our CSS understanding, organization, and maintainability.

Box Model
Specificity
Position
Cascading
Sizing

Alignment
Sass & Sass Docs
Atomic Design
BEM
Linting

Slides

You can find the slides from the presentation online at elijahmanor.com/talks/css-for-devs/

Note: This slide deck is fairly new. I have plans to iterate on some of the later modules in the talk. Stay tuned :)

Podcast

I was intervied on the .NET Rocks podcast last week by Carl Franklin and Richard Campbell. The episode is now online #1147: CSS for Developers with Elijah Manor.

Web Mentions

Tweet about this post and have it show up here!