CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStart
0 likes125 views
The document provides an overview of advanced CSS techniques and best practices, emphasizing the latest features in CSS3. Key recommendations include organizing CSS code, using modern layout systems, and implementing responsive design for various devices. The presenter, Scott Deloach, shares insights from his extensive experience in web development and offers resources for further learning.
![© 2018 ClickStart – www.clickstart.net
calc() function
:root { --fontSize: 1rem; }
h6 { font-size: calc(var(--fontSize) * 2); }
Responsive design
display:grid
.wrapper { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit,
9rem); grid-template-rows: repeat(2, 12rem); }
.wrapper div { background-color: green; color: white; border-radius: 6px; font-size:
10rem; text-align: center; }
<div class="wrapper">
<div>1</div>
<div>2</div>
<div>3</div>
</div>
system-ui font
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; }
Link target formatting
*:target { background-color: yellow; }
Responsive images
img {
min-height : auto; min-width : 480px; /* max width of mobile medium */
max-height : auto;
max-width : 100%;
}
Responsive tables
/* 47.9375em mobile landscape max width */
@media (max-width: 47.9375em) {
table { display: block; width: 100%; }
table caption { display: block; }
table thead { display: none; visibility: hidden; }
table tbody, table tr, table th, table td { border: 0; display: block; text-align:
left; }
table th[data-title]:before, table td[data-title]:before { content: attr(data-
title) ": "; font-weight: bold; }
table td:empty { display: none; }
}
What's next
▪ Breaks - spread, column, region
▪ Case insensitivity — p[class$="example" i] { }](https://image.slidesharecdn.com/deloachcssbestpracticesstcchicago2018-200724205340/85/CSS-Best-Practices-tcworld-2018-Scott-DeLoach-ClickStart-3-320.jpg)
CSS Best Practices - tcworld 2018, Scott DeLoach, ClickStart
- 1. © 2018 ClickStart – www.clickstart.net CSS Best Practices Scott DeLoach – [email protected] ClickStart – www.clickstart.net During this presentation, I will discuss advanced CSS techniques with an emphasis on what’s new in CSS3. Ten CSS best practices ▪ Do not use inline formatting ▪ Organize definitions and use a naming convention ▪ Add comments ▪ Use a reset/normalize stylesheet - meyerweb.com/eric/tools/css/reset or necolas.github.io/normalize.css ▪ Use an auto-prefixer to support old browsers and new features ▪ Use DRY ("Don't Repeat Yourself") techniques ▪ Make selectors as specific as possible ▪ Remove unused CSS rules ▪ Test in multiple browsers on multiple devices ▪ Keep learning What’s new in CSS ▪ ::grammar-error pseudo element ▪ ::spelling-error pseudo element ▪ :fullscreen (aka full-screen) pseudo class ▪ :target pseudo class and scroll-snap property ▪ calc() function ▪ @supports rule ▪ variables Browser compatibility Auto prefixing leaverou.github.io/prefixfree github.com/ai/autoprefixer Detect HTML, CSS, and JavaScript features www.modernizr.com Research CSS support in browsers www.caniuse.com IE compatibility www.selectivizr.com github.com/postcss/postcss
- 2. © 2018 ClickStart – www.clickstart.net DRY coding “Don’t repeat yourself.” Grouping selectors h1, h2, h3, h4, h5, h6 { color: green; } rems measurement unit ul { font-size: .9rem; } Code samples — Prism www.prismjs.com Google Material Design <link href="https://fonts.googleapis.com/icon?family=Material+Icons" /> <i class="material-icons">face</i> See www.google.com/design/spec/material-design/introduction.html Font Awesome <link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet" crossorigin="anonymous" /> <i class="fas fa-print fa-3x"></i> Variables Variables :root { --main-bg-color: orange; } .exBox { background-color: var(--main-bg-color); color: white; } .exText { background-color: var(--main-bg-color); color: white; } See also SASS - http://sass-lang.com LESS - http://lesscss.org currentColor variable p.example a { text-decoration: none; color: currentcolor; border-bottom: 1px dashed currentcolor; }
- 3. © 2018 ClickStart – www.clickstart.net calc() function :root { --fontSize: 1rem; } h6 { font-size: calc(var(--fontSize) * 2); } Responsive design display:grid .wrapper { display: grid; grid-gap: 20px; grid-template-columns: repeat(auto-fit, 9rem); grid-template-rows: repeat(2, 12rem); } .wrapper div { background-color: green; color: white; border-radius: 6px; font-size: 10rem; text-align: center; } <div class="wrapper"> <div>1</div> <div>2</div> <div>3</div> </div> system-ui font body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } Link target formatting *:target { background-color: yellow; } Responsive images img { min-height : auto; min-width : 480px; /* max width of mobile medium */ max-height : auto; max-width : 100%; } Responsive tables /* 47.9375em mobile landscape max width */ @media (max-width: 47.9375em) { table { display: block; width: 100%; } table caption { display: block; } table thead { display: none; visibility: hidden; } table tbody, table tr, table th, table td { border: 0; display: block; text-align: left; } table th[data-title]:before, table td[data-title]:before { content: attr(data- title) ": "; font-weight: bold; } table td:empty { display: none; } } What's next ▪ Breaks - spread, column, region ▪ Case insensitivity — p[class$="example" i] { }
- 4. © 2018 ClickStart – www.clickstart.net ▪ Colors — gray(), color(), HWB ▪ Float — inline-start, inline-end, defer, reference, offset ▪ Ligatures and kerning ▪ Media queries — display size, color depth, aspect ratio ▪ Overflow — fade, fragment formatting ▪ Nesting ▪ Pseudo classes — :blank, :empty, and :has ▪ revert keyword ▪ Selectors — custom and parent www.w3.org/Style/CSS/current-work Tracking CSS developments ▪ w3.org/style/css/current-work ▪ ishoudinireadyyet.com Where to find CSS examples ▪ codepad.co ▪ codepen.com ▪ css-tricks.com ▪ cssdeck.com ▪ lea.verou.me ▪ littlesnippets.net About the presenter Scott DeLoach is the Founder of ClickStart, where he provides training and consulting for MadCap Flare, embedded user assistance, JavaScript/jQuery, CSS, and HTML5. He has been developing browser-based help systems for 20 years, and he has received four Best in Show awards for his work from STC. Scott is a certified Flare and Doc-to-Help instructor, and he is the author of MadCap Flare: The Definitive Guide, CSS to the Point, and HTML5 to the Point. For more information about Scott's books, training, or consulting, see www.clickstart.net.