CSS For Backend Developers

CSS FOR BACKEND DEVS

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

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

...THIS TALK IS FOR YOU.

LET'S TALK ABOUT BASICS FIRST

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)

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/)

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>

THE SOLUTION

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

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

<footer></footer>

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/)

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/)

AND HERE IS WHERE THE PARTYBEGINS!

Cascade, specificity & inheritanceBox modelDisplay propertyPositioning & floatsResponsive web design

CSS RULES' WARSCascadingInheritanceSpecificity

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

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)

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

NON-INHERITED VALUESbackgroundborderdisplayfloatwidthheighttop, right, bottom, leftmarginpadding

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.

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

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

LEARN CSS SPECIFICITY WITH THE GALACTICEMPIRE

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

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/)

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/)

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

WHAT IS THE MAGICAL BOX MODEL?

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

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;

THE SOLUTION

Rendered width = content + padding + border

* box­sizing: content­box;

Rendered width = content width

* box­sizing: border­box;

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/)

HOW TO DISPLAY?

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

MOST POPULAR DISPLAY PROPERTIES

Left &rightmargins

Top &bottommargins

Set heightor width

Force linebreak after

vertical‐align

Inline Block Inline‐block

A SIMPLE GUIDE TO CSS POSITIONING

HAVE YOU EVER WANTED TO DO SOMETHINGLIKE...

BOX 1...but ended up like

BOX 1

BOX 2

BOX 2

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;

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;

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;

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;

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)

HOW FLOATS WORK

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!

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)

READ MORE

"hack" byNicolas Gallagher

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

SIZING UNITS

CSS SIZING UNITSpxem%excmmminptpc

chremvhvwvminvmax

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/)

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/)

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;

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/)

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 */

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/)

RESPONSIVE WEB DESIGN

MAKE YOUR WEBSITE LOOK GREAT ON ALLDEVICES

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

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)

(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)

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%;

QUESTIONS?

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/)