I’ve never been a fan of styling or Cascading Style Sheets (CSS). I feel much more at home worrying about logical problems. Keeping track of dozens of elements on a screen doesn’t fit super well with my way of thinking. Unfortunately, almost every project will have a frontend component. As a jack-of-all-trades, that means sometimes accepting that I need to work with CSS. Here are a few things I’ve learned that make it a little bit more bearable.
Make everything visible.
A major part of struggling with CSS is not being able to visualize how all of the elements work together. It can be difficult to imagine what things should look like while going back and forth between changing the CSS and refreshing the page. Making everything as visible as possible can make it easier to figure out what’s going on.
Do that by throwing thick, variously colored borders on all elements while working on them. Take heavy advantage of your browser’s inspector to see exactly where the element is sitting, along with its margins and padding. Keep elements that are supposed to be invisible visible until you have them exactly where you want them.
Work from the top down, not from the middle.
While this may be a no-brainer for a CSS whiz, it was a mistake I constantly caught myself making. It’s easy when working on a large layout to jump into building smaller components, then trying to put them all together where you want them. This results in me needing to juggle the placements of multiple elements. I can quickly get overwhelmed trying to keep track of what’s doing what to what.
Instead, work from the top-level element needed for what you’re working on. Make sure that it’s where you need it, and then, piece by piece, begin adding child elements to it. This makes the number of things you need to track a minimum.
Use caution when working with libraries.
Libraries can be invaluable when building complex interfaces, but reaching for them in situations where they’re not necessary can cause headaches. If you don’t keep careful track of a library’s functionality, you can find yourself getting lost in all of the “magic” a library is doing. Many components and layouts provided by libraries can make padding, margin, and other layout changes to elements that you might not expect.
If it isn’t required, it can be easier to stick with base elements that have your own styling. This will keep you more aware and in control of how all of the elements are fitting together.
Practice makes perfect with CSS.
As with everything, although it bears repeating, practice makes perfect when working with CSS. Even if it’s not your favorite aspect of development, pushing yourself to work with it more will make it more doable over time. Figuring out all of the strange quirks and tools CSS offers doesn’t come quickly. But, the more of it you understand, the quicker you’ll be able to work through CSS problems in the future. And the quicker you can work with CSS, the less time you need to spend with it in the future.