{"id":262218,"date":"2017-11-09T07:25:57","date_gmt":"2017-11-09T14:25:57","guid":{"rendered":"http:\/\/css-tricks.com\/?p=262218"},"modified":"2017-11-09T18:01:32","modified_gmt":"2017-11-10T01:01:32","slug":"css-code-smells","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/css-code-smells\/","title":{"rendered":"CSS Code Smells"},"content":{"rendered":"
Every week(ish) we publish the newsletter<\/a> which contains the best links, tips, and tricks about web design and development. At the end, we typically write about something we’ve learned in the week. That might not be directly related to CSS or front-end development at all, but they’re a lot of fun to share. Here’s an example of one those segments from the newsletter where I ramble on about code quality and dive into what I think should be considered a code smell<\/em> when it comes to the CSS language.<\/p>\n <\/p>\n A lot of developers complain about CSS. The cascade! The weird property names! Vertical alignment! There are many strange things about the language, especially if you’re more familiar with a programming language like JavaScript or Ruby.<\/p>\n However, I think the real problem with the CSS language is that it’s simple but not easy<\/a>. What I mean by that is that it doesn’t take much time to learn how to write CSS but it takes extraordinary effort to write “good” CSS. Within a week or two, you can probably memorize all the properties and values and make really beautiful designs in the browser without any plugins or dependencies and wow all you’re friends. But that’s not what I mean by “good CSS.”<\/p>\n In an effort to define what that is I’ve been thinking a lot lately about how we can identify what bad CSS is first. In other areas of programming, developers tend to talk of code smells when they describe bad code; hints in a program that identify that, hey, maybe this thing you’ve written isn’t a good idea. It could be something simple like a naming convention or a particularly fragile bit of code.<\/p>\n In a similar vein, below is my own list of code smells<\/a> that I think will help us identify bad design and CSS. Note that these points are related to my experience in building large scale design systems in complex apps, so please take this all with a grain of salt.<\/p>\n A large team will likely already have a collection of tools and systems in place to create things like buttons or styles to move elements around in a layout so the simple fact that you’re about to write CSS is probably a bad idea. If you’re just about to write custom CSS for a specific edge case then stop! You probably need to do one of the following:<\/p>\n I think this approach was perfectly described here:<\/p>\n About the false velocity of \u201cquick fixes\u201d. pic.twitter.com\/91jauLyEJ3<\/a><\/p>\n — Pete Lacey (@chopeh) November 2, 2017<\/a><\/p><\/blockquote>\n Let’s say you need to make a support page for your app. First thing you probably do is make a CSS file called `support.scss` and start writing code like this:<\/p>\n So the problem here isn’t necessarily the styles themselves but the concept of a ‘support page’ in the first place. When we write CSS we need to think in much larger abstractions \u2014\u00a0we need to think in templates or components instead of the specific content the user needs to see on a page. That way we can reuse something like a “card” over and over again on every page, including that one instance we need for the support page:<\/p>\n This is already a little better! (My next question would be what is a card, what content can a card have inside it, when is it not okay to use a card, etc etc. \u2013 these questions will likely challenge the design and keep you focused.)<\/p>\n In my experience, styling a HTML element (like a section or a paragraph tag) almost always means that we’re writing a hack. There’s only one appropriate time to style a HTML element directly like this:<\/p>\n
\nCode smell #1: The fact you’re writing CSS in the first place<\/h3>\n
\n
\n
Code smell #2: File Names and Naming Conventions<\/h3>\n
.support {\r\n background-color: #efefef;\r\n max-width: 600px;\r\n border: 2px solid #bbb;\r\n}<\/code><\/pre>\n
.card {\r\n background-color: #efefef;\r\n max-width: 600px;\r\n border: 2px solid #bbb;\r\n}<\/code><\/pre>\n
Code smell #3: Styling HTML elements<\/h3>\n
section { display: block; }\r\nfigure { margin-bottom: 20px; }<\/code><\/pre>\n