Menu

Post image 1
Post image 2
1 / 2
0

Stop using hex codes in your CSS

DEV Community·Alexander·19 days ago
#aqNEavYb
#css#webdev#designsystems#design#code#system
Reading 0:00
15s threshold

It happened again last Wednesday. I was looking at a pull request for a new user settings modal. The UI was gorgeous. The React code was incredibly clean. Then I opened the stylesheet. Right there on line 42 was the culprit. .modal-background { background-color : #f3f4f6 ; border : 1px solid #e5e7eb ; font-size : 14px ; } Enter fullscreen mode Exit fullscreen mode I immediately requested changes. My feedback was just three words. Use the tokens. This might sound incredibly pedantic. You might think I'm just being a difficult reviewer. But hardcoding hex values and raw pixels in modern web development is a fundamental mistake. It's technical debt disguised as a quick fix. We need to stop doing it entirely. The copy paste trap I understand exactly why this happens. You're building a complex feature under a very tight deadline. You open the design file to check the specifications. You click on a primary button component. The right sidebar shows a raw hex value instead of a semantic token name.…

Continue reading — create a free account

Join HashtagPLUS to read full articles, follow hashtags, vote, and join the conversation.

Read More