CSS For Backend Developers

CSS FOR
BACKEND DEVSCreated by / Marta Sztybor (http://martasztybor.pl) @sztyborek (http://twitter.com/sztyborek)

IF YOU'VE EVER FELT LIKE THIS WHILE
EDITING CSS...

HTML SEMANTICS!
Semantic HTML is the use of HTML markup to reinforce the
semantics, or meaning, of the information in webpages and web
applications 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 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/)

AND HERE IS WHERE THE PARTY
BEGINS!

Cascade, specificity & inheritance
Box model
Display property
Positioning & floats
Responsive web design

CSS RULES' WARS
Cascading
Inheritance
Specificity

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

INHERITANCE (VS CASCADE)
Inheritance is about how properties trickle down from an element to
its children. Certain properties, like font‐family inherit. If you set a
font‐family on the body, that font family will be inherited by all the
elements 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 VALUES
color
font‐family
font‐size
font‐style
font‐variant
font‐weight
font
text‐align
NON-INHERITED VALUES
background
border
display
float
width
height
top, right, bottom, left
margin
padding

SPECIFICITY
SELECTORS SPECIFICITY SORTED FROM LOWEST TO HIGHEST
1. Element and pseudo‐element
div {}
p::after {}

2. Class, pseudo‐class and attribute
.container {}
.listitem:firstchild {}
[href^='https://'] {}

3. IDs
#userschart {}
#mainnav {}

4. Inline styles
<ul style="liststyletype: none"></ul>

Attributes with !important overide even inline styles.

CALCULATING SPECIFICITY
1. For every element or pseudo‐element add 1
0 0 0 1
2. For every class, pseudo‐class or attribute add 10
0 0 1 0
3. For every ID add 100
0 1 0 0
4. For inline style add 1000
1 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 GALACTIC
EMPIRE
(HTTPS://STUFFANDNONSENSE.CO.UK/ARCHIVES
/CSS_SPECIFICITY_WARS.HTML)

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

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 know
what you're gonna get.
‐‐ Forest Gump
CSS is like a box of chocolates. You never know what you're gonna
get.
‐‐ 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!

.boxofchocolates {
width: 300px;
padding: 20px;
border: 1px solid #333;
}

THE SOLUTION
Rendered width = content + padding + border

* {
boxsizing: contentbox;
}

Rendered width = content width

* {
boxsizing: borderbox;
}

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

CSS DISPLAY PROPERTIES
none
inline
block
inline‐block
list‐item
inline‐list‐item
table
inline‐table
table‐cell
table‐column
table‐row
table‐caption
flex
inline‐flex
...

MOST POPULAR DISPLAY PROPERTIES
Left &
right
margins
Top &
bottom
margins
Set height
or width
Force line
break after
vertical‐
align
Inline ✔ ✘ ✘ ✘ ✔
Block ✔ ✔ ✔ ✔ ✘
Inline‐
block
✔ ✔ ✔ ✘ ✔

A SIMPLE GUIDE TO CSS POSITIONING

HAVE YOU EVER WANTED TO DO SOMETHING
LIKE...
BOX 1
...but ended up like
BOX 1
BOX 2
BOX 2

POSITON: STATIC
Default position property.
Element laid out in its current
position in the flow.
z‐index property doesn't apply.

.box {
  width: 200px;
  height: 200px;
  background: #14FFF4;
}

POSITON: RELATIVE
Adjusts element position without
changing layout (leaves the space
for the element where it should
have been when not being
positoned).
z‐index property applies.

.box2 {
  position: relative;
  top: 40px;
  left: 40px;
}

POSITON: ABSOLUTE
Does not leave the space for the
element.
Positions element at a specified
position relative to its closest
relative positioned ancestor or to
the containing block.

.box2 {
  position: absolute;
  top: 0;
  left: 100px;
}

POSITON: FIXED
Does not leave the space for the
element.
Positions element at a specified
position relative to the viewport.

.box2 {
  position: fixed;
  top: 0;
  left: 10px;
}

FLOAT
The float CSS property specifies that an element should be taken
from the normal flow and placed along the left or right side of its
container, where text and inline elements will wrap around it.
‐‐ MDN (https://developer.mozilla.org/en/docs/Web/CSS/float)

CLEARING FLOATS
Using clear: both on containing div or in an empty div added after
floating elements (old technique).
Make a container of floating elements a new
:
Float the element.
Set the container overflow value other than visible
Set 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 using
CSS generated content (:after)
‐‐ Understanding humble clearfix
(http://fuseinteractive.ca/blog/understanding‐humble‐clearfix)

READ MORE
"hack" by
Nicolas Gallagher
Understanding humble clearfix
(http://fuseinteractive.ca/blog/understanding‐humble‐clearfix)
Micro clearfix (http://nicolasgallagher.com/micro‐clearfix‐hack/)

CSS SIZING UNITS
px
em
%
ex
cm
mm
in
pt
pc
ch
rem
vh
vw
vmin
vmax

GOOD OL' PIXELS
Pixels have always been the faithful servant of designers. A pixel
represents something finite, controllable, reliable. These values
make it uniquely suitable for communicating lengths in
documentation 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 PIXELS
PROS
Editing code is more
straightforward (trying to be
'pixel‐perfect').
No problems with compounding
issues (like with ems).
CONS
Some time ago there was a
on
IE.
They're less flexible than ems/rems.
zoom
issue
(http://clagnut.com/blog/348/)
For responsive pages, px‐based
media queries change the page
experience with zooming.
(http://blog.cloudfour.com/the‐
ems‐have‐it‐proportional‐media‐
queries‐ftw/)

EMS AND COMPOUNDING
em 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 {
  fontsize: 1.5em;
}
.dad {
  fontsize: 1.5em;
}
.son {
  fontsize: 1.5em;
}

REMS
In the case of rem units, however, the font‐size is dependent on the
value 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 {
fontsize: 16px;
}
.outer {
fontsize: 1.5rem; /* 1.5 * 16px = 24px
*/
}
.inner {
fontsize: 2rem; /* 2 * 16px = 32px */
}

RESOURCES
by Jonathan Snook
by Jeremy Church
by Ben Frain
by Roman
Rudenko
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/)

MAKE YOUR WEBSITE LOOK GREAT ON ALL
DEVICES
source: johnpolacek.github.io
(http://johnpolacek.github.io/scrolldeck.js/decks/responsive/)

VIEWPORT META TAG
A typical mobile‐optimized site contains something like the
following:
The width property controls the size of the viewport. It can be set
to a specific number of pixels like width=600 or to the special value
device‐width value which is the width of the screen in CSS pixels
at a scale of 100%. (...)
The initial‐scale property controls the zoom level when the
page is first loaded.
‐‐

<meta name="viewport" content="width=devicewidth, initialscale=1">

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

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)

MOBILE FIRST
WHY?
Mobile Web usage is increasing.
Overloading mobile devices with too much information (it's a pain for users wit
bandwidth).
Progressive enhancement
(https://www.w3.org/wiki/Graceful_degradation_versus_progressive_enhance
HOW?

.mobilefirstcomponent {
display: none;
}
@media screen and (minwidth: 992px) {
width: 50%;
}
}
@media screen and (minwidth: 1200px) {
width: 100%;
}
}

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

CSS For Backend Developers

Recommended

More Related Content

What's hot (20)

Similar to CSS For Backend Developers (20)

Recently uploaded (20)

CSS For Backend Developers