
Ask HN: Where to start with CSS? - xenopticon
Hi HN folks,<p>I am confident writing code in almost all layers of a modern web application now. Node.js&#x2F;JavaScript, SQL, Angular etc., all took me some time to grasp but now are a breeze to write.<p>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&#x27;t be reused or composed in more than one element and using way more !important rules than I probably should.<p>Where do I start on the path to write clean, reusable and maintainable CSS?
======
dyeje
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](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](https://www.youtube.com/watch?v=J-9Tn6AetYA)

------
codegeek
I really like [http://cssreference.io](http://cssreference.io)

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

------
ninjaofawesome
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/](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
I think the SMACSS doc is worth a read:

[https://smacss.com/book/](https://smacss.com/book/)

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

------
LarryMade2
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.

Other than that a lot of my CSS cleanup happens in refactoring the layout

------
vanderreeah
[https://css-tricks.com](https://css-tricks.com)

------
maxharris
npm.im/styled-components

