The CSS Series: Part 13 - CSS Frameworks, CSS-in-JS, Architecture, and Accessibility

#webdev #codenewbie #css #html

While this series hasn't covered every detail of CSS, I hope it leaves you with a solid foundation in CSS. But before you depart, there are some CSS topics beyond the fundamentals that you will want to be aware of. This page is simply a list of such topics with brief descriptions. If something interests you, you'll now have the resources to get started on your path of self-directed learning.

You can catch up on the rest of the series at the links below:
Part 1: An Intro to CSS
Part 2: How to Link a Stylesheet to Your index.html File
Part 3: Selectors
Part 4: Properties
Part 5: The Box Model
Part 6: CSS Units
Part 7: Flexbox
Part 8: CSS Grid
Part 9: Display Property
Part 10: Specificity
Part 11: Custom Properties
Part 12: Mobile and Responsive Design

Prerequisites

A basic understanding of CSS

CSS Documentation and Resources

There are several websites that strive to document everything about CSS. Others show how to harness the fundamentals to create exciting functionality. Below is a list of some of these resources.

Mozilla Development Network: https://developer.mozilla.org/en-US/docs/Web/CSS
Dev Docs: https://devdocs.io/css/
CSS Tricks: https://css-tricks.com/

CSS Frameworks

There are several popular CSS frameworks you can use that supply completed CSS stylesheets to you. These styles render when you add the framework's pre-defined class names into your HTML. Some popular frameworks include:

Bootstrap: https://getbootstrap.com/
Tailwind CSS: https://tailwindcss.com/
Bulma: https://bulma.io/

CSS-in-JS

There are libraries and tooling that allow developers to define all their CSS designs directly from within JavaScript. This is especially useful when developing within JS-centric frameworks and libraries like React.

If you're just learning CSS, these won't make much sense now. But as you progress into developing with something like React, you may encounter some issues that can best be solved using some of the links below.

Atomic CSS-in-JS: https://sebastienlorber.com/atomic-css-in-js…
Tailwind-in-JS: https://github.com/ben-rogerson/twin.macro…
styled-components: https://styled-components.com
theme-ui: https://theme-ui.com
styled-system: https://styled-system.com

CSS Architecture

Often times large code bases can become so large and compartmentalized, that it's hard to locate your design elements and your styling. Making changes suddenly requires more time navigating around folders than actually writing code. Due to this common problem, developers have shared some of their strategies on how to think about your CSS.

SMACSS: http://smacss.com/
Atomic CSS: https://acss.io/

There's no right way to write CSS. So if you discover something that works for you, consider sharing it with the developer community a blog post.

Web Accessibility

Web designers have a responsibility to make their websites accessible to visitors with disabilities. For example, people with poor eyesight will be able to read better if there is a lot of contrast between the background color and the font color. These are things most of us wouldn't consider naturally, so it's important to read up on accessibility.

A11y: https://www.a11yproject.com/
7 Things Designers Need To Know: https://medium.com/salesforce-ux/7-things-every-designer-needs-to-know-about-accessibility-64f105f0881b

Conclusion

Learning web design is a journey that never ends. There's always more to learn and it's not humanly possible to learn it all. Persistence will take you far. Curiosity will make the process enjoyable.