12. BEFORE YOU BEGIN STYLING
It's important to add some
or
.
They'll help you to cope with most of the browser inconsistencies.
Such stylesheets are usually included in frameworks (usually don't bother
if you are using a framework).
Why? I'll explain in the next few slides.
normalize
(https://necolas.github.io/normalize.css/) reset
(http://meyerweb.com/eric/tools/css/reset/)
16. CASCADING ORDER
FROM LOWEST TO HIGHTEST
1. User agent normal stylesheets
2. User agent !important stylesheets
3. User normal stylesheets
4. Author normal stylesheets
5. Author !important stylesheets
6. User !important stylesheets
21. WHICH SELECTOR WINS THE BATTLE?
UL#MAIN‐NAV .SELECTED‐ITEM [HREF=^"HTTPS://"]
0 1 2 1
UL.NAV‐WRAP LI:NTH‐CHILD(5) A
0 0 2 3
22. LEARN CSS SPECIFICITY WITH THE GALACTIC
EMPIRE
(HTTPS://STUFFANDNONSENSE.CO.UK/ARCHIVES
/CSS_SPECIFICITY_WARS.HTML)
23.
24. MAY THE SPECIFICITY FORCE BE WITH YOU
Try to keep your selectors specificity as low as possible, as they'll be
easier to understand and maintain.
In general, it's recommended to organize selectors in a stylesheet with an
increasing specificity.
Avoid ID selectors, because they are hard to override.
Try using naming conventions such as
,
or .
BEM
(http://getbem.com/introduction/) BEMIT
(http://csswizardry.com/2015/08/bemit‐taking‐the‐bem‐naming‐
convention‐a‐step‐further/) SUIT (http://suitcss.github.io/)
33. MOST POPULAR DISPLAY PROPERTIES
Left &
right
margins
Top &
bottom
margins
Set height
or width
Force line
break after
vertical‐
align
Inline ✔ ✘ ✘ ✘ ✔
Block ✔ ✔ ✔ ✔ ✘
Inline‐
block
✔ ✔ ✔ ✘ ✔
44. MICRO CLEARFIX
/* Contain floats *and margins*. */
.cf:before,
.cf:after {
content: ' ';
display: table;
}
.cf:after {
clear: both;
}
The float containment works the same way as the traditional
“clearing” approach, but avoids the presentational markup by using
CSS generated content (:after)
‐‐ Understanding humble clearfix
(http://fuseinteractive.ca/blog/understanding‐humble‐clearfix)
57. MEDIA QUERIES
They help us build stylesheets for different screen resolutions
Examples:
@media screen and (maxwidth: 768px) {
.class { ... }
}
@media screen and (minwidth: 60em) {
.class1 { ... }
}
@media screen and (orientation: landscape) and (webkitmindevicepixelratio: 2) {
.class2 { ... }
}
Using media queries (https://developer.mozilla.org/en‐
US/docs/Web/CSS/Media_Queries/Using_media_queries)
60. THANKS FOR LISTENING!
WANT MORE?
‐ check browser compatibility for CSS
properties you wanna use
‐ a game for learning flexbox
CSS for Developers (http://elijahmanor.com/talks/css‐for‐devs/#/)
Can I use ... ? (http://caniuse.com/)
Flexboxfroggy (http://flexboxfroggy.com/)