Ask HN: What is the best way to learn CSS

[throwawayacct10]

Hi, I am an experienced backend engineer with fairly good graps of HTML and JS. But I always have trouble making reasonably good looking websites mainly because I find CSS hard to understand.

How did you learn CSS? What efficient ways would you recommend for me, keeping in mind I can spend only 5-6 hours a week.

Thanks

[omeid2]

If you know computer programming in general and have a good grasp of HTML, I don't think your problem with making reasonably good looking websites is mainly because of CSS. Some quirks and hacks aside CSS is an extremely simple language.

Making good looking website is design and design is a problem, a wicked problem[1]. These are the steps that I personally take to make okay looking stuff:

1. Look at templates and real world websites in the same field/subject and cherry pick features that you like.

2. Implement the layout and components with only structural css parts.

3. Add/Optimize color/style.

4. Refine layout.

5. Go to 3 if not satisfied.

Or my other approach is to start with Bootstrap or Zurb.

1. Pick A "framework"

2. Build the layout and select components.

3. Refine the framework defaults (in bootstrap, you mostly change stuff in variables.less)

4. Add your own styling.

5. Go to 3 if not happy.

[1] http://en.wikipedia.org/wiki/Wicked_problem

Edit: Indent.

[throwawayacct10]

Thank you. I tried doing what you told in (1)...but its way too time consuming. I am trying to find out if there is an easier way.

[LarryMade2]

As a fellow programmer, I find CSS non intuitive.

The best book I've found as a programmer is Stylin' with CSS: A Designer's Guide by Charles Wyke-Smith. Not as much BS, cuts to the chase.

Second: start with simple styleshheet and build from there. Don't buy into the ultra fancy complex stuff till you feel ready; there a lot of good result you can get from just the basics.

[jtfairbank]

I'm happy to walk you through some of my work. It'd be more of a high level overview (building modular css components, organizing your styles, and how to integrate with html in meaningful ways).

jtfairbank+hn /at/ gmail /dot/ com

[paulmatthijs]

Start with SASS/SCSS instead of CSS. I found it a lot more understandable and efficient. SCSS is compatible with CSS so you can incorporate SCSS in any existing CSS if you want/need to.

[seekingcharlie]

I actually disagree. SASS is great, but if you don't know CSS as a foundation, it's very easy to end up with severely bloated styles. You have to know CSS really well before you can use SASS efficiently.

[paulmatthijs]

isn't CSS itself bloated by definition?

[adamnemecek]

Check out smacss [0] and codepen.io[1]

[0] https://smacss.com/

[1] http://codepen.io

[zackbloom]

Magic of CSS might be of some help: http://adamschwartz.co/magic-of-css/

[throwawayacct10]

Thank you for the link. But I didn't understand the second part titled "Potions". When I click those liks like (Two pane app), I just see some layout + empty tabs. Am I missing something?

[zackbloom]

They're examples I believe, you're supposed to view the source.

[dylanhassinger]

read books by Dan Cederholm