A presentation at DevX conf in in Trinec, Czechia by Ondřej Konečný
Effective styling on Web and best practices
How to create web design effectively Problem Specific solution
Dr. Håkon Wium Lie
E-mail communication http://1997.webhistory.org/www.lists/www-talk.1994q1/0648.html
What was before CSS came along?
ViolaWWW
Space Jam
Space Jam Colors Layout
Space Jam - colors
Space Jam – colors in code
<body bgcolor=”#000000” text=”#ff0000” link=”#ff4c4c” vlink=”#ff4c4c” alink=”#ff4c4c”>Space Jam – layout
Space Jam – layout <table width=500 border=0> <tr> <td colspan=5 align=right valign=top> </td> </tr> <tr> <td colspan=2 align=right valign=middle> <br> <br> <br> <a href=”cmp/pressbox/pressboxframes.html”><img src=”img/p-pressbox.gif” height=56 width=131 alt=”Press Box Shuttle” border=0></a> </td> … </tr> … </table>
CSS came up with another layout solution Float-based layout Flexbox-based layout Grid layout
Float-base layout
Flexbox base layout
Grid layout
Grid layout
CSS and related problems
CSS and related problems Revolution
Eric A. Meyer
CSS: The Definitive Guide
First CSS <STYLE type=”text/css”> BODY { font-family: serif; background-color: silver; } H1 { font: x-large Verdana, sans-serif; color: olive; border-bottom: thin black solid; } TABLE { margin: 0; } .sidebar { background-color: olive; padding: 0.5em; } .sidebar UL LI { list-style-type: none; margin-left: 0; margin-right: 0.5em; } .sidebar UL LI A { color: #ffcccc; } .body { background: white no-repeat center url(http://www.mysite.org/pix/logo.gif); } </STYLE>
One change will affect multiple places Homepage paragraph p{ padding-bottom: 10px; color: blue; } Category paragraph Product detail paragraph
Problems with large projects Complexity Complications
Complications with sustainability Straightforwardness of language Sustainability
The most common mistakes
Deep selectors and high specificity Graphic Implementation
It doesn’t work
What are the modification options now? Increase specificity Edit blocking selector !important
The only suitable option to solve the problem
What have we achieved? New selector that can no longer be used
Nesting hell preprocessors and capability
What will the compiled file look like?
How should we nest selectors?
Cascade - order of writing rules and file structure Order matters
Example:
CSS methodologies and architectures
In 2008, year of first experiments OOCSS SMACSS SUITCSS BEM ITCSS CUBE CSS
Making sense of methodologies and architectures Sustainability Extensibility CSS problems
OOCSS OOCSS defines an object as a visual pattern that is reusable across applications
Separation of appearance from structure Content and container separation
Separation of appearance from structure
Content and container separation
SMACSS The main idea of SMACSS is to categorize the CSS rule system
Base
Layout
Module
State
BEM
The biggest advantages Creates selectors of the lowest specificity Uniformity for larger development teams
Cons? The need to name all elements
ITCSS
What ITCSS solve? File organization Problems with specificity
Settings
Tools
Generic
Elements
Objects
Components
Utilities
What about JavaScript and styling?
CSS Modules Styled components
Older than CSS
What is CSS-in-JS trying to solve? Global scope Write everything in JavaScript
CSS Modules classic CSS Don’t think about class names
Cons? Dependence on JavaScript
Styled Components classic CSS
for free. You
can too.