Today I got to try the experimental if/else syntax in CSS: /* Component.module.css */ img { transform: if(style(--isZoomed: true): scale(2) ; else: scale(1)); } I used it to pass a variable from React state to the stylesheet: // Component.tsx <img style={{'--isZoomed': isZoomed ? 'true' : 'false'}} /> I think conditional classes would be my preference for managing this for real, but this is an alternative. if() CSS Function — MDN
A goal of modular CSS is to scope styles to components. Globally styling elements like h1 is to be done sparingly. Instead, we use class syntax: /* Component.module.css */ .header { color: purple; } // Component.tsx import {styles} from './Component.module.css'; const Component = () => { return ( <section> <h1 className={styles.header}>A purple header here 💜</h1> </section> ); }; This keeps the header styles just on this element, in this component. But, we can still style elements: ...
Today I learned how to fill in an emoji with CSS. Here’s an example: .filledEmoji { color: transparent; text-shadow: '0 0 0 #86efac'; } ...
When you allow a user’s behavior to add or remove a border from an element, that can cause the page to ‘jump around’ as the border is added or removed. A common example is a border around an element that is ‘selected’. Fix this issue by adding a transparent border around the element and giving it color when it’s selected. No more jumps. .element { border: 1px solid transparent; } .selectedElement { border-color: $selected-color; }
Let’s say you have a string evaluated into a HTML template that contains newlines, like "getting\n\things\ndone" and you want those newlines to be reflected in the presentation. Like this: getting things done We can solve this with the following CSS on the string’s containing element: white-space: pre-wrap; With pre-wrap, “[s]equences of white space are preserved. Lines are broken at newline characters, at [breaks] and as necessary to fill line boxes.” white-space docs
“Select isn’t broken.” If you’re working on a CSS file, and none of your changes are being applied, check for typos, crashed servers, misplaced files, etc. Once you’ve ruled out simple mistakes, you might have a syntax error like this: .klass { opacity: 0.5; }; The trailing semicolon is incorrect, and none of the CSS below it can be understood by the browser. Change this to: .klass { opacity: 0.5; } There may be some environments where a broken CSS file fails loudly; Code Sandbox or Codepens are not among them. If you’re changing CSS and nothing is happening, start looking for syntax errors. ...