{"id":278477,"date":"2018-11-07T11:35:37","date_gmt":"2018-11-07T18:35:37","guid":{"rendered":"http:\/\/css-tricks.com\/?p=278477"},"modified":"2018-11-07T11:35:37","modified_gmt":"2018-11-07T18:35:37","slug":"simplify-styling-with-functional-css","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/simplify-styling-with-functional-css\/","title":{"rendered":"Simplify Styling with Functional CSS"},"content":{"rendered":"

There is no doubt that “functional CSS” resonates strongly with some people. If that term is new to you, I belive it’s come to mean the same thing as “Atomic CSS” as defined by John Polacek here<\/a>. Harry Nicholls likens it to a function that can only produce one result (although I’d call that a pure function or pure component), but instead of a return value being entirely predictable based on inputs, it is an application of style that only does one thing.<\/p>\n

I’m of two minds here. People say how fast they can work this way. Great! They like how predictable the applied styles are. Great! I can understand how a tiny stylesheet that doesn’t grow over time is appealing as well.<\/p>\n

At the same time, I haven’t seen writing about other styling concerns. What happens with big redesigns? Is it about the same, time- and difficulty-wise, or do you spend more time tearing down all those classes? What happens when you need a style that isn’t available? Write your own? Or does that ruin the spirit of all this and put you in dangerous territory? How intense can all the class names get? I can think of areas I’ve styled that have three or more media queries that dramatically re-style an element. Putting all that information in HTML seems like it could get awfully messy. Is consistency harder or easier? I get that “p5” might be a useful way to apply an abstract amount of padding, but you still need to sprinkle it all over your codebase and know when to use it, right?<\/p>\n

The closest I’ve been to being convinced about it was hearing from Adam<\/a> just how configurable Tailwind is. In any case, I find this all endless fascinating and, if you love it, more power to ya. <\/p>\n","protected":false},"excerpt":{"rendered":"

There is no doubt that “functional CSS” resonates strongly with some people. If that term is new to you, I belive it’s come to mean the same thing as “Atomic CSS” as defined by John Polacek here. Harry Nicholls likens it to a function that can only produce one result (although I’d call that a […]<\/p>\n","protected":false},"author":3,"featured_media":278503,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Just how functional is _too_ functional with Functional CSS?","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[804,1380],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":253483,"url":"https:\/\/css-tricks.com\/lets-define-exactly-atomic-css\/","url_meta":{"origin":278477,"position":0},"title":"Let\u2019s Define Exactly What Atomic CSS is","date":"April 10, 2017","format":false,"excerpt":"As Atomic CSS (also known as Functional CSS) has been gaining in popularity, some confusion has occurred about similar related terms. The goal of this article is to clarify this terminology. There are other projects that use the term Atomic, including Atomic Web Design by Brad Frost. Atomic CSS is\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/atomic-css-pieces.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":353318,"url":"https:\/\/css-tricks.com\/the-css-in-react-landscape\/","url_meta":{"origin":278477,"position":1},"title":"The CSS-in-React Landscape","date":"October 21, 2021","format":false,"excerpt":"I only half-jokingly refer to the CSS-in-JS world as CSS-in-React. Many of the libraries listed below theoretically work in non-React situations \u2014 they generally call that \"framework-agnostic\") \u2014 but I'd guess the vast majority of their usage is on React projects. That's because React, despite being a UI-focused library, has\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/05\/css-in-js.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":362578,"url":"https:\/\/css-tricks.com\/thierry-koblentz-atomic-css\/","url_meta":{"origin":278477,"position":2},"title":"The Making of Atomic CSS: An Interview With Thierry Koblentz","date":"February 3, 2022","format":false,"excerpt":"I interviewed Thierry Koblentz, creator of Atomic CSS, to understand the history and background that led to making of the popular CSS framework. Thierry, now retired, has vast experience writing CSS at large scale and has previously worked as a front-end engineer at Yahoo!. Thierry is widely credited with bringing\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/atomic-css-pieces.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":331314,"url":"https:\/\/css-tricks.com\/retrospective-on-fela\/","url_meta":{"origin":278477,"position":3},"title":"Retrospective on Fela","date":"December 21, 2020","format":false,"excerpt":"I really appreciate a real-world walkthrough of a technology. Not only in what that technology does, but why it was chosen and how it worked for a team. Anybody can read the docs, but what you know after years of real-world usage is far more valuable. Kitty Giraudel: I want\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-21-at-7.42.46-AM.png?fit=1200%2C608&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":262610,"url":"https:\/\/css-tricks.com\/growing-popularity-atomic-css\/","url_meta":{"origin":278477,"position":4},"title":"On the Growing Popularity of Atomic CSS","date":"November 24, 2017","format":false,"excerpt":"Even if you consider yourself a CSS expert, chances are that at some point on a large project you've had to deal with a convoluted, labyrinthine stylesheet that never stops growing. Some stylesheets can feel like a messy entangled web of inheritance. Spaghetti Monster The cascade is incredibly powerful. Small\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":313139,"url":"https:\/\/css-tricks.com\/responsive-styling-using-attribute-selectors\/","url_meta":{"origin":278477,"position":5},"title":"Responsive Styling Using Attribute Selectors","date":"June 30, 2020","format":false,"excerpt":"One of the challenges we face when implementing class-based atomic styling is that it often depends on a specific breakpoint for context. We can prefix each breakpoint. This works well until we start adding multiple classes. That\u2019s when it becomes difficult to keep a track what relates to what and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/06\/atomic-css-attributes-1.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278477"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=278477"}],"version-history":[{"count":3,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278477\/revisions"}],"predecessor-version":[{"id":278502,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278477\/revisions\/278502"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278503"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=278477"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=278477"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=278477"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}