SlideShare a Scribd company logo
1 of 61
Download to read offline
Hogyan írjunk 
fenntartható CSS-t? 
Hajas Tamás
Hajas Tamás Drupal tanácsadó 
Integral Vision Kft
Egyetlen helyes út!
Egyetlen helyes út NINCS!
Csapat
Csapat » Kommunikáció
Coding Standards
Drupal CSS 
Coding Standards 
https://www.drupal.org/ 
node/1886770
Harry Roberts 
CSS Guidelines 
http://cssguidelin.es
CSS kód formátum 
CSS kód felépítés 
CSS fájl struktúra
CSS kód formátum 
CSS kód felépítés 
CSS fájl struktúra
Kommentáld a kódodat!
Csapat » Kommunikáció
„Ne törd a fejem!”
„a kód magától értetődő 
„kell legyen”
/** 
* Grid container 
* Must only contain '.cell' children. 
*/ 
.grid { 
height: 100%; 
! 
font-size: 0; 
! 
white-space: nowrap; 
}
/** 
* Grid container 
* Must only contain '.cell' children. 
*/ 
.grid { 
height: 100%; 
/* Remove inter-cell whitespace */ 
font-size: 0; 
/* Prevent inline-block cells wrapping */ 
white-space: nowrap; 
}
/** 
* Grid container 
* Must only contain '.cell' children. 
* 1. Remove inter cell whitespace. 
* 2. Prevent inline-block cells wrapping 
*/ 
.grid { 
height: 100%; 
font-size: 0; /* 1 */ 
white-space: nowrap; /* 2 */ 
}
eszközök: 
CSScomb 
.editorconfig
CSS kód formátum 
CSS kód felépítés 
CSS fájl struktúra
Túl 
komplex 
kiválasztó 
CSS problémák 
a HTML struktúra követése 
div.block .title a:link { 
#sidebar-first & { 
.node-19 & {} 
} 
}
”Qualified 
”selectors” 
CSS problémák 
a HTML struktúra követése 
div.block .title a:link { 
#sidebar-first & { 
.node-19 & {} 
} 
}
Környezet 
alapú 
kiválasztás 
CSS problémák 
div.block .title a:link { 
#sidebar-first & { 
.node-19 & {} 
} 
}
Gyermek 
kiválasztók 
túl általános 
class névvel 
CSS problémák 
div.block .title a:link { 
#sidebar-first & { 
.node-19 & {} 
} 
}
„A CSS osztály nevek hasznos 
információt kell szolgáltassanak 
a fejlesztőknek” 
– Nicolas Gallagher 
About HTML Semantics and Front-End Architecture
.red-box {} 
! 
.message--error {}
Az ID 
kiválasztó 
használata 
stílushoz 
CSS problémák 
div.block .title a:link { 
#sidebar-first & { 
.node-19 & {} 
} 
}
Az 
!important 
„felülíró” 
használata 
CSS problémák 
div.block .title a:link { 
#sidebar-first & { 
.node-19 & { 
…!important; 
} 
} 
}
”Keep specificity low!”
Specifikusság példa 
body #content .data img:hover {} 
! 
! 
! 
! 
#content .data img 
:hover body 
0*1000 + 1*100 + 2*10 + 2*1 = 122 
0 1 2 2 » 122
CSS kód formátum 
CSS kód felépítés 
CSS fájl struktúra
SMACSS 
See purecss.io for kind of an implementation
• Base 
SMACSS CSS fájl-struktúra 
ul { 
list-style-type: none; 
padding: 0; 
margin: 0; 
}
• Base 
• Layout 
SMACSS CSS fájl-struktúra
• Base 
• Layout 
• Module 
SMACSS CSS fájl-struktúra
• Base 
• Layout 
• Module 
• State 
SMACSS CSS fájl-struktúra 
.is-open 
:hover 
@media
• Base 
• Layout 
• Module 
• State 
• Theme 
SMACSS CSS fájl-struktúra
• Base 
• Layout 
• Module 
• State 
• Theme 
SMACSS-szerű CSS fájl-struktúra
SMACSS-szerű CSS fájl-struktúra 
• Base 
• Layout 
• Component Module 
• State 
• Theme
SMACSS-szerű CSS fájl-struktúra 
• Base 
• Layout 
• Component Module 
• State 
• Theme
Component 
Atom, Molecule… 
Atomic Design 
Module 
SMACSS 
Object 
OOCSS 
Block 
BEM
SMACSS-szerű CSS fájl-struktúra (Drupal 8) 
base 
• elements.css 
• typography.css 
layout 
• layout.css 
• node-add.css 
• … 
components 
• buttons.css 
• buttons.theme.css 
• … 
theme 
• install-page.css 
• appearance-page. 
css 
Forrás: Drupal 8 Seven theme
Egy lehetséges Sass fájl struktúra 
base 
layout 
components 
shame.scss 
no-query.scss 
style.scss 
config 
• _extendables.scss 
• _functions.scss 
• _mixins.scss 
• _variables.scss
Tipp: Sass Globbing 
@import 
"config/**/*", 
"base/**/*", 
"layout/**/*", 
"components/**/*"; 
https://github.com/chriseppstein/sass-globbing
CSS kód formátum 
CSS kód felépítés 
CSS fájl struktúra
BEM
• Base 
• Layout 
• Component 
• Block 
• Element 
• Modifier 
• State 
• Theme 
John Albin: Managing complex projects with design components
<div class="flower__bed"> 
<div class="flower"> 
<div class="flower__petals"> 
<div class="flower__face"></div> 
</div> 
<div class="flower__stem"> 
<div class="flower__leaves"></div> 
</div> 
</div> 
</div> 
Component 
• Block 
John Albin: Managing complex projects with design components
<div class="flower__bed"> 
<div class="flower"> 
<div class="flower__petals"> 
<div class="flower__face"></div> 
</div> 
<div class="flower__stem"> 
<div class="flower__leaves"></div> 
</div> 
</div> 
</div> 
Component 
• Element 
John Albin: Managing complex projects with design components
<div class="flower__bed"> 
<div class="flower flower--tulip"> 
<div class="flower__petals"> 
<div class="flower__face"></div> 
</div> 
<div class="flower__stem"> 
<div class="flower__leaves"></div> 
</div> 
</div> 
</div> 
Component 
• Modifier 
John Albin: Managing complex projects with design components
<div class="flower__bed"> 
<div class="flower is-pollinating"> 
<div class="flower__petals"> 
<div class="flower__face"></div> 
</div> 
<div class="flower__stem"> 
<div class="flower__leaves"></div> 
</div> 
</div> 
</div> 
Component 
• State 
John Albin: Managing complex projects with design components
.flover:hover {} 
Component 
• State 
John Albin: Managing complex projects with design components
@media "print" { 
.flover {} 
} 
Component 
• State 
John Albin: Managing complex projects with design components
Proposal: A Style Guide for Seven 
Progress bar component
CSS architecture (for Drupal 8) 
Progress bar component 
<div class="progress progress--small"> 
<label class="label label--small">Uploading sunset.jpg</label> 
<div class="progress__track"> 
<div class="progress__bar" style="width: 29%"></div> 
</div> 
<div class="progress__description"> 
<div class="layout-pull">Uploaded 221 of 762KB</div> 
<strong class="layout-push">29%</strong> 
</div> 
<a class="progress__cancel" href="#" title="cancel"> 
<span class="visually-hidden">cancel</span> 
</a> 
</div>
CSS architecture (for Drupal 8) 
Progress bar component 
/** 
* Progress Bar component 
*/ 
.progress {} 
.progress__track {} 
.progress__bar {} 
.progress__description {} 
.progress__cancel {} 
.progress__cancel:focus, 
.progress__cancel:hover {} 
/** 
* Progress Bar small variant 
*/ 
.progress--small .progress__track {} 
.progress--small .progress__bar {} 
.progress--small .progress__cancel {}
Classicitis?!
<div class="media attribution"> 
<a href="http://twitter.com/stubbornella" class="img"> 
<img src="http://stubbornella.com/profile_image.jpg" 
alt="me" /> 
</a> 
<div class="bd"> 
@Stubbornella 14 minutes ago 
</div> 
</div> 
/* ====== media ====== */ 
.media {margin:10px;} 
.media, .bd {overflow:hidden; _overflow:visible; zoom:1;} 
.media .img {float:left; margin-right: 10px;} 
.media .img img{display:block;} 
.media .imgExt{float:right; margin-left: 10px;} 
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
%media { 
overflow: hidden; 
&:first-child { 
float: left; 
} 
&:last-child { 
overflow: hidden; 
} 
} 
.status { 
@extend %media 
// ... 
} 
! 
.profile { 
@extend %media 
// ... 
} 
http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css
Egyetlen helyes út NINCS!
Tamás Hajas 
Drupal consultant 
Integral Vision Ltd 
integralvision.hu 
about.me/tamashajas

