Ask HN: How do I get better at CSS?

[Catalyst4NaN]

Most of the courses I've looked at for learning css are either too theoretical or aimed at beginners.

I feel as though I have a decent theoretical understanding of CSS but I want something that is just drilling home stuff like creating great looking buttons, panels and input fields.

Any suggestions are much appreciated!

[acemarke]

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.

[applecore]

No one uses Flexbox in production. You're better off learning real CSS if you're just getting started with web development.

[LukeB_UK]

> You're better off learning real CSS

Flexbox is real CSS, it's part of the CSS3 spec: http://www.w3.org/TR/2015/WD-css-flexbox-1-20150514/

[tbassetto]

We develop a webapp that targets the music industry, and none of them is using old IEs. We have been using flexbox in production for more than one year :)

However, this webapp is used to generate websites that may be visited by anybody, really, so we have to support IE9 and we don't use flex box for them. It all depends on your customers / visitors base.

[cleverjake]

I work at WalMart.com - we have shipped flexbox in production for years now

[marpstar]

We're using Flexbox in production for our next release. We only need to support IE10+, but with autoprefixer it's dead simple.

[Bahamut]

I've run into plenty of shops that use flexbox in production. This is just false.

[harperlee]

What is the reason for that? Is something wrong with Flexbox? Or just browser adoption?

[tbassetto]

Flexbox is not supported by IE < 10. And IE10 supports an old syntax but that can be mitigated by using the "autoprefixer" tool.

[mzjs]

I'm not sure anyone really expects websites to look good in internet explorer anymore. As long as it's mostly functional, it's fine.

[data-cat]

I think internet explorer users would disagree with you.

[err4nt]

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!

[WaltPurvis]

Did you personally think up this quilting analogy for copy-pasta programming? Because it's pretty awesome and I want to be able to give due credit when I steal it.

[err4nt]

I'm not sure what you mean. I was using things like HTML5 Boilerplate, Bootstrap, jQuery and a whole slew of plugins to build the things I wanted. Then I set a goal to type every character I delivered, and the only copy/paste I'm allowed to do are from my own snippets, which I have typed character-by-character. I got better at CSS this way, so I decided to do it with my HTML as well!

Three years ago I couldn't write a line of JavaScript (though I could hook up, configure, and enable jQuery plugins). So I decided to just start _typing_ 100% of the JavaScript I would add to my projects instead of copying and pasting it in…two years later I'm writing vanilla JavaScript for everything I need and I haven't put jQuery on a project in months!

If you want to get closer to a language (CSS, HTML, JS) stop copying from Stack Overflow, stop using libraries you don't understand, and either write it yourself or re-write your own version of somebody else's pattern and use that.

This idea didn't come from another developer or advice or anything, I just set a personal goal to see how it would turn out. Now I highly recommend it to others too!

[compbio]

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

[S4M]

> Find and read some front-end designer blogs.

Do you have some suggestions?

[jrmiii]

I learn a lot from https://css-tricks.com/

[corywatilo]

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!

[realrocker]

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 .

[TheLem]

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.

[mattj]

Similar experience, but I focused on finding UI elements I liked from native apps or websites and attempted to clone them without looking at the source, then played around with the result to figure out how I could simplify it, how it behaved cross browser, etc etc.

[Catalyst4NaN]

I really like the sound of this approach. It seems really simple but thanks for the tip!

[Moru]

And then restart the cycle next time your (or everyone elses) favourite browser does an update.

[DanBC]

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

[harperlee]

I believe this is a great answer. One way of doing that, in my opinion, is writing blog posts explaining things. When I do that, I invariably end up doubting about some things that I write, doing small experiments to see whether something is always true, etc. So in effect, the act of talking/writing/explaining something, makes you analyze what you think you know, and search for where that ends, how that breaks, etc.

[dominotw]

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.

[janpieterz]

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!

[klum]

Also, make sure you understand why things happen the way they do. If there's an issue with the layout and you manage to fix this by trying some different things, take the time to figure out why the fix worked--things like the box model, collapsing margins and containing floats are all worth understanding. Your designs will feel less like a fragile house of cards, too...

[thekevan]

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.

[Sakes]

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.

[teleclimber]

Yep totally. OP wants to "get better at CSS" but says they want ".. great looking buttons.."

Making things look great is more about an affinity for design than knowledge of fancy CSS.

OP, you might want to hang out on news.layervault.com in addition to HN. You can learn a lot by examining what gets shared and the comments.

[Nokrosis]

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.

[edoceo]

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.

[fsk]

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

[apricot13]

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

[marcusmolchany]

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