The CSS Series: Part 13 - CSS Frameworks, CSS-in-JS, Architecture, and Accessibility
Tags: webdev, codenewbie, css, html
Published: 2021-01-19 15:46:08

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](https://dev.to/vetswhocode/the-css-series-part-1-an-intro-to-css-2368)
[Part 2: How to Link a Stylesheet to Your index.html File](https://dev.to/vetswhocode/the-css-series-part-2-how-to-link-a-stylesheet-to-your-index-html-file-1d0e)
[Part 3: Selectors](https://dev.to/vetswhocode/the-css-series-part-3-selectors-49b8)
[Part 4: Properties](https://dev.to/vetswhocode/the-css-series-part-4-properties-17d7)
[Part 5: The Box Model](https://dev.to/vetswhocode/the-css-series-part-5-the-box-model-32i)
[Part 6: CSS Units](https://dev.to/vetswhocode/the-css-series-part-6-css-units-a02)
[Part 7: Flexbox](https://dev.to/vetswhocode/the-css-series-part-7-css-units-362i)
[Part 8: CSS Grid](https://dev.to/vetswhocode/the-css-series-part-8-css-grid-109m)
[Part 9: Display Property](https://dev.to/vetswhocode/the-css-series-part-9-display-property-h1h)
[Part 10: Specificity](https://dev.to/vetswhocode/the-css-series-part-10-specificity-4ge9)
[Part 11: Custom Properties](https://dev.to/vetswhocode/the-css-series-part-11-custom-properties-nkg)
[Part 12: Mobile and Responsive Design](https://dev.to/vetswhocode/the-css-series-part-12-mobile-first-and-responsive-design-598l)

## 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.