5 ms·

Ask HN: What is the best way to learn CSS

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

zackbloom 12y ago
Magic of CSS might be of some help: http://adamschwartz.co/magic-of-css/ http://adamschwartz.co/magic-of-css/
- throwawayacct10 12y ago
  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 12y ago
    They're examples I believe, you're supposed to view the source.
omeid2 12y ago
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 http://en.wikipedia.org/wiki/Wicked_problem Edit: Indent.
- throwawayacct10 12y ago
  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.
dylanhassinger 12y ago
read books by Dan Cederholm
adamnemecek 12y ago
Check out smacss [0] and codepen.io[1] [0] https://smacss.com/ https://smacss.com/ [1] http://codepen.io http://codepen.io
jtfairbank 12y ago
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 12y ago
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 12y ago
  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 12y ago
    isn't CSS itself bloated by definition?
LarryMade2 12y ago
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.

zackbloom 12y ago

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

throwawayacct10 12y ago
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 12y ago
  They're examples I believe, you're supposed to view the source.

omeid2 12y ago

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 http://en.wikipedia.org/wiki/Wicked_problem Edit: Indent.

throwawayacct10 12y ago
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.

dylanhassinger 12y ago

read books by Dan Cederholm

adamnemecek 12y ago

Check out smacss [0] and codepen.io[1] [0] https://smacss.com/ https://smacss.com/ [1] http://codepen.io http://codepen.io

jtfairbank 12y ago

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 12y ago

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 12y ago
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 12y ago
  isn't CSS itself bloated by definition?

LarryMade2 12y ago

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.