CSSHell - Collection of common CSS mistakes, and how to fix them

Related tags

CSS css education coding
Overview

CSS Hell - To Hell with bad CSS!

Collection of common CSS mistakes, and how to fix them.

https://csshell.dev

What is this all about?

Hi, I'm Stefánia, working with web since 2003. During my career I came across many lines of code, solutions, frameworks, mindsets.

If you have been in this industry for some time, it should not be breaking news that CSS and HTML are those parts of an application people still underestimate. Because of that, some interesting code pieces are born. I'd like to preserve these lines by showing you the bad example, explaining what's wrong with it and how to fix it.

With this, I hope I can help you learn and improve.

Why is it called CSS Hell?

It's a joke idea I stole from HTMLHell. I hope adding some fun and sarcasm to learning might help raising awareness of how !important a good CSS code is.

Got an issue, an idea?

Please report it on GitHub!

Would you like to support my work?

CSS Hell is made with love and a lots of coffee. If you wish to buy me one, you can do it on Ko-fi ❤️

Credits

The logo's font is Chomsky by Fredrick Brennan.

The site is using Eleventy.

Comments
  • Merge together sass watch and serve

    Merge together sass watch and serve

    #15

    Based on: https://egghead.io/lessons/11ty-add-sass-compiling-and-watch-for-changes-in-eleventy-11ty

    Notes:

    • I think the pipeline should not directly modify files in the _site folder, that should handled by eleventy, thus I save the generated files to css folder, and passthroughcopy to the proper location
    • I'm not sure what netlify dev does, I hope these changes did not break the workflow
    • new dependency: npm-run-all, cross platform, seems legit by their user count
    • I do not trust the globstar in the tutorial's build:*, we have to run sass first thus "build": "npm-run-all build:sass build:eleventy", seems more reliable
    opened by budavariam 5
  • WIP: Dark mode

    WIP: Dark mode

    #2

    • Add basic dark mode toggle (icons are just for proof of concept)
    • Start to use css variables for colors in order to easily override (proof of concept as well)

    Based on:

    • https://jec.fyi/blog/supporting-dark-mode
    • https://web.dev/prefers-color-scheme/

    Missing parts:

    • set proper dark version of the colors
    • pull up the missing colors into variables
    • dark prism theme
    • toggle icons that matches the design
    opened by budavariam 4
  • Support email newsletter 🙂

    Support email newsletter 🙂

    Love the website and posts 😀

    I’d love to subscribe to them, but only subscribe to things typically through email.

    Would love to be able to get emails for new posts 🙂

    opened by babramczyk 2
  • Add post on font-variation-settings

    Add post on font-variation-settings

    Not really sure if it's a common mistake, but I ran across it in my colleagues' code and thought it might be relevant.

    Also, there's an issue with beautifier: it removes some necessary spaces in code.

    opened by ixth 2
  • relative units clarification

    relative units clarification

    I am not sure if you think this warrants a PR.

    https://csshell.dev/posts/lets-talk-about-units/

    The Good example sizes a paragraph's font-size at 1rem. It might be explained that rem font-size is relative to the font-size of the root element(:root or <html>), not <body>. If a user took the existing example to their project, but modified their <body>'s font-size, they might wonder "why does my paragraph's 1rem font-size not match my 22px?" Here is an example of that: https://codepen.io/marcelmoreau/pen/NWpXPEq

    This might be made more clear by changing the example's body selector to html and removing the font-size: 16px from it.

    Also, it might also be more clear to change the formula from size / base-font-size to desired-size / root-font-size

    I am happy to make a PR for this, but wanted to run it by you first before I do all that.

    opened by marcelmoreau 1
  • [GH-6] Add basic RSS feed

    [GH-6] Add basic RSS feed

    based on https://www.11ty.dev/docs/plugins/rss/ tried it with NetNewsWire

    Note:

    • rss folder is created to avoid generating an empty index.html if it's in root, or an error in posts folder
    • feed.njk json metadata needs to be updated with proper data to the author and a subtitle might be a nice touch
    • generated feed.xml is not added
    • I might add a link/icon somewhere with a link to feed.xml

    fixes #6

    opened by budavariam 0
  • Minor typo fixes + z-index hint

    Minor typo fixes + z-index hint

    • Hajrá :)
    • I've not commited the recompiled html-s, they can be auto generated, I'd remove them from the repository (but I can add them if you want me to)
    • My changes swapped the order of the posts in the index page, you might want to add some kind of ID for them to keep them in consistent order (like YYYYmmdd-post.md, or something like that, and order them alphabetically)
    opened by dyuri 0
Owner
Stefánia Péter
CSS Unicorn @oracle / devil hunter
Stefánia Péter
GitHub https://csshell.dev
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to, e.g. the `className` prop of React elements. While transforming, the plugin processes all JavaScript style definitions found and bundles them up into a CSS file, ready to be requested from your web server.

babel-plugin-css-in-js A plugin for Babel v6 which transforms inline styles defined in JavaScript modules into class names so they become available to

Martin Andert 302 Sep 26, 2022
OrganiCSS is a collection of mixins for writing logical CSS in different pre-processors and libraries.

OrganiCSS is a collection of mixins and functions to support writing progressively-enhanced logical CSS in many different flavors. Getting Started To

OrganiCSS 5 Jul 20, 2022
Author styles collocated in JS, pull them out into static CSS on build. No runtime dependency.

Author styles collocated in JS, pull them out into static CSS on build. No runtime dependency. the big idea: I like to author styles collocated with c

Siddharth Kshetrapal 90 Sep 11, 2022
Giggy is a collection of a few fun jokes related to Coding & Dark Humor - Created using HTML, JavaScript, CSS & Webpack.

Giggy A Collection of some of the best jokes. This is a Web Application with some jokes related to coding & Dark Humor. Created with data from the Jok

Awais Amjed 7 Jul 28, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

Fluent UI Web ?? ?? ?? Version 8 of @fluentui/react is now available on npm! ?? ?? ?? See the release notes for more info, and please file an issue if

Microsoft 14.5k Jan 4, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
A collection of CSS3 buttons implemented in Sass.

CSS3 Buttons This is a collection of buttons that show what is possible using CSS3 and other advanced techniques, while maintaining the simplest possi

Chad Mazzola 1.3k Nov 8, 2022
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight • Accessible • Customisable • Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Front-end framework with a built-in dark mode and full customizability using CSS variables; great for building dashboards and tools.

This is the main branch of the repo, which contains the latest stable release. For the ongoing development, see the develop branch. Halfmoon Front-end

Tahmid (Halfmoon UI) 2.8k Dec 26, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs » Report bug · Request feat

Bootstrap 161k Jan 1, 2023