Jay Freestone

The perils of functional CSS

https://www.browserlondon.com/blog/2019/06/10/functional-css-perils/

Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable and explicitly named utility classes to construct components.

[…]

Functional CSS can be seen as a rebellion against the age-old best practice of the ‘semantic’ class name – such as ‘news-item’ or ‘greeting’ – long espoused by sites such as the famous CSS Zen Garden and notable developers such as Jeffery Zeldman.

There are a few advantages to atomic (or functional) CSS, like performance thanks to a very lighter CSS code, but there are also a lot of drawbacks clearly shown here by Jay.

• older link:
  Send Outgoing Webmentions
• newer link:
  Every Layout: Relearn CSS layout

---

Related contents with similar topics

1. 

   Paul Hebert

   Watch Out for Layout Shifts with ‘ch’ Units

   • Nicolas Hoizey
   • 31 May 2023
   • WebPerf, Core Web Vitals, CLS, CSS
   • 5 reactions

   In our case, we were using ch units to define our page layout. This meant that our post content was equal to 50ch units (or the width of fifty…

2. 

   Eric Bailey

   display: contents considered harmful

   • Nicolas Hoizey
   • 25 May 2023
   • CSS, accessibility
   • 8 reactions

   At this point, I don’t think we as an industry can use display: contents with confidence. Past actions are a good indicator of future behavior,…

3. • Nicolas Hoizey
   • 24 May 2023
   • CSS, image, responsive, WebPerf
   • 2 reactions
   • permalink

   Do you know good tutorials and/or examples about dealing with responsive images that are fluid horizontaly, but with a fixed height?

   Using object-fit: cover; in the CSS is easy, but how can we prevent loading many pixels that will be hidden, without using too many <source> in a <picture>?

4. HTML and CSS based View Transitions are coming

   • Nicolas Hoizey
   • 19 May 2023
   • CSS, View Transitions
   • 50 reactions

   While same-document View Transitions have now been available for a while in Chromium browsers for Single Page Applications (SPA), they were requiring the use of a JavaScript API. Chrome Canary now allows us to develop and test View Transitions with HTML and CSS only, obviously targeting Multiple Pages Applications (aka Web sites 🤷‍♂️).

5. 

   Chris Coyier

   Early Days Examples of View Transitions

   • Nicolas Hoizey
   • 19 May 2023
   • CSS, View Transitions
   • 3 reactions

   All of these are page transitions, like when you leave one page and go to another. As opposed to the document.startViewTransition kind, which are…