More writing on the rationale and critique of CSS. Started to include other demos from other frameworks like Carousel from bootstrap.
parent
c1873ab1bd
commit
b7ff702bbd
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,66 @@ |
||||
content { |
||||
border: 1px solid #ddd; |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex: flex-grow; |
||||
padding: 1rem; |
||||
} |
||||
|
||||
carousel { |
||||
outline: 2px solid green; |
||||
position: relative; |
||||
} |
||||
|
||||
carousel figure { |
||||
display: none; |
||||
} |
||||
|
||||
carousel figure.active { |
||||
display: flex; |
||||
position: relative; |
||||
flex-direction: column; |
||||
outline: 1px solid red; |
||||
} |
||||
|
||||
carousel figure img { |
||||
width: 100%; |
||||
} |
||||
|
||||
carousel figure figcaption { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 2em; |
||||
background: var(--color-bg-secondary); |
||||
opacity: 0%; |
||||
} |
||||
|
||||
carousel figure figcaption:hover { |
||||
opacity: 90%; |
||||
} |
||||
|
||||
carousel next,prev { |
||||
position: absolute; |
||||
bottom: 0; |
||||
opacity: 0%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-content: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
carousel next { |
||||
right: 0; |
||||
} |
||||
|
||||
carousel prev { |
||||
left: 0; |
||||
} |
||||
|
||||
carousel next:hover,prev:hover { |
||||
opacity: 60%; |
||||
background-color: var(--color-bg); |
||||
} |
||||
@ -0,0 +1,14 @@ |
||||
<carousel> |
||||
<figure class="active"> |
||||
<img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }"> |
||||
<figcaption>Image 1</figcaption> |
||||
</figure> |
||||
|
||||
<!-- this image is not seen until set active --> |
||||
<figure> |
||||
<img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }"> |
||||
<figcaption>Image 2</figcaption> |
||||
</figure> |
||||
<prev><Icon name="arrow-left" size="48" /></prev> |
||||
<next><Icon name="arrow-right" size="48" /></next> |
||||
</carousel> |
||||
@ -0,0 +1,16 @@ |
||||
button { |
||||
padding: 1rem; |
||||
background-color: blue; |
||||
color: white; |
||||
font-size: 2rem; |
||||
} |
||||
|
||||
|
||||
button.main { |
||||
background-color: orange; |
||||
} |
||||
|
||||
#again { |
||||
background-color: yellow; |
||||
} |
||||
|
||||
@ -0,0 +1,25 @@ |
||||
<html> |
||||
<head> |
||||
<title>Test of Cascade</title> |
||||
<link rel="stylesheet" href="/test.css"> |
||||
|
||||
<style> |
||||
button { |
||||
background-color: green; |
||||
} |
||||
|
||||
.attempt { |
||||
background-color: red; |
||||
} |
||||
|
||||
</style> |
||||
|
||||
</head> |
||||
<body> |
||||
<h1>HI!</h1> |
||||
|
||||
<button>Sky Blue</button> |
||||
|
||||
<button id="again" class="attempt main">Broken Button</button> |
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,46 @@ |
||||
<style> |
||||
h1 { |
||||
font-size: 3em; |
||||
} |
||||
</style> |
||||
|
||||
<section> |
||||
<h1>FAQ</h1> |
||||
</section> |
||||
|
||||
<h2>Why did you do this?</h2> |
||||
|
||||
<p>It started as an attempt to relearn modern CSS for myself so I can teach others. As I did this I realized that most of the things I learned have been completely replaced with flexbox and grids, and if I just use those then CSS becomes much easier to understand. Specificity works as expected. When I change a component with <b>class</b> or <b>id</b> it actually changes. The layout flows correctly and is easier to create. Nearly everything works better and is easier to understand. |
||||
</p> |
||||
|
||||
<p>This website became a demonstration to others that <b>layout</b> doesn't need <b>div.class</b> structure, subverting <b>ul/li</b> tags, and other CSS hacks. You can use simple <b>truly semantic</b> HTML and simple CSS to accomplish 90% of what you're doing today with more reliable results faster. |
||||
</p> |
||||
|
||||
<h2>Why is this site in black and white?</h2> |
||||
<p>I used an entirely monochrome simplified design because I'm not a designer, and I want people to focus on the visual structure of each demo, not whether my use of Cornflower Blue was appropriate for a button. |
||||
</p> |
||||
|
||||
<p>I'm also an experienced oil painter and a fundamental teaching in realist art is that color does not matter for visual comprehension. What matters most is the "drawing", or monochrome aspects of visual experience. If you can't make something work in monochrome then no amount of color will help. Make it visually understandable in monochrome and any color scheme you choose should work (barring a few rules about color perception's relationship to monochrome values). |
||||
</p> |
||||
|
||||
<h2>What's wrong with classes?</h2> |
||||
|
||||
<p>There's nothing wrong with classes in CSS. How they're used in recent CSS frameworks subverts the normal specificity rules making CSS unnecessarily difficult. The original specificity rules put the base design of a component at the tag level, then a <b>class</b> can be used to modify and extend the design, and an <b>id</b> can make this even more specific. In today's use of <b>div.class</b> heavy markup you lose this ability to alter the design as needed where its used, and instead you have to resort to <b>!important</b> and specificity hacking to change how something looks, or add more <b>div</b> with more <b>class</b>.</p> |
||||
|
||||
<p>The other problem with <b>div.class</b> is it's more difficult to debug problems with the layout. There's the obvious problem of debugging failures in layout through a forest of divs, but you're also relying on specificity that can come from anywhere in the cascade. It's much more difficult to find exactly <b>what</b> bit of CSS is overriding your local decisions. If you've ever had to open the inspector in your browser to troll through CSS locations looking for the culprit then that's why. If the base design decisions are at the tag level, then your local <b>class</b> and <b>id</b> specifics will work as expected. You can also replace many uses of class as design modifiers with scoped CSS variables and reduce the use of <b>div.class</b> even further.</p> |
||||
|
||||
<p>Finally, using <b>div.class</b> heavy layout systems pollutes your markup with structure that's difficult to analyze and maintain. When you focus on using <b>truly</b> semantic named tags and follow specificity as intended then your HTML is lighter and easier to understand because it isn't full of <b>div.grid.col-1.col-mx-auto</b> class rules that really have nothing to do with the actual meaning of that particular visual element. With <b>flexbox</b> and <b>CSS grids</b> you don't need any layout divs, and can keep the HTML clean and semantic. This also ends up being more flexible with less or the same effort as using a pre-made grid system full of divs.</p> |
||||
|
||||
<h2>Should we ban div.class?</h2> |
||||
|
||||
<p>Hell no. The current problem of <b>too much</b> class based CSS is because of trends in recent years calling for everyone to irrationally ban some practice. Remember when everyone decided tables were evil? So then we banned tables and <b>grids</b> completely? Then nobody could do a layout without crazy tricks and JavaScript? Nobody wants a repeat of the anti-tables "semantic markup" war, so please don't ban <b>div.class</b>.</p> |
||||
|
||||
<p>All this website does is demonstrate that you don't need <b>so much div.class</b>. You can scrap a lot of what you're using now to do layout and go with clean HTML with flatter structure, then judiciously use <b>div.class</b> as needed. Treat <b>div.class</b> like salt. Right now you're pouring a whole box of it on your HTML when a little bit makes it taste better.</p> |
||||
|
||||
<h2>Do these demos work on phones?</h2> |
||||
<p>They could but I haven't taken the time to make them adapt. That may come in a later release. Try it anyway |
||||
as you may be surprised how well the layouts still work on smaller screens.</p> |
||||
|
||||
<h2>Can I suggest a challenge?</h2> |
||||
<p>Yes please. If you find an example of a layout that you think is impossible with flexbox and CSS grids then tell me on <a href="https://twitter.com/lzsthw">Twitter at @lzsthw</a> and I'll attempt a replica. My only requirement is that you also have to tell me what trick the challenge is using. This is an exercise in replicating layouts, not reverse engineering devious hidden CSS tricks. Also keep in mind that I am not invested in "winning" and only curious about the limits of flexbox and CSS grids. If you find something I can't do, that means I found a useful limit to avoid. It doesn't mean that we throw out all of flexbox and CSS grids so you can go back to the float-clear-div-class 1990s. |
||||
</p> |
||||
@ -0,0 +1,95 @@ |
||||
<script> |
||||
import { link } from 'svelte-spa-router'; |
||||
import Icon from '../components/Icon.svelte'; |
||||
import { holder } from '../../lib/imgholder.js'; |
||||
import CodeView from '../components/CodeView.svelte'; |
||||
|
||||
let images = [1,2,3,4,5,6,7]; |
||||
</script> |
||||
|
||||
<style> |
||||
content { |
||||
border: 1px solid #ddd; |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex: flex-grow; |
||||
padding: 1rem; |
||||
} |
||||
|
||||
carousel { |
||||
outline: 2px solid green; |
||||
position: relative; |
||||
} |
||||
|
||||
carousel figure { |
||||
display: none; |
||||
} |
||||
|
||||
carousel figure.active { |
||||
display: flex; |
||||
position: relative; |
||||
flex-direction: column; |
||||
outline: 1px solid red; |
||||
} |
||||
|
||||
carousel figure img { |
||||
width: 100%; |
||||
} |
||||
|
||||
carousel figure figcaption { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 2em; |
||||
background: var(--color-bg-secondary); |
||||
opacity: 0%; |
||||
} |
||||
|
||||
carousel figure figcaption:hover { |
||||
opacity: 90%; |
||||
} |
||||
|
||||
carousel next,prev { |
||||
position: absolute; |
||||
bottom: 0; |
||||
opacity: 0%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-content: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
carousel next { |
||||
right: 0; |
||||
} |
||||
|
||||
carousel prev { |
||||
left: 0; |
||||
} |
||||
|
||||
carousel next:hover,prev:hover { |
||||
opacity: 60%; |
||||
background-color: var(--color-bg); |
||||
} |
||||
</style> |
||||
|
||||
<content> |
||||
<h1>Carousel</h1> |
||||
|
||||
<carousel> |
||||
{#each images as image} |
||||
<figure class:active={ image === 1 }> |
||||
<img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }"> |
||||
<figcaption>Image #{image}</figcaption> |
||||
</figure> |
||||
{/each} |
||||
<prev><Icon name="arrow-left" size="48" /></prev> |
||||
<next><Icon name="arrow-right" size="48" /></next> |
||||
</carousel> |
||||
</content> |
||||
|
||||
<CodeView source="/code/Carousel" notes="/code/Carousel.notes.html" /> |
||||
|
||||
@ -0,0 +1,92 @@ |
||||
<script> |
||||
import Icon from '../components/Icon.svelte'; |
||||
import { holder } from '../../lib/imgholder.js'; |
||||
</script> |
||||
|
||||
<style> |
||||
content { |
||||
border: 1px solid #ddd; |
||||
display: flex; |
||||
flex-direction: column; |
||||
flex: flex-grow; |
||||
padding: 1rem; |
||||
} |
||||
|
||||
carousel { |
||||
outline: 2px solid green; |
||||
position: relative; |
||||
} |
||||
|
||||
carousel figure { |
||||
display: none; |
||||
} |
||||
|
||||
carousel figure.active { |
||||
display: flex; |
||||
position: relative; |
||||
flex-direction: column; |
||||
outline: 1px solid red; |
||||
} |
||||
|
||||
carousel figure img { |
||||
width: 100%; |
||||
} |
||||
|
||||
carousel figure figcaption { |
||||
position: absolute; |
||||
bottom: 0; |
||||
left: 0; |
||||
width: 100%; |
||||
text-align: center; |
||||
font-size: 2em; |
||||
background: var(--color-bg-secondary); |
||||
opacity: 0%; |
||||
} |
||||
|
||||
carousel figure figcaption:hover { |
||||
opacity: 90%; |
||||
} |
||||
|
||||
carousel next,prev { |
||||
position: absolute; |
||||
bottom: 0; |
||||
opacity: 0%; |
||||
height: 100%; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-content: center; |
||||
justify-content: center; |
||||
} |
||||
|
||||
carousel next { |
||||
right: 0; |
||||
} |
||||
|
||||
carousel prev { |
||||
left: 0; |
||||
} |
||||
|
||||
carousel next:hover,prev:hover { |
||||
opacity: 60%; |
||||
background-color: var(--color-bg); |
||||
} |
||||
</style> |
||||
|
||||
<content> |
||||
<h1>Carousel</h1> |
||||
|
||||
<carousel> |
||||
<figure class="active"> |
||||
<img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }"> |
||||
<figcaption>Image 1</figcaption> |
||||
</figure> |
||||
|
||||
<!-- this image is not seen until set active --> |
||||
<figure> |
||||
<img alt="Stock photo" src="{ holder(16 * 40,9 * 40) }"> |
||||
<figcaption>Image 2</figcaption> |
||||
</figure> |
||||
<prev><Icon name="arrow-left" size="48" /></prev> |
||||
<next><Icon name="arrow-right" size="48" /></next> |
||||
</carousel> |
||||
</content> |
||||
Loading…
Reference in new issue