CSS CSS Basics (2014) Basic Selectors Reusing Classes

This is a very bad practice to teach new programmers

You are coupling objects together that share nothing in common only for the sake of code cleanliness. First timers will focus more on creating dozens of unnecessary (and poorly named) classes rather than standing up their code quickly and having a much simpler time debugging it. What you are advocating is flat out bad practice.

Redundancy is fine, especially in the beginning phases - it is hard enough to get working code without the additional anxiety of creating this scaffold on top of something you that you aren't even sure what exactly it is yet. The approach in this video requires far more maintenance than doing an s/somename/othername during the initial development process, even though that seems to be the major argument for this exact style.

Only start to create general purpose classes like these when it becomes absolutely 100% necessary and apparent that you need one, but until then be as redundant and verbose as you need to be to feel comfortable.

Dave StSomeWhere
Dave StSomeWhere
19,818 Points

Or, maybe, everyone learns a little differently and their approach is useful for most, or it might just be your opinion. Please show some code examples to have a reasonable discussion and understand the point you are trying to make?

DIrectly from the video:

// index.html
...
<div class="primary-content t-border rounded">
...

// style.css
...
.primary-content {
  background: grey;
}
.t-border {
  border-top: 1px solid;
}
.rounded {
  border-radius: 10px;
}
...

Is presented as be better than:

// index.html
...
<div class="primary-content">
...

// style.css
...
.primary-content {
  background: grey;
  border-top: 1px solid;
  border-radius: 10px;
}
...

Which simply isn't true, and is not beneficial for new programmers to be concerned with. It is much easier to search and replace for objects, and fix the ones you missed after doing testing, rather than handcuffing objects to one another for fear of breaking the nonsense rule that you should not repeat yourself ever.

You can teach classes without accidentally teaching tight coupling.

To the new people - be as expressive and clear as you want to be, and don't do things that can feel awkward clunky just because you believe there is some golden rule that cannot be broken. Code is meant to be read (and debugged) by humans, not by computers, and in my example it is clear what is going on, versus the example given as an example of optimization. If you wrote my code 6 months ago, worked on 10 different projects, then came back to it, you would be able to jump back in much faster than the code given as "better" in the video. Once you've got a few projects under your belt, the reason for creating general-use classes will become much clearer, but until then, keep those fingers typing and gaining valuable muscle memory instead of compulsively refactoring snippets into classes.

*edit

I forgot a crucial part to my point - the naming of things. New programmers are horrible at naming things by nature, because life hasn't taught us to think that way before. Just like learning to play an instrument or writing a song, it's gonna be painful at first. The less things you have to name, the less likely you are going to name something poorly and create bugs/flawed decisions down the line on the project. More classes, more naming.

Here is a nice post that beginners to CSS and programming in general should take a look at (not mine, I swear): https://medium.com/swlh/excellent-code-clean-and-beautiful-code-b541ca4b5a39

2 Answers

Liam Clarke
MOD
Liam Clarke
Treehouse Moderator 19,866 Points

Hi Kelly

Although i do agree with some of your points, the CSS module you are referring to is CSS basics, this is to give the absolute fundamentals of CSS without overwhelming the student. Naming conventions, methodologies and design patterns are not essential, they are more focused at becoming proficient, so at a basic level it is more important to focus on the properties inside the class selector rather than the selectors name itself.

Further reading passed this Treehouse module should be focused on what you are referring to, naming conventions, methodologies and general design patterns.

However I do agree, Treehoue tutor's should be following some sort of convention or best practice to ensure little confusion between multiple modules, thus making it easier when a student comes across different tutors teaching the same topic.

I will forward this back to the Treehouse team.

Thank you for your feedback

Thank you - I have seen too many new programmers focusing on the organization of their code rather than the code itself. I understand it appears harmless to introduce these concepts early on to get people familiar with it, but to me it seemed to imply that if there is shared code, it would be better served wrapped up in a class, which is very harmful without careful consideration, especially to ears already anxious to code "by the book".

Tony B
seal-mask
.a{fill-rule:evenodd;}techdegree
Tony B
Front End Web Development Techdegree Student 10,410 Points

I actually was wondering about this intuitively after watching the video so I went to the Q&A section, which I rarely have done up to this point. kellywilson4 explained it well, thanks!