Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
CSS Best Practices, Style
Guide, and Tips
#ITDEVCON
Chris Love
http://love2dev.com
@ChrisLove
Who Am I?
• ASP.NET MVP
• ASP Insider
• MS Edge User Agent
• Author
• Speaker
• Tweaker, Lover of Web, JavaScript, CSS & H...
High Performance Single Page Web Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Arch...
Slide Decks & Source Code
• Slide Deck – http://slidesha.re/19NZInK
• Source Code – http://GitHub.com/docluv
#ITDEVCON
CSS
• Language Defining Rendering Rules
#ITDEVCON
CSS
.main-content {
overflow: hidden;
left: 6.3166666%;
right: 0;
top: 50px;
bottom: 4.166666%;
position: absolute;
border...
CSS
•Rules
• Defined using selector syntax
•Properties
• The specifics
•Media Queries
• Define Rules Based on Browser & De...
CSS Property Units
•px – pixels
•% - percent
•em – relative to the element’s font-size
•rem – Relative to the root element...
CSS Selector Syntax
• Element
• H1, DIV, P
• Class
• .btn, . spa-child-view
• ID
• #tryToAvoid
#ITDEVCON
Advanced CSS Selector Syntax
• Nested Selectors
• Allows You To Apply Rules to Children of Matched Elements
• .main-conten...
By Attribute/type
input[type="email"] {
color:blue;
}
#ITDEVCON
Starts With
[class^="my-class-"] {
color:red;
}
#ITDEVCON
Ends With
[class$=“-my-class"] {
color:red;
}
#ITDEVCON
Contains
[class*="class"] {
color:red;
}
#ITDEVCON
Customize Social Links
a[href*="twitter.com"] { color:#55acee; }
a[href*="facebook.com"] { color:#3b5998; }
a[href*="googl...
Remove webkit Input Border
input[type="text"]:focus { outline: none; }
#ITDEVCON
psuedo-classes
• Define CSS Rules for Element States
• Hover
• Active
• Define Rules for hidden elements
• :before, :after...
Content Property
• Defines ‘text’ value for matched element
• Useful with :before and :after pseudo element
Responsive Table Trick
• Tables Create a Unique Responsive Design Problem
• Change CSS To Change Rendering Rules
• Turn Ta...
#ITDEVCON
Responsive Table Trick
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Job Title</th>
</tr>
</thead>
<tbod...
Responsive Table Trick
@media only screen and (max-width: 760px),
(min-device-width: 768px) and (max-device-width: 1024px)...
Responsive Table Trick
td:nth-of-type(1):before { content: "First Name"; }
td:nth-of-type(2):before { content: "Last Name"...
CSS Selector Specificity
• Complex Specificity
• .main-content > article #myArticleId p
• Leads to large CSS files
• Makes...
Right-Left Rule
• .main-content > article #myArticleId p
• Translates to:
• #myArticleId p
• Think More Like the Browser W...
Calculate CSS Specificity
• Count the Inline Style
• count the number of ID selectors in the selector (= a)
• count the nu...
Calculate CSS Specificity
http://specificity.keegan.st/
BEM Naming Convention
• Block
• Element
• Modifier
• Bootstrap and Primer Good Examples
BEM Naming Convention
• .btn {…}
• .btn-primary {…}
• .btn-primary:disabled {…}
• .btn-xs {…}
• Might also see __ between ...
BEM Naming Convention
• <button type="button" class="btn btn-primary">Primary</button>
• <button type="button" class="btn ...
CSS Cascading
• Last, Most Specific Rule Wins
• Be mindful of your CSS Definition Order
• Overwrites Previously Defined Ru...
Responsive Design
“this unspoken agreement to pretend that we had a certain size. And that size
changed over the years. Fo...
Responsive Web Design
#ITDEVCON
Responsive Web Design
• Introduced by Ethan Marcotte 2010 -
bit.ly/178an9e
• Web Design Approach To Create An Optimal
View...
Fluid Layout
• Stretch as the Browser ViewPort Changes
• Browser’s Viewable Area Inside the Chrome
• Serve as the Foundati...
Fluid Layout
• Leverage Absolute Positioning
• Enables Fixed Positioning Without position:fixed
• Leverage overflow scroll...
Media Queries
@media (min-width: 600px) {
/* Selectors & Rules */
}
@media (min-width: 820px) {
/* Selectors & Rules */
}
...
Avoid Embedded Styles
• Don't separate content from design
• Cause more maintenance headaches
• Make your pages larger
• D...
CSS - Files
• Should
• Use External Files
• Hosted on a CDN
• Bundled & Minified *
• HTTP/2 Changes the Bundling Rule
CSS – Debug Files
• Should
• Use Many Files
• They Should Correlate to a Purpose
• View
• Component
• Layout
CSS –Files
css/
site.min.css
/dev
/libs
/ui
/views
CSS Best Practices
• Link to External Files in the HEAD
• Ensures CSS read before HTML
• Avoid Using @import
• Causes CSS ...
CSS Reset
• Establishes a Common Base
• Each Browser has a default CSS stylesheet
• Many Resets Availble
• Normalize.css p...
CSS Libraries
• Many Available
• Bootstrap is the current defacto standard
• Primer based on Boostrap
• Created by bootstr...
CSS Libraries
• Be Careful to not be Completely Dependent on Library
• Understand How CSS Rules, Apply Best Practices
• Bu...
Critical CSS
• The CSS Required to Render The Above the Fold Content
• Embed Inline, in HEAD element
• Instant Render if H...
Critical CSS Grunt
grunt.initConfig({
criticalcss: {
custom: {
options: {
url: "http://localhost:4000",
width: 1200,
heigh...
UnCSS Grunt
uncss: {
dist: {
src: ['app/index.html'],
dest: 'app/css/tidy.css',
options: {
report: 'min'
}
}
}
https://www...
CSS Code Style
• Define Section Titles
/*------------------------------------*
$MAIN
*------------------------------------...
CSS Rule Formatting
• Use one discrete selector per line in multi-selector rulesets.
• Include a single space before the o...
CSS Rule Formatting
• Use lowercase and shorthand hex values, e.g., `#aaa`.
• Use single or double quotes consistently. Pr...
CSS Rule Formatting
• Include a space after each comma in comma-separated
property or function values.
• Include a semi-co...
Rule Formatting Example
.selector-1,
.selector-2,
.selector-3[type="text"] {
-webkit-box-sizing: border-box;
-moz-box-sizi...
Consistently Declare Property Order
• Makes it Easier to Read
• Makes it Easier for Teams to Share Code
Consistently Declare Property Order
.selector {
/* Positioning */
position: absolute;
z-index: 10;
top: 0;
right: 0;
botto...
Clock-Wise Rule
• Margin & Padding Work Clock-wise around the element
• margin: 5% 10% 15% 20%;
• margin-top : 5%;
• margi...
Element Layout Box
CSS Animations
• Do Not Use JavaScript Libraries for Animations
• CSS Animations are Native
• Run on the GPU
CSS Key-Frame Animations
• Allow You To Define Complex Animations
• Define Rules/Properties Along a Timeline
• Animate.css...
CSS Key-Frame Animations
• Can be Applied by adding and removing CSS classes on
an element
loginDlg.classList.add("fadeInD...
CSS Key-Frame Animations
• Can be Applied by adding and removing CSS classes on
an element
loginDlg.classList.add("fadeInD...
CSS Shapes
• CSS Can be Used to Create All Sorts of Shapes
• http://www.cssshapes.com/
Create a CSS Heart
• My Site’s Logo is a CSS Heart
• Here is how to create it:
• http://bit.ly/1NF3Sjf
Perfectly Align to Center
.my-class-parent {
position:relative;
}
.my-class {
position:absolute;
top:50%;
left:50%;
-webki...
High Performance Single Page Web
Applications
• Responsive Design
• Touch
• Mobile First
• SPA
• Extensible, Scalable Arch...
Prochain SlideShare
Chargement dans…5
×

Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892

112 vues

Publié le

Css Information

Publié dans : Technologie
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Cssbestpracticesjstyleguidejandtips 150830184202-lva1-app6892

  1. 1. CSS Best Practices, Style Guide, and Tips #ITDEVCON Chris Love http://love2dev.com @ChrisLove
  2. 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. 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
  4. 4. Slide Decks & Source Code • Slide Deck – http://slidesha.re/19NZInK • Source Code – http://GitHub.com/docluv #ITDEVCON
  5. 5. CSS • Language Defining Rendering Rules #ITDEVCON
  6. 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. 7. CSS •Rules • Defined using selector syntax •Properties • The specifics •Media Queries • Define Rules Based on Browser & Device Characteristics #ITDEVCON
  8. 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. 9. CSS Selector Syntax • Element • H1, DIV, P • Class • .btn, . spa-child-view • ID • #tryToAvoid #ITDEVCON
  10. 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
  11. 11. By Attribute/type input[type="email"] { color:blue; } #ITDEVCON
  12. 12. Starts With [class^="my-class-"] { color:red; } #ITDEVCON
  13. 13. Ends With [class$=“-my-class"] { color:red; } #ITDEVCON
  14. 14. Contains [class*="class"] { color:red; } #ITDEVCON
  15. 15. Customize Social Links a[href*="twitter.com"] { color:#55acee; } a[href*="facebook.com"] { color:#3b5998; } a[href*="google.com"] { color:#db4437; } #ITDEVCON
  16. 16. Remove webkit Input Border input[type="text"]:focus { outline: none; } #ITDEVCON
  17. 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. 18. Content Property • Defines ‘text’ value for matched element • Useful with :before and :after pseudo element
  19. 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/
  20. 20. #ITDEVCON
  21. 21. Responsive Table Trick <table> <thead> <tr> <th>First Name</th> <th>Last Name</th> <th>Job Title</th> </tr> </thead> <tbody> <tr> <td>James</td> <td>Matman</td> <td>Chief Sandwich Eater</td> </tr> <tr> <td>The</td> <td>Tick</td> <td>Crimefighter Sorta</td> </tr> </tbody> </table>
  22. 22. Responsive Table Trick @media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) { table, thead, tbody, th, td, tr { display: block; } } #ITDEVCON
  23. 23. Responsive Table Trick td:nth-of-type(1):before { content: "First Name"; } td:nth-of-type(2):before { content: "Last Name"; } td:nth-of-type(3):before { content: "Job Title"; } td:nth-of-type(4):before { content: "Favorite Color"; } td:nth-of-type(5):before { content: "Wars of Trek?"; } td:nth-of-type(6):before { content: "Porn Name"; } td:nth-of-type(7):before { content: "Date of Birth"; } td:nth-of-type(8):before { content: "Dream Vacation City"; } td:nth-of-type(9):before { content: "GPA"; } td:nth-of-type(10):before { content: "Arbitrary Data"; }
  24. 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. 25. Right-Left Rule • .main-content > article #myArticleId p • Translates to: • #myArticleId p • Think More Like the Browser When Defining Selectors
  26. 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
  27. 27. Calculate CSS Specificity http://specificity.keegan.st/
  28. 28. BEM Naming Convention • Block • Element • Modifier • Bootstrap and Primer Good Examples
  29. 29. BEM Naming Convention • .btn {…} • .btn-primary {…} • .btn-primary:disabled {…} • .btn-xs {…} • Might also see __ between words
  30. 30. BEM Naming Convention • <button type="button" class="btn btn-primary">Primary</button> • <button type="button" class="btn btn-success">Success</button> • <button type="button" class="btn btn-info">Info</button> • <button type="button" class="btn btn-warning">Warning</button>
  31. 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. 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
  33. 33. Responsive Web Design #ITDEVCON
  34. 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. 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
  36. 36. Fluid Layout • Leverage Absolute Positioning • Enables Fixed Positioning Without position:fixed • Leverage overflow scrolling
  37. 37. Media Queries @media (min-width: 600px) { /* Selectors & Rules */ } @media (min-width: 820px) { /* Selectors & Rules */ } @media (min-width: 1080px) { /* Selectors & Rules */ }
  38. 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. 39. CSS - Files • Should • Use External Files • Hosted on a CDN • Bundled & Minified * • HTTP/2 Changes the Bundling Rule
  40. 40. CSS – Debug Files • Should • Use Many Files • They Should Correlate to a Purpose • View • Component • Layout
  41. 41. CSS –Files css/ site.min.css /dev /libs /ui /views
  42. 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. 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. 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. 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. 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. 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 } } }, });
  48. 48. UnCSS Grunt uncss: { dist: { src: ['app/index.html'], dest: 'app/css/tidy.css', options: { report: 'min' } } } https://www.npmjs.com/package/grunt-uncss
  49. 49. CSS Code Style • Define Section Titles /*------------------------------------* $MAIN *------------------------------------*/
  50. 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. 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. 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.
  53. 53. Rule Formatting Example .selector-1, .selector-2, .selector-3[type="text"] { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; display: block; font-family: helvetica, arial, sans-serif; color: #333; background: #fff; background: linear-gradient(#fff, rgba(0, 0, 0, 0.8)); }
  54. 54. Consistently Declare Property Order • Makes it Easier to Read • Makes it Easier for Teams to Share Code
  55. 55. Consistently Declare Property Order .selector { /* Positioning */ position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0;   /* Display & Box Model */ display: inline-block; overflow: hidden; box-sizing: border-box; width: 100px; height: 100px; padding: 10px; border: 10px solid #333; margin: 10px;   /* Other */ background: #000; color: #fff; font-family: sans-serif; font-size: 16px; text-align: right; }
  56. 56. Clock-Wise Rule • Margin & Padding Work Clock-wise around the element • margin: 5% 10% 15% 20%; • margin-top : 5%; • margin-right : 10%; • margin-bottom : 15%; • margin-left : 20%;
  57. 57. Element Layout Box
  58. 58. CSS Animations • Do Not Use JavaScript Libraries for Animations • CSS Animations are Native • Run on the GPU
  59. 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. 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. 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. 62. CSS Shapes • CSS Can be Used to Create All Sorts of Shapes • http://www.cssshapes.com/
  63. 63. Create a CSS Heart • My Site’s Logo is a CSS Heart • Here is how to create it: • http://bit.ly/1NF3Sjf
  64. 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. 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

×