
Ask HN: How do I get better at CSS? - Catalyst4NaN
Most of the courses I&#x27;ve looked at for learning css are either too theoretical or aimed at beginners.<p>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.<p>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/](http://learnlayout.com/) is a great guide to the
basics of layout in CSS

\- [http://jonibologna.com/flexbox-
cheatsheet/](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.

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

~~~
proyb2
Not really, I just surprise WebGL in IE11 is so much performer than in Chrome
and Firefox.

------
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/](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/](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](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!

------
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/SaraSoueidan)
[https://twitter.com/anatudor](https://twitter.com/anatudor)
[https://twitter.com/LeaVerou](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...](https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css)).
You can read through their documentation and find the styles in the source to
see how it works ([http://getbootstrap.com/](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](https://developer.chrome.com/devtools/docs/elements-styles))

For detailed explanations use Mozilla Developer Network
([https://developer.mozilla.org/en-
US/docs/Web/CSS](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/](https://css-tricks.com/))

The Codrops CSS Reference is also very, very detailed
([http://tympanus.net/codrops/css_reference/](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...](https://medium.com/@fat/mediums-css-is-actually-
pretty-fucking-good-b8e2a6c78b06)

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...](https://developers.google.com/web/fundamentals/layouts/rwd-
fundamentals/use-media-queries?hl=en)) as well as CSS Tricks ([https://css-
tricks.com/snippets/css/media-queries-for-standa...](https://css-
tricks.com/snippets/css/media-queries-for-standard-devices/))

