Cascading
Style
Sheets

PostCSS

CSS-in-JS

BEM, ACSS, OOCSS

CSS Modules

CSS custom properties

The State of CSS

business logic 🤣

by Christoph @pistenprinz www.creinartz.de

There are only two hard things in Computer Science:

Cache invalidation

and naming things

CSS Metholodigies

Block
Element
Modifier

Block - Standalone entity that is meaningful on its own.

Element A part of a block that has no standalone meaning and is semantically tied to its block.

Modifier A flag on a block or element. Use them to change appearance or behavior.

            
.btn {}                                   
.btn__price {}
.btn--primary {}

http://getbem.com/

ACSS

Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.

        
.f1 { font-size: 3rem; }
.ma0 { margin: 0; }

            
.text-huge { font-size: 3rem; }
.margin-0 { margin: 0; }

                
<p class="C(#fff) P(20px)">
  Lorem ipsum
</p>

                    
.C\(#fff\) { color: #fff; }
.P\(20px\) { padding: 20px; }

Variables var(--myvariable)

Processing

npm i node-sass



    
        
    

    
        
    

    
        
    

    
        getComputedStyle
(document.documentElement) 
.getPropertyValue
('--mycolour');
    

    
        PostCSS
    

    
        A tool for transforming CSS with JavaScript
    

    
        Autoprefixer
        Autoprefixer online
    

    
        RTLCSS
        RTLCSS playground
    


    
        
    

    
        Demo time
    

    
        CSS Blocks
    

    
        The next evolution of best practices?
        css-blocks.com
    

    
    
        the buildstack_(TM)
    

    
            CSS? webpack!
        

    
            
    

    
         BEM, ACSS, Autoprefixer, RTLCSS, CSSnano
    
    

    
            Critical CSS
       

    
            CSS Grid
       

    
    
   
    
        
            Thank you!