More Related Content

Featured

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by HubspotMarius Sescu
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTExpeed Software
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsPixeldarts
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthThinkNow
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfmarketingartwork
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024Neil Kimberley
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)contently
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024Albert Qian
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsKurio // The Social Media Age(ncy)
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Search Engine Journal
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summarySpeakerHub
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next Tessa Mero
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentLily Ray
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best PracticesVit Horky
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project managementMindGenius
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...RachelPearson36
 

Featured (20)

2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot2024 State of Marketing Report – by Hubspot
2024 State of Marketing Report – by Hubspot
 
Everything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPTEverything You Need To Know About ChatGPT
Everything You Need To Know About ChatGPT
 
Product Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage EngineeringsProduct Design Trends in 2024 | Teenage Engineerings
Product Design Trends in 2024 | Teenage Engineerings
 
How Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental HealthHow Race, Age and Gender Shape Attitudes Towards Mental Health
How Race, Age and Gender Shape Attitudes Towards Mental Health
 
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdfAI Trends in Creative Operations 2024 by Artwork Flow.pdf
AI Trends in Creative Operations 2024 by Artwork Flow.pdf
 
Skeleton Culture Code
Skeleton Culture CodeSkeleton Culture Code
Skeleton Culture Code
 
PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024PEPSICO Presentation to CAGNY Conference Feb 2024
PEPSICO Presentation to CAGNY Conference Feb 2024
 
Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)Content Methodology: A Best Practices Report (Webinar)
Content Methodology: A Best Practices Report (Webinar)
 
