{"id":278719,"date":"2018-11-19T07:48:46","date_gmt":"2018-11-19T14:48:46","guid":{"rendered":"http:\/\/css-tricks.com\/?p=278719"},"modified":"2018-11-19T07:49:18","modified_gmt":"2018-11-19T14:49:18","slug":"why-cant-we-use-functional-css-and-regular-css-at-the-same-time","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/why-cant-we-use-functional-css-and-regular-css-at-the-same-time\/","title":{"rendered":"Why can\u2019t we use Functional CSS and regular CSS at the same time?"},"content":{"rendered":"

Harry Nicholls recently wrote all about simplifying styles with functional CSS<\/a> and you should definitely check it out. In short, functional CSS is another name for atomic CSS<\/a> or using \u201chelper\u201d or \u201cutility\u201d classes<\/a> that would just handle padding<\/code> or margin<\/code>, background-color<\/code> or color<\/code>, for example.<\/p>\n

<\/p>\n

Harry completely adores the use of adding multiple classes like this to an element:<\/p>\n

\n

So what I’m trying to advocate here is taking advantage of the work that others have done in building functional CSS libraries. They’re built on solid foundations in design, people have spent many hours thinking about how these libraries should be built, and what the most useful classes will be.<\/p>\n

And it’s not just the classes that are useful, but the fundamental design principles behind Tachyons.<\/p>\n<\/blockquote>\n

This makes a ton of sense to me. However, Chris notes<\/a> that he hasn\u2019t heard much about the downsides of a functional\/atomic CSS approach:<\/p>\n

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? <\/p><\/blockquote>\n

This also makes a ton of sense to me, but here\u2019s the thing: I\u2019m a big fan of both methods and even combine them in the same projects.<\/p>\n

Before you get mad, hear me out<\/h3>\n

At Gusto, the company I work for today, I\u2019ve been trying to design a system that uses both methods because I honestly believe that they can live in harmony with one another. Each solve very different use cases for writing CSS.<\/p>\n

Here\u2019s an example: let\u2019s imagine we\u2019re working in a big ol\u2019 React web app and our designer has handed off a page design where a paragraph and a button need more spacing beneath them. Our code looks like this:<\/p>\n

<p>Item 1 description goes here<\/p>\r\n<Button>Checkout item<\/Button><\/code><\/pre>\n
This is just the sort of problem for functional CSS to tackle. At Gusto, we would do something like this:<\/p>\n
<div class=\"margin-bottom-20px\">\r\n  <p>Item 1 description goes here<\/p>\r\n  <button>Checkout item<\/button>\r\n<\/div><\/code><\/pre>\n
In other words, we use functional classes to make layout adjustments that might be specific to a particular feature that we\u2019re working on. However! That Button<\/code> component is made up of a regular ol\u2019 CSS file. In btn.scss<\/code>, we have code like this which is then imported into our btn.jsx<\/code> component:<\/p>\n
.btn {\r\n  padding: 10px 15px;\r\n  margin: 0 15px 10px;\r\n  \/\/ rest of the styles go here\r\n}<\/code><\/pre>\n
I think making brand new CSS files for custom components is way<\/em> easier than trying to make these components out of a ton of classes like margin-*<\/code>, padding-*<\/code>, etc. Although, we could be using functional styles in our btn.jsx<\/code> component instead like this:<\/p>\n
const Button = ({ onClick, className, children }) => {\r\n  return (\r\n    <button\r\n      className='padding-top-10px padding-bottom-10px padding-left-15px padding-right-15px margin-bottom-none margin-right-15px margin-left-15px margin-bottom-10px ${className}')}\r\n      onClick={onClick}\r\n    >\r\n      {children}\r\n    <\/button>\r\n  );\r\n};<\/code><\/pre>\n
This isn\u2019t a realistic example because we’re only dealing with two properties and we\u2019d probably want to be styling this button\u2019s background color, text color, hover states, etc. And, yes, I know these class names are a little convoluted but I think my point still stands even if you combine vertical and horizontal classes together.<\/p>\n
So I reckon<\/a> that we solve the following three issues with functional CSS by writing our custom styles in a separate CSS file for this particular instance:<\/p>\n
    \n
  1. Readability<\/li>\n
  2. Managing property dependencies<\/li>\n
  3. Avoiding the painful fact that visual design doesn\u2019t like math<\/li>\n<\/ol>\n
    As you can see in the earlier code example, it\u2019s pretty difficult to read and immediately see which classes have been applied to the button. More classes means more difficulty to scan.<\/p>\n
    Secondly, a lot of CSS property\/value pairs are written in relation to one another. Say, for example, position: relative<\/code> and position: absolute<\/code>. In our stylesheets, I want to be able to see these dependencies and I believe it\u2019s harder to do that with functional CSS. CSS often depends on other bits of CSS and it\u2019s important to see those connections with comments or groupings of properties\/values.<\/p>\n
    And, finally, visual design is an issue. A lot of visual design requires imperfect numbers that don\u2019t properly scale. With a functional CSS system, you\u2019ll probably want a system of base 10, or base 8, where each value is based on that scale. But when you\u2019re aligning items together visually, you may need to do so in a way that it won\u2019t align to those values. This is called optical adjustment<\/a> and it\u2019s because our brains are, well, super weird. What makes sense mathematically often doesn\u2019t visually. So, in this case, we’d need to add more bottom padding to the button to make the text feel like it\u2019s positioned in the center. With a functional CSS approach it\u2019s harder to do stuff like that neatly, at least in my experience.<\/p>\n
    In those cases where you need to balance readability, dependencies, and optical adjustments, writing regular CSS in a regular old-fashioned stylesheet is still my favorite thing in the world. But functional CSS still solves a ton of other problems very eloquently.<\/p>\n
    For example, what we\u2019re trying to prevent with functional classes at Gusto is creating tons of stylesheets that do a ton of very specific or custom stuff. Going back to that earlier example with the margin beneath those two elements for a second:<\/p>\n
    <div className='margin-bottom-20px'>\r\n  <p>Item 1 description goes here<\/p>\r\n  <Button>Checkout item<\/Button>\r\n<\/div><\/code><\/pre>\n
    In the past our teams might have written something like this instead:<\/p>\n
    <div className='cool-feature-description-wrapper'>\r\n  <p>Item 1 description goes here<\/p>\r\n  <button>Checkout item<\/button>\r\n<\/div><\/code><\/pre>\n
    A new CSS file called cool_feature_description_wrapper.scss<\/code> would need to be created in our application like so:<\/p>\n
    .cool-feature-description-wrapper {\r\n  margin-bottom: 20px;\r\n}<\/code><\/pre>\n
    I would argue that styles like this make our code harder to understand, harder to read, and encourages diversions from our library of components. By replacing this with a class from our library of functional classes, it\u2019s suddenly much easier to read, and to change in the future. It also solves a custom solution for our particular needs without forking our library of styles.<\/p>\n
    So, I haven\u2019t read much about balancing both approaches this way, although I assume someone has covered this in depth already. I truly believe that a combination of these two methods is much more useful than trying to solve all problems with a single bag of tricks.<\/p>\n
    I know, right? Nuanced opinions are the worst.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Harry Nicholls recently wrote all about simplifying styles with functional CSS and you should definitely check it out. In short, functional CSS is another name for atomic CSS or using \u201chelper\u201d or \u201cutility\u201d classes that would just handle padding or margin, background-color or color, for example.<\/p>\n","protected":false},"author":223806,"featured_media":278819,"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":"Why can\u2019t we use Functional CSS and regular CSS at the same time?","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1530],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css-handshake.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":340705,"url":"https:\/\/css-tricks.com\/a-thorough-analysis-of-css-in-js\/","url_meta":{"origin":278719,"position":0},"title":"A Thorough Analysis of CSS-in-JS","date":"May 26, 2021","format":false,"excerpt":"Wondering what\u2019s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution. Why? Because there are more than 50 libraries out there, each of them offering a unique set of features. We tested 10 different libraries, which are listed here in no particular order: Styled\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/kwyuFPAdFlkMaYo7vYFufdUG3WP4mp7_bbAsQnU7sVCnGH31dDmSgYp5KHqX4tQQR60KfzWV890kBXDPC68H4rLuYvMeVEhItg_oBFt59mCJmsN8giiB6HogBD9F7h6p2aMbs7Q.png?fit=1200%2C674&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":355016,"url":"https:\/\/css-tricks.com\/gui-challenges\/","url_meta":{"origin":278719,"position":1},"title":"GUI Challenges","date":"November 2, 2021","format":false,"excerpt":"I keep bookmarking Adam's GUI Challenges posts\/videos and, before I even have a chance to review and link them up, another one is already published! Fortunately, the homepage for them on web.dev is a nice roundup. For example, a recent one is the split-button component (article \/ video \/ demo).\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/gui-challenges-video-character.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":355894,"url":"https:\/\/css-tricks.com\/defining-and-applying-ui-themes-using-the-mimcss-css-in-js-library\/","url_meta":{"origin":278719,"position":2},"title":"Defining and Applying UI Themes Using the Mimcss CSS-in-JS Library","date":"November 15, 2021","format":false,"excerpt":"Theming UI refers to the ability to perform a change in visual styles in a consistent manner that defines the \u201clook and feel\u201d of a site. Swapping color palettes, \u00e0 la dark mode or some other means, is a good example. From the user\u2019s perspective, theming involves changing visual styles,\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":353318,"url":"https:\/\/css-tricks.com\/the-css-in-react-landscape\/","url_meta":{"origin":278719,"position":3},"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":357227,"url":"https:\/\/css-tricks.com\/coding-font-game\/","url_meta":{"origin":278719,"position":4},"title":"Coding Font Game","date":"November 19, 2021","format":false,"excerpt":"A tournament bracket UI where you pick your favorite between two coding fonts and your choices are whittled down all the way to a final winner. A clever way to suss out your own taste and arrive at a choice. (P.S. We have our own little coding fonts website to\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/Screen-Shot-2021-11-18-at-7.08.33-AM.png?fit=1200%2C875&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":330285,"url":"https:\/\/css-tricks.com\/not-much\/","url_meta":{"origin":278719,"position":5},"title":"Not Much","date":"December 14, 2020","format":false,"excerpt":"What\u2019s one thing I learned about building websites this year? Not all that much. This year, unlike most previous years, I didn\u2019t explore a lot of new technologies. For obvious reasons, it\u2019s been a difficult year to be as engaged in the hot new topics and to spend time playing\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/Screen-Shot-2020-12-14-at-12.36.04-PM.png?fit=1200%2C513&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/functional-css-handshake.jpg?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278719"}],"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\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=278719"}],"version-history":[{"count":14,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278719\/revisions"}],"predecessor-version":[{"id":279071,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/278719\/revisions\/279071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/278819"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=278719"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=278719"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=278719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}