top | item 15065696

Ask HN: Where to start with CSS?

26 points| xenopticon | 8 years ago | reply

Hi HN folks,

I am confident writing code in almost all layers of a modern web application now. Node.js/JavaScript, SQL, Angular etc., all took me some time to grasp but now are a breeze to write.

My pain point is currently CSS. I have a good understanding of advanced selectors and properties, but my final CSS code always end up being a mess. I am constantly overwriting styles, writing classes that can't be reused or composed in more than one element and using way more !important rules than I probably should.

Where do I start on the path to write clean, reusable and maintainable CSS?

8 comments

[+] dyeje|8 years ago|reply

I attended both of these talks and found them very enlightening. My team hired a CSS expert to do some part time implementation work and evaluate our practices. I was pleasantly surprised when his analysis of our codebase was very positive.

To me, the key is to think of everything in your app as a component. You should be able to drop the component into more or less any context and it should 'just work'. Following the ideas in the videos will help you accomplish that on the CSS side.

CSS is a Mess - Jonathan Snooks (ex-Lead Frontend Developer Shopify) https://www.youtube.com/watch?v=fAcW-wOFYjw

CSS for Engineers - Keith J Grant (NYSE Engineer, author of CSS in Depth) https://www.youtube.com/watch?v=J-9Tn6AetYA

[+] codegeek|8 years ago|reply

I really like http://cssreference.io

They have a visual guide which shows you what it looks like along with code on side.

[+] ninjaofawesome|8 years ago|reply

You may want to look into Sass (SCSS). It makes your code reusable and extendable via variables, mixins, loops, if/else statements- its quite robust.

Another suggestion, such as SMACSS is BEM (my personal favorite), as it flattens out your styling to prevent over specificity and makes everything clean and neat. (Check it out here: http://getbem.com/)

Ultimately though, what I've found reduces messes is to think of the end product before beginning. If you have the luxury of starting with a fresh codebase, think of the end product and its styling before starting- much like you would with any other set of features in any other language.

If you're walking in to legacy code, try to avoid the "one-offs". Sure, they solve the problem now, but its making a mess for future you to clean up as well as being a potential code smell. Leave your code a little better than when you came in and you'll be thanking yourself later.

Good luck!

[+] cag_ii|8 years ago|reply

I think the SMACSS doc is worth a read:

https://smacss.com/book/

[+] tranvu|8 years ago|reply

+1 on SMACSS. It seems like you are comfortable with CSS but unsure of the architecture and scaling behind its usage.

[+] LarryMade2|8 years ago|reply

One trick I just learned is you can combine classes - when setting class in a property put in multiple classes by separating the names with a space. i.e. <div class="manny moe jack">web stuff</div> Now you can pull apart the unique bits from the reusable ones.