Welcome back to another styling post, this time I assume you know something about CSS or SCSS and that you are able to build a website, prettier or...
For further actions, you may consider blocking this person and/or reporting abuse
First of all thanks for explaining yourself, I simply feel angry when people add negative comments without arguing it properly.
Even now, you didn't explained why you think these points are incorrect, you are only pointing things that you think they are. I'll explain your concerns point by point so you can learn a bit more about each.
First of all the div#main selector is not for copy paste into a project (but if you do it won't hurt anybody), the correct selector would be #main, without html tag. This is correct but the tag here is for giving more information to the reader, meaning #main will be a container or content wrapper.
You throw three statements: There is no reason to use a div (only), there is never a reason to use an id for styling and there is never a reason to use a div and an adjacent id.
Sadly you only matched 1 of 3. There is never a reason to use a div and adjacent ID - this is correct, as I explained.
Let me explain the other two statements quickly:
Imagine you are templating a products component on an e-commerce (product boxes with thumbnail/s, excerpt, price and so, and a product details view) and you use a <p> tag for excerpts (depending on the design they must be <span> tags, but let's suppose we get a little paragraph on the design here).
Then you want this paragraph tags for being formatted on a way, that are (should be) different from the rest of <p> tags on your project or even on your component (the excerpt should and must be different from the full detailed product view <p> tags as the message you transmit to your customers is different, on the excerpt you want them to click on the product card and on the product page you want it to buy the product, but this is a marketing -> design reason and the developer has nothing to choose here after all).
How you deal with it on a semantically correct point of view? there's a simplified example:
#product-cards { background: $product-cards-background; p { font-weight: bold; font-size: 18px; } } #product-details { p { font-size: 16px; } }I used an ID for styling, and for getting context, and a tag for giving styles to different usages of the same html element.
Obviously the #product-cards and the #product-details are meant to be div (or section or article or... add here your HTML5 element you prefer that renders internally into a <div> element but looks fancy when used on the template) html elements with, apart from the id (added for the reasons I explained) will have one or more classes, for example:
If this view will have an specific background there's no point on adding a global class with this background.
I repeat, this was a simplified example.
When applying on a new company you usually found stylesheets with more than 300 lines with luck and more than 1000 without it for components that could be coded with less than a half, but there's deadlines, non-planified updates "on the fly", programmers that are not properly qualified, others that simply don't give af and many reasons for it to happen.
When you have your hands dirty on a re-design on big projects you definitely appreciate the presence of ids (unless they are repeated and used indiscriminately on the project).
So when you start a new project, at this point seems useless to add ids and getting context to your styles, but when this project grows, and grows again, they become the most useful thing for find and edit styles.
Last thing I want to answer something that I feel funny:
Line height would be relative to font size
I found this line really funny because there's no point on adding this information, you could go to w3c or mdn and I'm sure you will found this same information if someone wants to know the admitted values for the line-height property, don't you?
There's nothing incorrect using px, cm, % or whatever unit you want here. You can set it using units or without them, which would be the same than using percentile values, for example
line-height: 1.2;is exactly the same thanline-height: 120%;but this fits more to my CSS complete guide post instead on this one.Your words, without examples, without properly constructed arguments and without denoting an experience background makes me think you studied a lot of stuff about CSS but worked less on real projects with it. I mean, if you work on your own projects it's nice, but if you are convinced about something you will make the same mistakes for years. If you put your hands on a third party project (even contributing on some public repo) will let you see different code styles, and you can ask to this person why he coded this like he did, and you will learn by the experience of others which has incalculable value.
Best regards
Of course, because the practices you are referring to (using ids) are good for:
And don't cause negative effects on:
If you can't explain something easy and with few words, you may not know enough about that.
We've decided that this thread of conversation does nothing positive for anyone - and will be removing ourselves from it. We suggest that you do the same, Joel. BTW nice 100/100/100/100 on your site score! That's awesome! See you around.
It could be nice to keep the conversation because it would be nice for readers, now theres plenty of clarifications that I spent time on without context but whatever... it's your decision.
You can add them to your article. They'll still be good time spent. : )
Hi Joel, thanks for this post. FYI we've added it into a GitHub project gathering content about best coding practices :)
github.com/promyze/best-coding-pra...