Skip to content

Instantly share code, notes, and snippets.

@axe312ger
Last active Jul 30, 2018
Embed
What would you like to do?
I try to gather here all information to get your css knowledge to a higher level

Become a CSS ninja with reading a few links I gathered here!

There is so many information about css in the internet but most of the stuff, is totally non-sense and is just misleading people into copy & pasting bullshit where they don't understand why it is are working.

This is one of the biggest issues of frontend design! Thats why so many designs/websites fail. Especially cross-browser.

It is just a little you need to know, to truely understand how css is working. I hope these informations from other wonderful authors help you to improve yourself and make frontend and css work less painfull

This will not replace a full css documentation because this is very much about the techniques of using css and might not cover every eye-candy stuff css is able to do.

First - Selectors

You must know how selectors exactly work ... or anything else you know about css doesn't really matter

Some selectors are hard to get, always keep in mind what you learned above. These might help:

Second - Layouting

The knowledge of all available layouting methods from css1 to css3 will help you to stop guessing that stuff might

Money quotes:

If you got a solid smart responsive and flexible layout code, the rest of the styling is easy-peasy.

Less is more. In most cases, this means you got 3 lines of flexbox code.

Third - Realize that most frameworks are for prototyping only

Bootstrap can save you a lot of time. In the first moment. Same goes for most other frameworks. But they suck for serious projects

Most of them bloat your markup, introduce bad practices (so many...) and add heavy payload to your page in terms of performance and size for stuff, you will mostly not use at all. This is unacceptable if you take your frontend job serious.

Other people wrote it done already pretty neat:

Forth - Master your tools

For sure you use the Chrome devtools already. But I bet, the link below contains at least one tip, you don't know already and will blow your mind.

Fifth - Typography

Do not load fonts from CDNs (to avoid the flash of unstyled text!), also use woff & woff2 as formats since they are enough nowadays.

You may use the squirrel webfont generator to transform any font to the correct format. It can also remove symbols you dont need to reduce the file size even more.

With the FontSquirrel webfont generator, I'd go for the following character settings here in Germany:

Character Type:	Lowercase, Uppercase, Numbers, Currency, Math Symbols
Language:	English, German
Unicode Tables:	none

This reduces my fonts to 5-15% of the original .ttf file

Sixth - Respect browser engine special behaviour - avoid the flash of unstyled content.

Not only wrong font implementations can result in a FOUC.

Seventh - Responsive deluxe

You ain't need media queries to have values like font-sizes depend on the browser window width. You can use the css locks technique: https://fvsch.com/css-locks/

Last - Play!

There are many awesome css learning games around, which will help you to memorize what you just learned:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment