Hi, I am looking for some opinions on a CSS formatting discussion I am having with another front end developer. I am going to try and keep it short as this has been a long discussion.

We have a developer who like to style most of his/her CSS in relation to the body.

Example:

body > .wrapper > article.main > [itemprop="articleBody"] section:first-child { } 

 

this is a really short example, some lines have loads of *, ~ and +

Now I find that this is so overly complicated and could be done with a simple class like

.post-content { } 

 

I have less experience so I am just ignored when I mention this. But I am the one that has to update the site and I am finding simple things like creating a new page and putting the blue box from page A onto the new page extremely overly complicated and I find that I a) have to make a even bigger more specific string of selectors I have to go through his code and change his long string to a simple class. But then as I do this everything that is after the blue box on page A has now lost some of its formatting so I have to fix that too.

I would really like a second opinion on this so any comments would be much appreciated

Edited March 1, 201313 yr by funsella

You are right. That code is code is completely unmaintainable and not modular. Modular, or OOCSS, should definitely be best practice nowadays. IMO, the most selectors you should use in a row (e.g. .wrapper article h3 {) should be 3 at max. If you mark up content in a reusable way you shouldn't ever need more.

 

In the other direction, CSS like in your example is just bad. Not only is it more to write, which in a large stylesheet could really add up, but its lack of modularity will increase the amount of writing even more, needing entirely new declarations on things that could have shared common modules of CSS. It also introduces specificity problems. What if a 'section' in that chain was changed to an 'article' in one page. You would have to write an entirely new declaration for that one box.

 

SMACCS by Jonathan Snook is a nice little book on this subject, or I'm sure there are plenty articles to read online.

Thanks for your reply, not just because you said I'm right but that book looks good and its going to make a nice addition to my e-book library.

 

And I have also been crawling the interwebs to see if I can find more info on this and I have read on a few posts that your CSS should not exceed past 3, so 3 is the magic number, and also don't use !important which I am guity off because some days it saves me time on having to undo all the already in-place styles.

That was how I first learned CSS about 5 years ago and it was popularized by Dreamweaver which made your selector extremely specific by default. Needless to say I wasted a lot of time coding that way and it was only by being "lazy" and only using classes that I realised how much easier it was.

 

I agree with haydanreeves. SMACCS really helped me to plan my code in advance and structure it accordingly. Might be a good present for your friend.