A few things you need to know about CSS

A few things you need to know about CSS   
  @sheiko

What the heck is CSS anyway?

CSS is a declarative language used for describing look &
feel of a document

MACHINE-READABLE DOCUMENT Data XML, HTML, SVG, …

adding some style Data Look & Feel ? XML, HTML,
SVG, … CSS

XML, HTML, SVG, … HUMAN-READABLE DOCUMENT Data CSS Look &
Feel

The basics

<h1>Hello World</h1>   h1 { color: yellow; font-size: 2.4em; }
HTML CSS OUTPUT Hello World

<h1 class="hello">Hello World</h1>   .hello { color: yellow; font-size: 2.4em;
} HTML CSS OUTPUT Hello World

h1 { color: black; font-size: 2.4em; } rule CSS

h1 { color: black; font-size: 2.4em; } selector declaration CSS

h1 { color: black; font-size: 2.4em; } property value CSS

Selectors

<h1>  <a>  <em>Hello</em>  </a>  </h1> h1 em { color: yellow;
} h1 a em { color: yellow; } h1 a > em { color: yellow; } HTML CSS OUTPUT Hello World

Inheritance

<body>  <h1>  <em>Hello</em>  </h1>  </body> body { color: white; }
h1 { color: yellow; } HTML CSS OUTPUT

<body>  <h1>  <em>Hello</em>  </h1>  </body> body { color: white; }
h1 { color: yellow; } HTML CSS OUTPUT Hello World

Specificity

<h1 class="parent">  <em class="child">  Hello World  </em>  </h1> .parent .child
{ color: white; } h1 em { color: yellow; } HTML CSS OUTPUT

<h1 class="parent">  <em class="child">  Hello World  </em>  </h1> .parent .child
{ color: white; } h1 em { color: yellow; } HTML CSS OUTPUT Hello World

What else you can do with CSS

Turning elements into graphical shapes

<div></div> div{ width: 200px; height: 200px; background: yellow;  } HTML
CSS OUTPUT

<div></div> div{ width: 200px; height: 200px; background: yellow; border-radius: 20px;
} HTML CSS OUTPUT

<div></div> div{ width: 200px; height: 200px; background: yellow; border-radius: 50%;
} HTML CSS OUTPUT

<div></div> div{ width: 0; height: 0; border-width: 200px; border-style: solid;
border-color: transparent; border-top-color: yellow; } HTML CSS OUTPUT

<div></div> div{ width: 0; height: 0; border-width: 200px; border-style: solid;
border-color: transparent; border-top-color: yellow; border-right-color: red; border-bottom-color: white; border-left-color: green; } HTML CSS OUTPUT

Multiple gradients

Complex graphics of a single DIV a.singlediv.com

Animated graphics codepen.io/hakimel/pen/aIhkf

Interactive UI

On :target <div id=“login“ class="login"></div> .login { display: none; }
.login:target { display: block; } HTML CSS OUTPUT

Checkbox hack <label for=“menu-state" /> <input type=“checkbox" id=“menu-state" class=“menu-state"/> <div
class=“menu-view"></div> .menu-view, .menu-state { display: none; } .menu-state:checked + .menu-view { display: block; } HTML CSS

Checkbox hack • Custom Radio Buttons and Checkboxes • Tree
menu • Tabbed areas • Dropdown menus • Push Toggles

What you shall not do with CSS

Avoid CSS inline styles <tr> <td style="padding: 0;"> <p style="margin-top:
10px; line-height: 180%; font-family: Arial, Tahoma; font-size: 12px; color: #868484"> lorem ipsum </p> <p style="background: #EEE; padding: 10px; margin-top: 20px; line- height: 180%; font-family: Arial, Tahoma; font-size: 12px; color: #868484"> lorem ipsum HTML

Do not use IDs for styling BAD <div id="widget">  
<div>   #widget { border: 1px solid #357ebd; } GOOD <div class="widget">   <div>   .widget { border: 1px solid #357ebd; } CSS CSS

Never use !important reactively BAD .toolbar .btn { border: none
!important; } .btn { border: 1px solid #357ebd; width: 200px; }  CSS

Do not override styles, but extend BAD .btn { border:
1px solid #357ebd; width: 200px; }   .toolbar .btn { border: none; } GOOD .btn { width: 200px; }   .btn-outlined { border: 1px solid #357ebd; } CSS CSS

How you shall deal with CSS

Be aware that browsers read selectors from right to left

.feed nav ul li h2 CSS

h2 h2 h2 h2 h2 h2 h2 h2 h2 li
li li li li li li li li li ul ul ul u nav nav CSS

h2 h2 h2 h2 h2 h2 h2 h2 h2 li
li li li li li li li li li ul ul ul u nav nav .feed CSS

.feed nav ul li h2 .feed-heading CSS

Use relative typography

/* Global scope */ html { font-size: 62.5%; /* 10px
*/ } /* Components */ .header { font-size: 1.6rem; } /* scale with components */ h1 { font-size: 2em; } Lorem ipsum Lorem ipsum 16px h1: 32px .header CSS OUTPUT

/* Global scope */ @media (max-width: 960px) { html {
font-size: 56.25%; /*9px*/ } } /* Components */ .header { font-size: 1.6rem; } /* scale with components */ h1 { font-size: 2em; } Lorem ipsum Lorem ipsum 14.4px h1: 28.8px .header CSS OUTPUT

Split your CSS into modules

@import "./main-menu.css"; @import "./panel.css"; MAIN.CSS PANEL.CSS /* Here go style
for panel widget only */ .panel { } BUTTONS.CSS /* Here go styles for any buttons used in the project */ .btn { } @import "./buttons.css";

Thank you!

Dmitry Sheiko dsheiko.com @sheiko https://github.com/dsheiko

A few things you need to know about CSS

A few things you need to know about CSS

More Decks by Dmitry Sheiko

Other Decks in Programming

Featured

Transcript