CSS materials

Last updated ago - September 30, 2023


Additional content

Tips compilations

Takeaways from CSS for JavaScript Developers:

Flex Basis / Flex Grow / Flex Shrink Flex Basis / Flex Grow / Flex Shrink Flex Shorthand Flex Shorthand

Core concepts





Common mistakes


Tailwind CSS

Dynamic variants without using third-party library (like CVA or tw.classed)

Tweet with description: "Have found this to be a pretty effective lightweight strategy for managing variants using clsx vs needing to reach for cva or tailwind variants: code snippet showing classes being applied to an element based on keys from packages."

Atomic CSS - pros, cons and will it replace BEM?

The most important highlights

Difference between a single class (BEM approach) and the atomic approach (tailwind):

The classname “tells” you what kind of component it is (e.g., whether it’s a card or a container), but it doesn’t give you implementation details (i.e., what styles it’s made up of), while Tailwind gives you the details of the implementation, but doesn’t illustrate what the component represents.

Cons of Tailwind

- Debugging in the browser because there isn't a single specific class (this can be circumvented by using the devtools of a specific framework and searching by components). Additionally, dynamically adding a new attribute is difficult (this can be circumvented using external devtools like https://tailscan.com/, https://www.inspectflow.io/, or https://devtoolsfortailwind.com/).

- Reading the classes alone doesn't provide specific information compared to regular CSS.

- It won't be suitable everywhere. For example, in a project where only HTML, CSS, and JS are used, Tailwind will be a poor solution.

- Since v3, the addition of dynamic classes has been significantly limited, e.g., bg-{color}-500 won't work anymore (this can be bypassed by loading the entire Tailwind via CDN, which significantly increases the project bundle).

- Tailwind users tend to write non-semantic HTML - this can be prevented by using a11y analysis tools.

Screen slide showing accessibility tips - BUILD PROCESS: catch errors as you build out the app (axe-core, jsx-a11y, lighthouse audits, accesslint.js). Continuous Integration: find issues in your pull requests (axe-linter or accesslint) Screen slide showing pull request and comments made by axe-linter that catched accessibility errors

An alternative approach to Tailwind towards type safety - for those who want to be sure there will be no typos and want the styles to be modular and extensible as in CSS Modules.

Drawbacks - the syntax isn’t as convenient, but it’s a matter of getting used to.

Screen slide showing Typewind and tailwind-classnames


Links you might like