Jacob Zwang --> Professional Work --> Research --> Hobby --> Resume ↗︎ -->
Hire Me ↓ -->


Began: 2021 | Status: Early Research

CSS Error Messages

By using some of the more obscure css selectors it's possible to create rules for how html components and classes are used statically.


@mixin goal($message) {
    &:not(.ignore) {
        visibility: hidden;
    }
    
    &:not(.ignore-error)::after {
        visibility: visible;
        color: rgb(138, 198, 255);
        content: '==> #{$message}';
        padding: 20px;
    }
}
        
@mixin error($message) {
    &:not(.ignore-error) {
        visibility: hidden;
    }
    
    &:not(.ignore)::after {
        visibility: visible;
        color: red;
        content: 'error: #{$message}';
        padding: 20px;
    }
}
.article {
    margin: 60px;
    
    &:nth-child(2n + 0) {
        background-color: grey;
    }
    
    &:empty {
        @include goal(':not(.article)');
    }
    
    .article {
        @include error('.article cannot be a child of .article');
    }
    
    &:not(div) {
        @include error('.article must be placed on <div>');
    }
    
    &:not([class^='article s-']):not([class$='article s-']) {
        // the s- is so that svelte's generated classes still work
        @include error('.article must be exclusive');
    }
}

goal of element/class

incorrect class usage

unallowed nesting

checking for other classes



Copyright © 2022 Jacob Zwang. All rights reserved.