Using CSS Classes

Styling is an underappreciated step in building an application. You can build out the most impressive functionality, but if the aesthetic (or lack thereof) prevents users from being able to access it, it loses its appeal. I started with some basic CSS styling for my current movie search app and have been building upon it ever since. While I’ve used CSS for years, this project has made me think about the fundamentals and how best to use them.

For example, classes are your friend. This is something that has really clicked for me during this project. In everyday life, I am someone who lives for organization. I like things labeled and clearly in their logical place. This is very similar to classes. By naming each class, I’m able to have so much more control over the styling. For example, I have a MovieCard component that displays each search result with information. However, I am currently playing around with building a ReviewCard component that would display reviews for each movie in its own card. So while my MovieCard component has a div called card, my ReviewCard component has one called review-card. Stylistically, these components will be very similar. But not exactly the same:

As I continue to style my new ReviewCard component, I plan to tweak the styling even more and the difference between the two will grow. By labeling these more specifically than just having one card component for any sort of card, I am able to organize my code better and have better control over the details of my styling.