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 CSS Flexbox Layout Flexbox Properties Changing the Order of Flex Items

Ryan Schmelter
Ryan Schmelter
9,710 Points

Why does this instructor always use class instead of id?

Just curious if there's an advantage to always using class. This instructor uses it even when it's clear the class name won't be repeated in the html.

5 Answers

In the industry, the use of ID selectors will get you into trouble very quickly. Most software companies, including the one that I work at, use a pattern library as the foundation for all applications built. One advantage of a pattern library is that one can reuse components, which means that one does not have to rebuild for example a navigation component every time he or she designs a new page in a web-based app. Remember that an ID is unique and can only be used once on a page. Classes may be used more than once. THAT is the main reason that you should almost always avoid using ID selectors. Imagine that you create a a data viewer component (a data table) but use an ID selector to style the table header. One day, one of your pages requires multiple data viewer components on a single page. You have a problem. Your header style won't work.

In modern development, apps are often iterated upon, meaning things change quickly. Your favorite apps are updated monthly, sometimes even weekly. Large teams of developers don't have time to worry about whether a component will work when they implement it in a new or updated app. Components must work without wasted time on debugging. ID selectors will often cause problems but classes never will. It's okay if a class only appears once on a page, but it is never okay if an ID appears more than once. It's not a matter of preference, it's a matter of efficiency, reusability and error reduction.

You may find that the instructor is following one of the following methodologies, to organise their css. These methodologies use the principles of Object Orientated Programming (OOP), code reuse and the DRY (Don't Repeat Yourself) principles of computer programming:

-- BEM - Block Element Modifier --

https://en.bem.info/methodology/css/

If using the BEM method to organise your CSS it recommends NOT to use ID selectors OR tag selectors.

"To implement BEM principles in a project:

    Put aside the DOM model and learn to create blocks.
    Don't use ID selectors or tag selectors.
    Minimize the number of nested selectors.
    etc etc

-- SMACCS - Scalable and Modular Architecture for CSS--

https://smacss.com/

--OOCSS - Object Orientated CSS--

https://github.com/stubbornella/oocss/wiki

https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

I hope this answers your questions.

PS

You may want to look at this CSS course by Guil Hernandez which covers SASS and also the BEM and SMACSS methods to organise CSS.

https://teamtreehouse.com/library/modular-css-with-sass

COURSE INTRO VIDEO

https://teamtreehouse.com/library/modular-css-with-sass/getting-modular-with-mixins-and-functions/course-overview

Diana Le
Diana Le
6,794 Points

I preferred using IDs when I started too but ran into too many projects where I had a unique section on a page that the client suddenly wanted to duplicate with additional content. So then I was stuck with either adding a different ID to that section HTML, and then adding that ID to the CSS, or I could shorten my CSS by adding a class to both blocks and call the CSS using just the class name instead. I still prefer IDs for unique sections like the header or footer, but for any section where I'm not sure how many items will be duplicated on the same page I've switched to classes.

I found this to be strange, as well. If you've no need to repeat the class name, an ID will do just fine. Personal preference, I suppose. I like to use ID's and classes. Helps me to differentiate the code.

Balal Naeem
Balal Naeem
7,418 Points

It's personal preference really. Every developer has a different way of working around things. Especially with CSS because it's so tricky. As you progress in your coding journey, I think you will develop your own way of doing things. There is no one hard and fast way. :)