How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024How to Prepare For a Successful Job Search for 2024
How to Prepare For a Successful Job Search for 2024
 
Social Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie InsightsSocial Media Marketing Trends 2024 // The Global Indie Insights
Social Media Marketing Trends 2024 // The Global Indie Insights
 
Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024Trends In Paid Search: Navigating The Digital Landscape In 2024
Trends In Paid Search: Navigating The Digital Landscape In 2024
 
5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary5 Public speaking tips from TED - Visualized summary
5 Public speaking tips from TED - Visualized summary
 
ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd ChatGPT and the Future of Work - Clark Boyd
ChatGPT and the Future of Work - Clark Boyd
 
Getting into the tech field. what next
Getting into the tech field. what next Getting into the tech field. what next
Getting into the tech field. what next
 
Google's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search IntentGoogle's Just Not That Into You: Understanding Core Updates & Search Intent
Google's Just Not That Into You: Understanding Core Updates & Search Intent
 
How to have difficult conversations
How to have difficult conversations How to have difficult conversations
How to have difficult conversations
 
Introduction to Data Science
Introduction to Data ScienceIntroduction to Data Science
Introduction to Data Science
 
Time Management & Productivity - Best Practices
Time Management & Productivity -  Best PracticesTime Management & Productivity -  Best Practices
Time Management & Productivity - Best Practices
 
The six step guide to practical project management
The six step guide to practical project managementThe six step guide to practical project management
The six step guide to practical project management
 
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
Beginners Guide to TikTok for Search - Rachel Pearson - We are Tilt __ Bright...
 

