SA scarnz

## 55-bytes-of-css.md

      
              1 file
            
          
              116 forks
            
          
                32 comments
              
            
              2149 stars
            
          
                JoeyBurzynski
                / 55-bytes-of-css.md
            
            
              Last active
              October 28, 2025 06:41
            
              
                58 bytes of css to look great nearly everywhere
              
          
    58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:
main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

  
## index.md

      
              1 file
            
          
              18 forks
            
          
                12 comments
              
            
              628 stars
            
          
                alekseykulikov
                / index.md
            
            
              Last active
              February 6, 2025 21:20
            
              
                Principles we use to write CSS for modern browsers
              
          
    Recently CSS has got a lot of negativity. But I would like to defend it and show, that with good naming convention CSS works pretty well.
My 3 developers team has just developed React.js application with 7668 lines of CSS (and just 2 !important).
During one year of development we had 0 issues with CSS. No refactoring typos, no style leaks, no performance problems, possibly, it is the most stable part of our application.
Here are main principles we use to write CSS for modern (IE11+) browsers:

SUIT CSS naming conventions + SUIT CSS design principles;
PostCSS + CSSNext. Future CSS syntax like variables, nesting, and autoprefixer are good enough;
Flexbox is awesome. No need for grid framework;
Normalize.css, base styles and variables are solid foundation for all components;


## trello-css-guide.md

      
              1 file
            
          
              125 forks
            
          
                62 comments
              
            
              1471 stars
            
          
                bobbygrace
                / trello-css-guide.md
            
            
              Last active
              September 27, 2025 06:29
            
              
                Trello CSS Guide
              
          
    Hello, visitors! If you want an updated version of this styleguide in repo form with tons of real-life examples… check out Trellisheets! https://github.com/trello/trellisheets

Trello CSS Guide

“I perfectly understand our CSS. I never have any issues with cascading rules. I never have to use !important or inline styles. Even though somebody else wrote this bit of CSS, I know exactly how it works and how to extend it. Fixes are easy! I have a hard time breaking our CSS. I know exactly where to put new CSS. We use all of our CSS and it’s pretty small overall. When I delete a template, I know the exact corresponding CSS file and I can delete it all at once. Nothing gets left behind.”
You often hear updog saying stuff like this. Who’s updog? Not much, who is up with you?

  
## metaquery_boilerplate.html
<!doctype html>
<html lang="en" class="breakpoint-medium">
  <head>
    <meta charset="utf-8">
    <title>Metaquery Boilerplate</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">

    <meta name="breakpoint" content="small" media="(max-width: 480px)">
    <meta name="breakpoint" content="medium" media="(min-width: 481px) and (768px)">
	<!doctype html>
	<html lang="en" class="breakpoint-medium">
	<head>
	<meta charset="utf-8">
	<title>Metaquery Boilerplate</title>
	<meta name="description" content="">
	<meta name="viewport" content="width=device-width">

	<meta name="breakpoint" content="small" media="(max-width: 480px)">
	<meta name="breakpoint" content="medium" media="(min-width: 481px) and (768px)">