Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap 4 Basics (Retired) Responsive Layouts with the Bootstrap Grid Styling Content

WOUTER COX
WOUTER COX
872 Points
Posted by WOUTER COX
WOUTER COX
872 Points

Maintaining all those classes

I understand how you can easily add classes and get a functioning site up and running in no time.

One thing that worries me, is maintaining it. As the code grows and there are going to be more and more pages, will you keep track of all the classes.

For example if you want to adjust margin and padding later, I imagine it can be a lot of work searching for the right classes and adjusting them.

Does Sass help in any way with this? Or are there other tools or best practices to keep in mind?

1 Answer

Annet de Boer
Annet de Boer
900 Points
Annet de Boer
Annet de Boer
900 Points

It's true what you say, in a big website it can be quite challenging to keep things tidy (not only for yourself but also for colleagues working on the same site). One best practice is to keep things categorised, like Sass also asks you to do.

But: "it can be a lot of work searching for the right classes and adjusting them." this is actually not so hard. Open your page in the browser and make use of Developers tools (Chrome) or Firebug (Firefox extension) and point to an element using the identifier tool. You can easily see which classes apply to that element and where (which css file) you can find them. You can even adjust them on the fly to see how the changes would look like and what would be the consequences for other elements. Once you know the name of the class you can ctrl+f find it in the css stylesheet (even the name of the stylesheet is mentioned in these tools).

Explanation on how to do that, here (firefox): http://www.w3resource.com/web-development-tools/inspect-and-edit-HTML-and-CSS-with-Firebug.php or here (chrome): https://developers.google.com/web/tools/chrome-devtools/inspect-styles/edit-dom

I'm a big fan of Firebug and use it a lot.