Ask HN: How do I get better at CSS?

I'm an applications programmer. My first meaningful web dev experience was a GWT app I built from 2011-2012 using the SmartGWT widget library. They completely bypass the standard CSS layout modes - everything is absolutely positioned using locations calculated in JS. Felt very much at home given my previous desktop UI toolkit experience.

However, for the last two years I've been building a related web app that's all JS. We've cobbled together our own UI conventions out of HTML, CSS, and Backbone/Marionette classes. For a long time, I got frustrated with any task that involved doing UI layout. I inevitably found myself reduced to desperate googling and randomly flipping CSS attributes in the hopes that I might finally get things to slide into place.

Fortunately, in the last couple months things seem to have finally come together for me. The two keys for me have been:

- Grasping the core concepts of the HTML box model and block/inline behavior

- Flexbox. Flexbox FTW. I've been able to replace SO many nasty CSS hacks with simple flexbox directives over the last few weeks.

Here's two key links that have really helped me:

- http://learnlayout.com/ is a great guide to the basics of layout in CSS

- http://jonibologna.com/flexbox-cheatsheet/ is a simple graphical overview of flexbox commands

Obviously, all this is focused on the layout aspect rather than the "styling" part per se, as that's been my biggest concern on this project.

In my opinion it goes like this :

- Make a sketch of the design, form positioning or interface you want for a certain page.

- Try to translate this design to a more comprehensible form for your interpreter (I mean writing CSS lines).

- Long cycle of try and error, reading stackoverflow, testing, reading snippets.

Practice this for a certain amount of time (be patient!) you will find yourself a world class CSS "writer". The main basis is moving from a sketch to CSS script.

STOP copying and pasting. Try typing every character in your CSS and never rely on external or pre-made libraries and you will learn what is, and more importantly what is not actually required for a layout to work.

In two years of adopting this policy in my own work I would say I learned as fact as the entire decade before that, where I was making quilts by stitching pre-made bits of fabric into one larger piece.

Don't be a quiltmaker any longer!

- Design an application or website inside the browser (no photoshop mockup).

- Find and read some front-end designer blogs.

- Take a good (CSS) framework like HTML5 boilerplate and dissect its code.

- Remake your last favorite designed site without looking at their code. Then compare afterwards.

- Start creating your own framework for rapid prototyping. Add layout-rules to common UI elements: breadcrumbs, pane lists, buttons, forms etc.

Teach other people - it's a great way to discover how solidly you understand something and where gaps in your knowledge are.

In my experience the best way to learn these kind of things is just to try!

You might have a list with ideas (they can even be stupid, or already existing). If not, try to make one, the craziest things can go on there. Then every week try to sit down and make the user interface for them. Look at other websites that offer familiar services and combine them. Learning while practicing putting your ideas into reality has been my best way of getting any real sustained progress in skills!

It sounds like you are more interested in design than the implementation of it.

For great looking buttons/fields you just need to be sensitive to font selection, padding, borders, & colors.

1) Refer to apps / sites that you think are beautiful

2) Dissect them for:

- Color palettes

- horizontal padding

- vertical padding

- margins sizes

- border thicknesses

- font stacks

- font sizes

3) always build on top of a css framework such as bootstrap

4) implement design tweaks referring to your notes of other apps you wish to imitate.

If you know the basics, I'd say the best way is to actually build out some pages with different components and layouts. It's easy to code up one page, but when you get to having to build out multiple pages with different elements, it really makes you step back and start to componentize your CSS and make you think modularly. Nothing will beat experience and familiarizing yourself with different scenarios. When I was starting out, I went this route and utilized Experts Exchange when I got stuck. Great community over there (or at least 10ish years ago...)

If you're not a designer, take a popular webpage and build your own version of it, then look at the real source code and see how yours compares, or ask some CSS forum members to look over your code.

Build a library of frequently used styles. I have something like the following:

.small {font-size: 12px;} .big {font-size: 16px;} .bigger {font-size: 18px;} .biggest {font-size: 20px;}

