Top Banner
Created by / Marta Sztybor (http://martasztybor.pl) @sztyborek (http://twitter.com/sztyborek)
60

CSS For Backend Developers

Apr 11, 2017

Download

Software

10Clouds
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: CSS For Backend Developers

CSS FOR BACKEND DEVS

Created by / Marta Sztybor (http://martasztybor.pl) @sztyborek (http://twitter.com/sztyborek)

Page 2: CSS For Backend Developers

IF YOU'VE EVER FELT LIKE THIS WHILEEDITING CSS...

Page 3: CSS For Backend Developers

...THIS TALK IS FOR YOU.

Page 4: CSS For Backend Developers

LET'S TALK ABOUT BASICS FIRST

Page 5: CSS For Backend Developers

HTML SEMANTICS!

Semantic HTML is the use of HTML markup to reinforce thesemantics, or meaning, of the information in webpages and webapplications rather than merely to define its presentation or look.

‐‐ Wiki (https://en.wikipedia.org/wiki/Semantic_HTML)

Page 6: CSS For Backend Developers

WHY?

It's SEO‐friendly.Solves

(eg. using button tag for buttons, not styled a tag).It adds meaning and increases readability of your code.

most problems with accessibility(https://www.marcozehe.de/2015/12/14/the‐web‐accessibility‐basics/)

Page 7: CSS For Backend Developers

HOW?

Divitis!

<div id="header"> <div id="logo"></div></div><div id="topNav"></div><div id="leftCol"></div><div id="rightCol"></div><div id="footer"></div>

Page 8: CSS For Backend Developers

THE SOLUTION

<header> <div id="logo"></div></header><nav></nav>

<aside></aside><main></main>

<footer></footer>

Page 9: CSS For Backend Developers
Page 10: CSS For Backend Developers
Page 11: CSS For Backend Developers

RESOURCES

‐ how the HTML semantics matters for accessibility

MDN HTML element reference(https://developer.mozilla.org/en/docs/Web/HTML/Element)HTML document outline on MDN (https://developer.mozilla.org/en‐US/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document)Let's talk about semantics (http://html5doctor.com/lets‐talk‐about‐semantics/)Accessibility basics (https://www.marcozehe.de/2015/12/14/the‐web‐accessibility‐basics/)A look into proper HTML5 semantics (http://www.hongkiat.com/blog/html‐5‐semantics/)

Page 12: CSS For Backend Developers

BEFORE YOU BEGIN STYLINGIt'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 botherif 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/)

Page 13: CSS For Backend Developers

AND HERE IS WHERE THE PARTYBEGINS!

Page 14: CSS For Backend Developers

Cascade, specificity & inheritanceBox modelDisplay propertyPositioning & floatsResponsive web design

Page 15: CSS For Backend Developers

CSS RULES' WARSCascadingInheritanceSpecificity

Page 16: CSS For Backend Developers

CASCADING ORDERFROM LOWEST TO HIGHTEST

1. User agent normal stylesheets2. User agent !important stylesheets3. User normal stylesheets4. Author normal stylesheets5. Author !important stylesheets6. User !important stylesheets

Page 17: CSS For Backend Developers

INHERITANCE (VS CASCADE)

Inheritance is about how properties trickle down from an element toits children. Certain properties, like font‐family inherit. If you set afont‐family on the body, that font family will be inherited by all theelements within the body. (...)

The cascade is about what take precedence when there is a conflict.

‐‐ Miriam Suzanne on Stackoverflow(http://stackoverflow.com/questions/2406884/in‐css‐what‐is‐the‐difference‐between‐cascading‐and‐inheritance)

Page 18: CSS For Backend Developers

INHERITED VALUEScolorfont‐familyfont‐sizefont‐stylefont‐variantfont‐weightfonttext‐align

NON-INHERITED VALUESbackgroundborderdisplayfloatwidthheighttop, right, bottom, leftmarginpadding

Page 19: CSS For Backend Developers

SPECIFICITYSELECTORS SPECIFICITY SORTED FROM LOWEST TO HIGHEST

1. Element and pseudo‐element

div p::after

2. Class, pseudo‐class and attribute

.container

.list­item:first­child [href^='https://']

3. IDs

#users­chart #main­nav

4. Inline styles

<ul style="list­style­type: none"></ul>

Attributes with !important overide even inline styles.

Page 20: CSS For Backend Developers

CALCULATING SPECIFICITY1. For every element or pseudo‐element add 1

0 0 0 1

2. For every class, pseudo‐class or attribute add 100 0 1 0

3. For every ID add 1000 1 0 0

4. For inline style add 10001 0 0 0

Page 21: CSS For Backend Developers

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

Page 22: CSS For Backend Developers

LEARN CSS SPECIFICITY WITH THE GALACTICEMPIRE

(HTTPS://STUFFANDNONSENSE.CO.UK/ARCHIVES/CSS_SPECIFICITY_WARS.HTML)

Page 23: CSS For Backend Developers
Page 24: CSS For Backend Developers

MAY THE SPECIFICITY FORCE BE WITH YOUTry to keep your selectors specificity as low as possible, as they'll beeasier to understand and maintain.In general, it's recommended to organize selectors in a stylesheet with anincreasing 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/)

Page 25: CSS For Backend Developers

RESOURCES

on MDN

on CSS‐Tricks

About CSS specificity (https://developer.mozilla.org/en‐US/docs/Web/CSS/Specificity)CSS Specificity is base‐infinite (https://css‐tricks.com/css‐specificity‐is‐base‐infinite/)

Page 26: CSS For Backend Developers

BOX MODEL

Mama always said life was like a box of chocolates. You never knowwhat you're gonna get.

‐‐ Forest Gump

CSS is like a box of chocolates. You never know what you're gonnaget.

‐‐ Developer

Page 27: CSS For Backend Developers

WHAT IS THE MAGICAL BOX MODEL?

source: W3C (http://www.w3.org/TR/CSS21/box.html)

Page 28: CSS For Backend Developers

THE PROBLEM

width: 300px

Declared box width: 300px

Rendered box width: 342px

Oh my! It doesn't compute!

.box­of­chocolates width: 300px; padding: 20px; border: 1px solid #333;

Page 29: CSS For Backend Developers

THE SOLUTION

Rendered width = content + padding + border

* box­sizing: content­box;

Rendered width = content width

* box­sizing: border­box;

Page 30: CSS For Backend Developers

RESOURCES

by Paul Irish

CSS Box Sizing by MDN(https://developer.mozilla.org/en/docs/Web/CSS/box‐sizing)Box sizing explained on CSS‐Tricks (https://css‐tricks.com/box‐sizing/)* Box‐sizing: Border‐box FTW (http://www.paulirish.com/2012/box‐sizing‐border‐box‐ftw/)

Page 31: CSS For Backend Developers

HOW TO DISPLAY?

Page 32: CSS For Backend Developers

CSS DISPLAY PROPERTIESnoneinlineblockinline‐blocklist‐iteminline‐list‐itemtableinline‐tabletable‐celltable‐columntable‐rowtable‐captionflexinline‐flex...

Page 33: CSS For Backend Developers

MOST POPULAR DISPLAY PROPERTIES

Left &rightmargins

Top &bottommargins

Set heightor width

Force linebreak after

vertical‐align

Inline Block Inline‐block

Page 34: CSS For Backend Developers

A SIMPLE GUIDE TO CSS POSITIONING

Page 35: CSS For Backend Developers

HAVE YOU EVER WANTED TO DO SOMETHINGLIKE...

BOX 1...but ended up like

BOX 1

BOX 2

BOX 2

Page 36: CSS For Backend Developers
Page 37: CSS For Backend Developers

POSITON: STATICDefault position property.Element laid out in its currentposition in the flow.z‐index property doesn't apply.

.box width: 200px; height: 200px; background: #14FFF4;

Page 38: CSS For Backend Developers

POSITON: RELATIVEAdjusts element position withoutchanging layout (leaves the spacefor the element where it shouldhave been when not beingpositoned).z‐index property applies.

.box­2 position: relative; top: ­40px; left: 40px;

Page 39: CSS For Backend Developers

POSITON: ABSOLUTEDoes not leave the space for theelement.Positions element at a specifiedposition relative to its closestrelative positioned ancestor or tothe containing block.z‐index property applies.

.box­2 position: absolute; top: 0; left: ­100px;

Page 40: CSS For Backend Developers

POSITON: FIXEDDoes not leave the space for theelement.Positions element at a specifiedposition relative to the viewport.z‐index property applies.

.box­2 position: fixed; top: 0; left: 10px;

Page 41: CSS For Backend Developers

FLOAT

The float CSS property specifies that an element should be takenfrom the normal flow and placed along the left or right side of itscontainer, where text and inline elements will wrap around it.

‐‐ MDN (https://developer.mozilla.org/en/docs/Web/CSS/float)

Page 42: CSS For Backend Developers

HOW FLOATS WORK

Page 43: CSS For Backend Developers

CLEARING FLOATSUsing clear: both on containing div or in an empty div added afterfloating elements (old technique).Make a container of floating elements a new

:Float the element.Set the container overflow value other than visibleSet display to inline‐block, inline‐table, table‐cell or table‐caption.Set position to something other than static or relative

Block Formatting Context(https://www.w3.org/TR/css3‐box/#block‐level0)

...but every one of these solutions cause problems!

Page 44: CSS For Backend Developers

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 usingCSS generated content (:after)

‐‐ Understanding humble clearfix(http://fuseinteractive.ca/blog/understanding‐humble‐clearfix)

Page 45: CSS For Backend Developers

READ MORE

"hack" byNicolas Gallagher

Understanding humble clearfix(http://fuseinteractive.ca/blog/understanding‐humble‐clearfix)Micro clearfix (http://nicolasgallagher.com/micro‐clearfix‐hack/)

Page 46: CSS For Backend Developers

SIZING UNITS

Page 47: CSS For Backend Developers

CSS SIZING UNITSpxem%excmmminptpc

chremvhvwvminvmax

Page 48: CSS For Backend Developers

GOOD OL' PIXELS

Pixels have always been the faithful servant of designers. A pixelrepresents something finite, controllable, reliable. These valuesmake it uniquely suitable for communicating lengths indocumentation and providing unequivocal feedback to developers,“That padding needs to be 11px, it’s 10px at the minute”.

‐‐ Ben Frain (https://benfrain.com/just‐use‐pixels/)

Page 49: CSS For Backend Developers

USING PIXELSPROS

Editing code is morestraightforward (trying to be 'pixel‐perfect').No problems with compoundingissues (like with ems).

CONS

Some time ago there was a

onIE.

They're less flexible than ems/rems.

zoomissue(http://clagnut.com/blog/348/)

For responsive pages, px‐basedmedia queries change the pageexperience with zooming.(http://blog.cloudfour.com/the‐ems‐have‐it‐proportional‐media‐queries‐ftw/)

Page 50: CSS For Backend Developers

EMS AND COMPOUNDINGem is a relative unit based on parent font‐size.

If 1em = 16px then 1.5em = 24px

I'm grandpa

I'm dad

I'm son

.grandpa font­size: 1.5em;

.dad font­size: 1.5em;

.son font­size: 1.5em;

Page 51: CSS For Backend Developers

REMS

In the case of rem units, however, the font‐size is dependent on thevalue of the root element (or the html element).

‐‐ CSS‐Tricks Almanac (https://css‐tricks.com/almanac/properties/f/font‐size/)

Page 52: CSS For Backend Developers

SIZING FONTS USING REMS

<div class="outer"> <h1>Heading</h1> <p>I'm an outer section content.</p>

<div class="inner"> <h1>Inner heading</h1> <p>I'm an inner section content.</p> </div></div>

html font­size: 16px;

.outer font­size: 1.5rem; /* 1.5 * 16px = 24px */

.inner font­size: 2rem; /* 2 * 16px = 32px */

Page 53: CSS For Backend Developers

RESOURCES

by Jonathan Snook

by Jeremy Church by Ben Frain

by RomanRudenko

Font size with rem (http://snook.ca/archives/html_and_css/font‐size‐with‐rem)Font size on CSS‐Tricks Almanac (https://css‐tricks.com/almanac/properties/f/font‐size/)Confused about rem and em? (https://j.eremy.net/confused‐about‐rem‐and‐em/)Just use pixels (https://benfrain.com/just‐use‐pixels/)There’s more to the CSS rem unit than font sizing (https://css‐tricks.com/theres‐more‐to‐the‐css‐rem‐unit‐than‐font‐sizing/)

Page 54: CSS For Backend Developers

RESPONSIVE WEB DESIGN

Page 55: CSS For Backend Developers

MAKE YOUR WEBSITE LOOK GREAT ON ALLDEVICES

source: johnpolacek.github.io(http://johnpolacek.github.io/scrolldeck.js/decks/responsive/)

Page 56: CSS For Backend Developers

VIEWPORT META TAG

A typical mobile‐optimized site contains something like thefollowing:

The width property controls the size of the viewport. It can be setto a specific number of pixels like width=600 or to the special valuedevice‐width value which is the width of the screen in CSS pixelsat a scale of 100%. (...)

The initial‐scale property controls the zoom level when thepage is first loaded.

‐‐

<meta name="viewport" content="width=device­width, initial­scale=1">

MDN(https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag)

Page 57: CSS For Backend Developers

(https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag)

MEDIA QUERIESThey help us build stylesheets for different screen resolutions

Examples:

@media screen and (max­width: 768px) .class ...

@media screen and (min­width: 60em) .class1 ...

@media screen and (orientation: landscape) and (­webkit­min­device­pixel­ratio: 2) .class2 ...

Using media queries (https://developer.mozilla.org/en‐US/docs/Web/CSS/Media_Queries/Using_media_queries)

Page 58: CSS For Backend Developers

MOBILE FIRSTWHY?

Mobile Web usage is increasing.Overloading mobile devices with too much information (it's a pain for users with lowbandwidth).Progressive enhancement(https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhancement)

HOW?

.mobile­first­component display: none;

@media screen and (min­width: 992px) .mobile­first­component width: 50%;

@media screen and (min­width: 1200px) .mobile­first­component width: 100%;

Page 59: CSS For Backend Developers

QUESTIONS?

Page 60: CSS For Backend Developers

THANKS FOR LISTENING!

WANT MORE?

‐ check browser compatibility for CSSproperties 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/)