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.
You must know how selectors exactly work ... or anything else you know about css doesn't really matter
- https://medium.com/@dte/understanding-css-selector-specificity-a02238a02a59#.m8ezuh4ob
- http://benhowdle.im/cssselectors/
Some selectors are hard to get, always keep in mind what you learned above. These might help:
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.
- Proper floating: https://medium.freecodecamp.com/css-floats-explained-by-riding-an-escalator-57fa55232333#.yk8ot4shv
- Walkthrough of all common and important layout techniques: http://learnlayout.com/
- Awesome animated flexbox explanation: https://medium.freecodecamp.com/even-more-about-how-flexbox-works-explained-in-big-colorful-animated-gifs-a5a74812b053
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:
- http://www.zingdesign.com/5-reasons-not-to-use-twitter-bootstrap/
- http://www.punkchip.com/why-dont-you-use-bootstrap/
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.
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
- More details here: https://www.paulirish.com/2009/fighting-the-font-face-fout/
- And the squirrel will help you fix this issue: https://www.fontsquirrel.com/tools/webfont-generator
Not only wrong font implementations can result in a FOUC.
- https://twitter.com/samccone/status/791665852454100997
- https://www.paulirish.com/2009/avoiding-the-fouc-v3/
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/
There are many awesome css learning games around, which will help you to memorize what you just learned:
- https://flukeout.github.io/
- http://flexboxfroggy.com/
- http://www.flexboxdefense.com/
- http://geddski.teachable.com/p/flexbox-zombies
- http://cssgridgarden.com/ - Finally a
display: grid;learning game :)