Hogyan írjunk fenntartható CSS-t?

  • 1. Hogyan írjunk fenntartható CSS-t? Hajas Tamás
  • 2. Hajas Tamás Drupal tanácsadó Integral Vision Kft
  • 8. Drupal CSS Coding Standards https://www.drupal.org/ node/1886770
  • 9. Harry Roberts CSS Guidelines http://cssguidelin.es
  • 10. CSS kód formátum CSS kód felépítés CSS fájl struktúra
  • 11. CSS kód formátum CSS kód felépítés CSS fájl struktúra
  • 14. „Ne törd a fejem!”
  • 15. „a kód magától értetődő „kell legyen”
  • 16. /** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; ! font-size: 0; ! white-space: nowrap; }
  • 17. /** * Grid container * Must only contain '.cell' children. */ .grid { height: 100%; /* Remove inter-cell whitespace */ font-size: 0; /* Prevent inline-block cells wrapping */ white-space: nowrap; }
  • 18. /** * Grid container * Must only contain '.cell' children. * 1. Remove inter cell whitespace. * 2. Prevent inline-block cells wrapping */ .grid { height: 100%; font-size: 0; /* 1 */ white-space: nowrap; /* 2 */ }
  • 20. CSS kód formátum CSS kód felépítés CSS fájl struktúra
  • 21. Túl komplex kiválasztó CSS problémák a HTML struktúra követése div.block .title a:link { #sidebar-first & { .node-19 & {} } }
  • 22. ”Qualified ”selectors” CSS problémák a HTML struktúra követése div.block .title a:link { #sidebar-first & { .node-19 & {} } }
  • 23. Környezet alapú kiválasztás CSS problémák div.block .title a:link { #sidebar-first & { .node-19 & {} } }
  • 24. Gyermek kiválasztók túl általános class névvel CSS problémák div.block .title a:link { #sidebar-first & { .node-19 & {} } }
  • 25. „A CSS osztály nevek hasznos információt kell szolgáltassanak a fejlesztőknek” – Nicolas Gallagher About HTML Semantics and Front-End Architecture
  • 26. .red-box {} ! .message--error {}
  • 27. Az ID kiválasztó használata stílushoz CSS problémák div.block .title a:link { #sidebar-first & { .node-19 & {} } }
  • 28. Az !important „felülíró” használata CSS problémák div.block .title a:link { #sidebar-first & { .node-19 & { …!important; } } }
  • 30. Specifikusság példa body #content .data img:hover {} ! ! ! ! #content .data img :hover body 0*1000 + 1*100 + 2*10 + 2*1 = 122 0 1 2 2 » 122
  • 31. CSS kód formátum CSS kód felépítés CSS fájl struktúra
  • 32. SMACSS See purecss.io for kind of an implementation
  • 33. • Base SMACSS CSS fájl-struktúra ul { list-style-type: none; padding: 0; margin: 0; }
  • 34. • Base • Layout SMACSS CSS fájl-struktúra
  • 35. • Base • Layout • Module SMACSS CSS fájl-struktúra
  • 36. • Base • Layout • Module • State SMACSS CSS fájl-struktúra .is-open :hover @media
  • 37. • Base • Layout • Module • State • Theme SMACSS CSS fájl-struktúra
  • 38. • Base • Layout • Module • State • Theme SMACSS-szerű CSS fájl-struktúra
  • 39. SMACSS-szerű CSS fájl-struktúra • Base • Layout • Component Module • State • Theme
  • 40. SMACSS-szerű CSS fájl-struktúra • Base • Layout • Component Module • State • Theme
  • 41. Component Atom, Molecule… Atomic Design Module SMACSS Object OOCSS Block BEM
  • 42. SMACSS-szerű CSS fájl-struktúra (Drupal 8) base • elements.css • typography.css layout • layout.css • node-add.css • … components • buttons.css • buttons.theme.css • … theme • install-page.css • appearance-page. css Forrás: Drupal 8 Seven theme
  • 43. Egy lehetséges Sass fájl struktúra base layout components shame.scss no-query.scss style.scss config • _extendables.scss • _functions.scss • _mixins.scss • _variables.scss
  • 44. Tipp: Sass Globbing @import "config/**/*", "base/**/*", "layout/**/*", "components/**/*"; https://github.com/chriseppstein/sass-globbing
  • 45. CSS kód formátum CSS kód felépítés CSS fájl struktúra
  • 46. BEM
  • 47. • Base • Layout • Component • Block • Element • Modifier • State • Theme John Albin: Managing complex projects with design components
  • 48. <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> Component • Block John Albin: Managing complex projects with design components
  • 49. <div class="flower__bed"> <div class="flower"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> Component • Element John Albin: Managing complex projects with design components
  • 50. <div class="flower__bed"> <div class="flower flower--tulip"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> Component • Modifier John Albin: Managing complex projects with design components
  • 51. <div class="flower__bed"> <div class="flower is-pollinating"> <div class="flower__petals"> <div class="flower__face"></div> </div> <div class="flower__stem"> <div class="flower__leaves"></div> </div> </div> </div> Component • State John Albin: Managing complex projects with design components
  • 52. .flover:hover {} Component • State John Albin: Managing complex projects with design components
  • 53. @media "print" { .flover {} } Component • State John Albin: Managing complex projects with design components
  • 54. Proposal: A Style Guide for Seven Progress bar component
  • 55. CSS architecture (for Drupal 8) Progress bar component <div class="progress progress--small"> <label class="label label--small">Uploading sunset.jpg</label> <div class="progress__track"> <div class="progress__bar" style="width: 29%"></div> </div> <div class="progress__description"> <div class="layout-pull">Uploaded 221 of 762KB</div> <strong class="layout-push">29%</strong> </div> <a class="progress__cancel" href="#" title="cancel"> <span class="visually-hidden">cancel</span> </a> </div>
  • 56. CSS architecture (for Drupal 8) Progress bar component /** * Progress Bar component */ .progress {} .progress__track {} .progress__bar {} .progress__description {} .progress__cancel {} .progress__cancel:focus, .progress__cancel:hover {} /** * Progress Bar small variant */ .progress--small .progress__track {} .progress--small .progress__bar {} .progress--small .progress__cancel {}
  • 58. <div class="media attribution"> <a href="http://twitter.com/stubbornella" class="img"> <img src="http://stubbornella.com/profile_image.jpg" alt="me" /> </a> <div class="bd"> @Stubbornella 14 minutes ago </div> </div> /* ====== media ====== */ .media {margin:10px;} .media, .bd {overflow:hidden; _overflow:visible; zoom:1;} .media .img {float:left; margin-right: 10px;} .media .img img{display:block;} .media .imgExt{float:right; margin-left: 10px;} http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
  • 59. %media { overflow: hidden; &:first-child { float: left; } &:last-child { overflow: hidden; } } .status { @extend %media // ... } ! .profile { @extend %media // ... } http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css
  • 61. Tamás Hajas Drupal consultant Integral Vision Ltd integralvision.hu about.me/tamashajas