...and it extends from everything like font sizes to colors.

.red {color: #f00;}

Then when you're building something out, you can reference generic styles from your own library. It makes things quick:

<p class="big red">foo</p>

I'd recommend against using something like Bootstrap early on. To really get the grasp of CSS, you'll want to work with ONLY your own code so you really understand how it works. Libraries are great, but you can only fully understand it if you control everything.

Hope these tips help!

As a low level android middleware guy with little knowledge of css in practice, I found this guide: http://www.basscss.com/docs/guides/basics/ very effective. Especially the recommended order of css commands made a lot of sense to me: http://www.basscss.com/docs/guides/basics/#order .

1. Follow right people on twitter eg,

https://twitter.com/SaraSoueidan https://twitter.com/anatudor https://twitter.com/LeaVerou

2. Get a codepen account and start experimenting, sharing new ideas on css forums ect.

3. Try to replicate some css frameworks like pure. Read the code; try to figure out how they did something.

4. Finally, I recommend CSS Secrets book by Lea Verou. You can buy a pre release copy.

One thing I found really useful was taking things others have built and modifying them. Think about the offline world, sometimes the best way to learn how to build something is taking apart and putting back together something someone else already built.

There's a bunch of different ways to do this, one I liked was downloading free Bootstrap themes and making them look different. An unexpected bonus was learning to find errors in the code.

I can give you this suggestions:

1. Start making PSD to HTML/CSS with the following rules: - Write as less HTML as you can and use CSS to get the style. - Avoid using images as hard as you can. - Always remember we want a fast Web and every byte counts.

2. Be curious, if you see something you like on a website, check their code, look how they did it and try experiment with it. Try to find a cleaner, better and less-code way to do it (if ther is) and apply it to your projects.

Ive got a bunch of stuff that needs design. You can practice on 10+ sites with unique design needs. Public work for your portfolio. I will pay you.

Find a page with a CSS problem (even bonus points if it's for work). Then, use a web debugger to identify and fix the problem (Firebug or Chrome).

As someone else said, write your own responsive grid from scratch. Try writing a responsive contact form (name, E-Mail, message body).

Go to dribbble and replicate certain components you find there. Set yourself a condition for each one you do.

* Modern browsers only * use flexbox * must work in ie6 with no js * must degrade gracefully etc

Hey I was in the same place as you about a year ago and these are a few of the things I did to practice:

Pick a CSS framework and look through the source. Bootstrap is a great one (https://github.com/twbs/bootstrap/blob/master/dist/css/boots...). You can read through their documentation and find the styles in the source to see how it works (http://getbootstrap.com/).

Whenever you see something cool on a website, Right Click -> Inspect Element and figure out how they did it. Google Chrome developer tools are really awesome for this. You can toggle existing styles, add styles, edit html, etc (https://developer.chrome.com/devtools/docs/elements-styles)

For detailed explanations use Mozilla Developer Network (https://developer.mozilla.org/en-US/docs/Web/CSS). They have very comprehensive write ups for every style attribute.

CSS Tricks has great write ups for specific styles and sets of styles to achieve things like centering, layout, and pretty much everything else you can think of (https://css-tricks.com/)

The Codrops CSS Reference is also very, very detailed (http://tympanus.net/codrops/css_reference/)

Like many other people have said, if you think up a design you can use jsfiddle, jsbin, coderpen or any in browser editor to quickly try and style something up.

For larger CSS code bases you'll need to keep things readable and easily understandable for yourself and others. My team follows the Medium CSS/LESS Style Guide. It's a really excellent way to keep your code organized when you start working in larger code bases. https://medium.com/@fat/mediums-css-is-actually-pretty-fucki...

Good luck!

Edit I forgot to mention reading up on media queries. Media queries are extremely important for when you get into responsive design and dealing with content layout across all sorts of different screen sizes. Google has a very good write up on this (https://developers.google.com/web/fundamentals/layouts/rwd-f...) as well as CSS Tricks (https://css-tricks.com/snippets/css/media-queries-for-standa...)