If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
1. CSS Best Practices, Style
Guide, and Tips
#ITDEVCON
Chris Love
http://love2dev.com
@ChrisLove
2. Who Am I?
⢠ASP.NET MVP
⢠ASP Insider
⢠MS Edge User Agent
⢠Author
⢠Speaker
⢠Tweaker, Lover of Web, JavaScript, CSS & HTML5
⢠@ChrisLove
⢠Love2Dev.com
#ITDEVCON
3. High Performance Single Page Web Applications
⢠Responsive Design
⢠Touch
⢠Mobile First
⢠SPA
⢠Extensible, Scalable Architecture
⢠Web Build and Workflow
⢠Goes Really Fast!
⢠~395 Pages
⢠20 Chapters
⢠$9.99
#ITDEVCON
6. CSS
.main-content {
overflow: hidden;
left: 6.3166666%;
right: 0;
top: 50px;
bottom: 4.166666%;
position: absolute;
border-radius: 5px 5px 0 0;
background-color: #000000;
-moz-transition: all 700ms ease-out;
-o-transition: all 700ms ease-out;
-webkit-transition: all 700ms ease-out;
transition: all 700ms ease-out;
}
#ITDEVCON
Selector/Rule
Properties
Vendor Specific
7. CSS
â˘Rules
⢠Defined using selector syntax
â˘Properties
⢠The specifics
â˘Media Queries
⢠Define Rules Based on Browser & Device Characteristics
#ITDEVCON
8. CSS Property Units
â˘px â pixels
â˘% - percent
â˘em â relative to the elementâs font-size
â˘rem â Relative to the root elementâs font-size
â˘vh/vw â Viewport Height/Viewport Width
â˘Any 0 does not require a unit
#ITDEVCON
9. CSS Selector Syntax
⢠Element
⢠H1, DIV, P
⢠Class
⢠.btn, . spa-child-view
⢠ID
⢠#tryToAvoid
#ITDEVCON
10. Advanced CSS Selector Syntax
⢠Nested Selectors
⢠Allows You To Apply Rules to Children of Matched Elements
⢠.main-content p
⢠Be careful to avoid complexity
⢠Dynamic By Attributes
⢠script[class='spa-view']
#ITDEVCON
17. psuedo-classes
⢠Define CSS Rules for Element States
⢠Hover
⢠Active
⢠Define Rules for hidden elements
⢠:before, :after
⢠Define Rules for nth Element
⢠:nth-of-type(3n)
18. Content Property
⢠Defines âtextâ value for matched element
⢠Useful with :before and :after pseudo element
19. Responsive Table Trick
⢠Tables Create a Unique Responsive Design Problem
⢠Change CSS To Change Rendering Rules
⢠Turn Table into a fake set of DIVs
⢠Leverage content property to define value labels
⢠https://css-tricks.com/responsive-data-tables/
24. CSS Selector Specificity
⢠Complex Specificity
⢠.main-content > article #myArticleId p
⢠Leads to large CSS files
⢠Makes Code Unmanageable
⢠Lower the Score the Better
⢠Browsers Parse Selectors Right to Left
⢠* Avoid Universal Selector
25. Right-Left Rule
⢠.main-content > article #myArticleId p
⢠Translates to:
⢠#myArticleId p
⢠Think More Like the Browser When Defining Selectors
26. Calculate CSS Specificity
⢠Count the Inline Style
⢠count the number of ID selectors in the selector (= a)
⢠count the number of class selectors, attributes selectors, and pseudo-
classes in the selector (= b)
⢠count the number of type selectors and pseudo-elements in the
selector (= c)
⢠ignore the universal selector
31. CSS Cascading
⢠Last, Most Specific Rule Wins
⢠Be mindful of your CSS Definition Order
⢠Overwrites Previously Defined Rules
⢠Simple rule make this easy to maintain and create
32. Responsive Design
âthis unspoken agreement to pretend that we had a certain size. And that size
changed over the years. For a while, we all sort of tacitly agreed that 640 by 480
was the right size, and then later than changed to 800:600, and 1024; we seem
to have settled on this 960 pixel as being this like, default. Itâs still unknown. We
still donât know the size of the browser; itâs just like this consensual
hallucination that weâve all agreed to participate in: âLetâs assume the browser
has a browser width of at least 960 pixels.â
Jeremy Keith
bit.ly/1bhH6rw
34. Responsive Web Design
⢠Introduced by Ethan Marcotte 2010 -
bit.ly/178an9e
⢠Web Design Approach To Create An Optimal
Viewing Experience Across All Browser ViewPorts
⢠Fluid Layouts
⢠Media Queries
⢠Minimal if any JavaScript Required
35. Fluid Layout
⢠Stretch as the Browser ViewPort Changes
⢠Browserâs Viewable Area Inside the Chrome
⢠Serve as the Foundation for the Web Application
Layout
⢠Great Way To Create Native Like Experience
38. Avoid Embedded Styles
⢠Don't separate content from design
⢠Cause more maintenance headaches
⢠Make your pages larger
⢠Do not take advantage of Http Caching
⢠Lead to Duplicate Rules
39. CSS - Files
⢠Should
⢠Use External Files
⢠Hosted on a CDN
⢠Bundled & Minified *
⢠HTTP/2 Changes the Bundling Rule
40. CSS â Debug Files
⢠Should
⢠Use Many Files
⢠They Should Correlate to a Purpose
⢠View
⢠Component
⢠Layout
42. CSS Best Practices
⢠Link to External Files in the HEAD
⢠Ensures CSS read before HTML
⢠Avoid Using @import
⢠Causes CSS to be Parsed After Document
43. CSS Reset
⢠Establishes a Common Base
⢠Each Browser has a default CSS stylesheet
⢠Many Resets Availble
⢠Normalize.css probably most popular
⢠Popular libraries have resets; ex bootstrap uses normalize
44. CSS Libraries
⢠Many Available
⢠Bootstrap is the current defacto standard
⢠Primer based on Boostrap
⢠Created by bootstrap author
⢠GitHubâs internal library
⢠https://github.com/primer/primer
45. CSS Libraries
⢠Be Careful to not be Completely Dependent on Library
⢠Understand How CSS Rules, Apply Best Practices
⢠Build Your Own Custom Version
⢠Grunt/Gulp
46. Critical CSS
⢠The CSS Required to Render The Above the Fold Content
⢠Embed Inline, in HEAD element
⢠Instant Render if HTML < 14kb
⢠Works great for a SPA
⢠criticalCSS Node Module
⢠https://www.npmjs.com/package/criticalcss
47. Critical CSS Grunt
grunt.initConfig({
criticalcss: {
custom: {
options: {
url: "http://localhost:4000",
width: 1200,
height: 900,
outputfile: "dist/critical.css",
filename: "/path/to/local/all.css", // Using path.resolve( path.join( ... ) ) is a good idea here
buffer: 800*1024,
ignoreConsole: false
}
}
},
});
50. CSS Rule Formatting
⢠Use one discrete selector per line in multi-selector rulesets.
⢠Include a single space before the opening brace of a
ruleset.
⢠Include one declaration per line in a declaration block.
⢠Use one level of indentation for each declaration.
⢠Include a single space after the colon of a declaration.
51. CSS Rule Formatting
⢠Use lowercase and shorthand hex values, e.g., `#aaa`.
⢠Use single or double quotes consistently. Preference is for
double quotes, e.g., `content: ""`.
⢠Quote attribute values in selectors, e.g.,
`input[type="checkbox"]`.
⢠_Where allowed_, avoid specifying units for zero-values,
e.g., `margin: 0`.
52. CSS Rule Formatting
⢠Include a space after each comma in comma-separated
property or function values.
⢠Include a semi-colon at the end of the last declaration in a
declaration block.
⢠Place the closing brace of a ruleset in the same column as
the first character of the ruleset.
⢠Separate each ruleset by a blank line.
58. CSS Animations
⢠Do Not Use JavaScript Libraries for Animations
⢠CSS Animations are Native
⢠Run on the GPU
59. CSS Key-Frame Animations
⢠Allow You To Define Complex Animations
⢠Define Rules/Properties Along a Timeline
⢠Animate.css is a collection of turn-key animations
⢠http://daneden.me/animate
60. CSS Key-Frame Animations
⢠Can be Applied by adding and removing CSS classes on
an element
loginDlg.classList.add("fadeInDown");
showLogin.classList.add("fadeOut");
loginDlg.classList.remove("fadeOutUp");
61. CSS Key-Frame Animations
⢠Can be Applied by adding and removing CSS classes on
an element
loginDlg.classList.add("fadeInDown");
showLogin.classList.add("fadeOut");
loginDlg.classList.remove("fadeOutUp");
⢠http://bit.ly/1Lt1kTb
62. CSS Shapes
⢠CSS Can be Used to Create All Sorts of Shapes
⢠http://www.cssshapes.com/
63. Create a CSS Heart
⢠My Siteâs Logo is a CSS Heart
⢠Here is how to create it:
⢠http://bit.ly/1NF3Sjf
64. Perfectly Align to Center
.my-class-parent {
position:relative;
}
.my-class {
position:absolute;
top:50%;
left:50%;
-webkit-transform:translate(-50%, -50%);
transform:translate(-50%, -50%);
}
65. High Performance Single Page Web
Applications
⢠Responsive Design
⢠Touch
⢠Mobile First
⢠SPA
⢠Extensible, Scalable Architecture
⢠Web Build and Workflow
⢠Goes Really Fast!
⢠~395 Pages
⢠20 Chapters
⢠$9.99