https://cube.fyi/principles

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1">
6    <title>Principles | CUBE CSS</title>
7    <meta name="generator" content="VuePress 1.9.8">
8    

8<script src="https://cdn.usefathom.com/script.js" data-site="IAIRUTCT" defer="true"></script>

8
9    

9<script defer="true">
10      navigator.serviceWorker.getRegistrations().then(function(registrations) {
11       for(let registration of registrations) {
12        registration.unregister()
13      } })
14    </script>

14
15    <meta name="description" content="A CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.">
16    
17    <link rel="preload" href="/assets/css/0.styles.63747184.css" as="style"><link rel="preload" href="/assets/js/app.a5f071f8.js" as="script"><link rel="preload" href="/assets/js/2.980f3844.js" as="script"><link rel="preload" href="/assets/js/14.481e7075.js" as="script"><link rel="prefetch" href="/assets/js/10.a76fca2a.js"><link rel="prefetch" href="/assets/js/11.ea65faf9.js"><link rel="prefetch" href="/assets/js/12.f6e1f778.js"><link rel="prefetch" href="/assets/js/13.eb3e3f6a.js"><link rel="prefetch" href="/assets/js/15.8b194546.js"><link rel="prefetch" href="/assets/js/16.aa681cbc.js"><link rel="prefetch" href="/assets/js/3.033ecf3b.js"><link rel="prefetch" href="/assets/js/4.b7731bfc.js"><link rel="prefetch" href="/assets/js/5.409bac28.js"><link rel="prefetch" href="/assets/js/6.4d41e4ec.js"><link rel="prefetch" href="/assets/js/7.c32c6b01.js"><link rel="prefetch" href="/assets/js/8.5c6d22e2.js"><link rel="prefetch" href="/assets/js/9.2192248a.js">
18    <link rel="stylesheet" href="/assets/css/0.styles.63747184.css">
19  </head>
20  <body>
21    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="https://hankchizljaw.imgix.net/cube-icon.png?format=auto&amp;w=500" alt="CUBE CSS" class="logo"> <span class="site-name can-hide">CUBE CSS</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <!----></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><!---->  <ul class="sidebar-links"><li><a href="/" aria-current="page" class="sidebar-link">CUBE CSS</a></li><li><a aria-current='page' class='active sidebar-link' href='/principles'>Principles</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a class='sidebar-link' href='/principles#progressive-enhancement'>Progressive Enhancement</a></li><li class="sidebar-sub-header"><a class='sidebar-link' href='/principles#abstraction-only-when-necessary'>Abstraction only when necessary</a></li><li class="sidebar-sub-header"><a class='sidebar-link' href='/principles#any-technology-will-do'>Any technology will do</a></li></ul></li><li><a class='sidebar-link' href='/css'>CSS</a></li><li><a class='sidebar-link' href='/composition'>Composition</a></li><li><a class='sidebar-link' href='/utility'>Utility</a></li><li><a class='sidebar-link' href='/block'>Block</a></li><li><a class='sidebar-link' href='/exception'>Exception</a></li><li><a class='sidebar-link' href='/grouping'>Grouping</a></li><li><a class='sidebar-link' href='/examples'>Examples</a></li><li><a class='sidebar-link' href='/resources'>Resources</a></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="principles"><a href="#principles" class="header-anchor">#</a> Principles</h1> <p>The overarching principle of CUBE CSS is <strong>simplicity</strong>. There’s a lot of benefits to letting the right tools do their job without any intervention.</p> <p>The browser is <strong>hinted</strong>, rather <strong>micro-managed</strong> to do what <strong>it knows best</strong> in the context that it finds itself in.</p> <h2 id="progressive-enhancement"><a href="#progressive-enhancement" class="header-anchor">#</a> Progressive Enhancement</h2> <p>Has the user got an old browser? That’s not a problem with CUBE CSS because <strong>Progressive Enhancement</strong> is its core.</p> <p>By creating a <a href="https://piccalil.li/blog/a-minimum-viable-experience-makes-for-a-resilient-inclusive-website-or-app" target="_blank" rel="noopener noreferrer">minimum viable experience<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound">

21<path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, we account for very old browsers by default. Then, using CSS’ forgiving features—which give it so much power—we <strong>extend</strong> on that minimum viable experience with the <strong>most modern capabilities</strong>, such as flexbox and grid, with no fear that they won’t be supported.</p> <p>Without polyfills and hacks, we <strong>produce much less CSS</strong> by using the progressive core of the CUBE CSS methodology.</p> <h2 id="abstraction-only-when-necessary"><a href="#abstraction-only-when-necessary" class="header-anchor">#</a> Abstraction only when necessary</h2> <p>This core simplicity also calls for a reduction in abstraction. By using CSS for what it is good for, we assign <strong>most of the style rules at a higher level</strong>, which are supported by <a href="/composition">composition styles</a>, <a href="/utility">utilities</a>, then finally, <a href="/block">blocks</a> and <a href="/exception">exceptions</a>.</p> <p>CUBE CSS has a very <strong>flat, inclusive</strong> structure which makes it predictable and as easy as possible to pick up, if you’re new to it.</p> <h2 id="any-technology-will-do"><a href="#any-technology-will-do" class="header-anchor">#</a> Any technology will do</h2> <p>Whether you like to author your CSS with <a href="https://sass-lang.com/" target="_blank" rel="noopener noreferrer">Sass<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="http://lesscss.org/" target="_blank" rel="noopener noreferrer">Less<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, <a href="https://postcss.org/" target="_blank" rel="noopener noreferrer">PostCSS<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>, or even <a href="https://cssinjs.org/?v=v10.3.0" target="_blank" rel="noopener noreferrer">CSS-in-JS<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>: <strong>the principles and methodology of CUBE CSS remain</strong>.</p> <p>CUBE CSS is completely <strong>tool agnostic</strong> because it is more of a thinking and organisational methodology, rather than a tooling methodology. As long as the output is CSS, it’s all good.</p></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
22      ←
23      <a href="/" class="prev router-link-active">
24        CUBE CSS
25      </a></span> <span class="next"><a href='/css'>
26        CSS
27      </a>
28      →
29    </span></p></div> </main></div><div class="global-ui"></div></div>
30    

30<script src="/assets/js/app.a5f071f8.js" defer></script>

30<script src="/assets/js/2.980f3844.js" defer></script>

30<script src="/assets/js/14.481e7075.js" defer></script>

30
31  </body>
32</html>