nowfound

Dev tools · December 4, 2010

CM

CSS Meta-Language in Javascript

This was an attempt to make css more accessible to javascript. It just happened to solve a lot of the same problems as less and sass as a side-effect. I'll start with a few examples and then break out the code and explain it... Here's a generic example: css // Begin CSS ( "selector1" ) ({ property1: value, property2: value, // ... }) ( "selector2" ) ({ property1: value, property2: value, // ... }) ; // End CSS Some less and sass features (Variables, Mixins, etc.): // Variable var text_color = "black"; // Mixin var dim = function( w, h ) { return { width: w, height: h, } }; css // Begin CSS (…

Alternatives

What it does

In the maker’s words, at launch

This was an attempt to make css more accessible to javascript. It just happened to solve a lot of the same problems as less and sass as a side-effect. I'll start with a few examples and then break out the code and explain it... Here's a generic example: css // Begin CSS ( "selector1" ) ({ property1: value, property2: value, // ... }) ( "selector2" ) ({ property1: value, property2: value, // ... }) ; // End CSS Some less and sass features (Variables, Mixins, etc.): // Variable var text_color = "black"; // Mixin var dim = function( w, h ) { return { width: w, height: h, } }; css // Begin CSS ( "div" )( dim( "10px", "10px" ) ) ({ color: text_color, }) ( "span" ) ({ color: text_color, }) ; // End CSS And finally, since it's leveraging javascript this technique can modify styles dynamically (My goal): item_color_input.onsubmit = function( ) { css // Begin CSS ( ".item" ) ({ background: item_color_input.value, }) ; // End CSS } Frameworks like jQuery provide similar functionality by acting on the DOM. This can be slow (since it has to execute the selector in javascript) and doesn't affect future elements. The Code: css.js http://keithmajhor.pastebin.com/twCKCcHV // ============================================== // File: css.js // Author: Keith Majhor <[email protected]> // ============================================== window.css = function( a ) { var decl = { }, elem = { }, rule, prop; css = function( a ) { if ( typeof( a ) === "string" ) { rule = a; if ( !decl[rule] ) { decl[rule] = { }; elem[rule] = document.createElement( "style" ); document.head.appendChild( elem[rule] ); } } else if ( rule ) { for ( prop in a ) decl[rule][prop] = a[prop]; var temp = rule + "{"; for ( prop in decl[rule] ) temp += prop + ":" + decl[rule][prop] + ";"; elem[rule].innerHTML = temp + "}"; } return css; } return css( a ); } All it does is maintain a hash for each selector and update a <style> tag whenever it's modified. As is it's 500 bytes, minified it's below 300. I hope this is useful to someone. If anyone has any insight into why this might be a really stupid thing to do, I'd love to hear it.

Does the same job

all alternatives →

More dev tools this month

the category →
  • Dograh▲592

    The open source VAPI alternative

    Dev tools · 25d ago · dograh.com

  • Meridian▲530

    Don't let your work go unnoticed. Get promoted!

    Dev tools · 20d ago · meridiona.com

  • x1▲516

    Lovable for iPhone apps go from idea to App Store

    Dev tools · 11d ago · x1.new

  • The GTM Co-Founder▲402

    Open-source GTM skills for technical founders

    Dev tools · 29d ago · gtmcofounder.com

  • Nuphos▲380

    The AI-Native DevOps Workspace.

    Dev tools · 24d ago · nuphos.ai

  • Open-Source eInk Bike Computer▲375

    OpenTrailPaper is open-source bike computer firmware for the LilyGO T5S3 4.7" E-Paper PRO. It supports offline maps, GPX routes, FIT recording and Bluetooth sensors.

    Dev tools · 1d ago · opentrailpaper.com

Launched alongside, December 2010

the whole month →