137 lines
6.6 KiB
HTML
137 lines
6.6 KiB
HTML
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<title>Mithril.js</title>
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
|
|
<link href="lib/prism/prism.css" rel="stylesheet" />
|
|
<link href="style.css" rel="stylesheet" />
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<section>
|
|
<h1>Mithril <small>1.0.0-rc.8</small></h1>
|
|
<nav>
|
|
<a href="index.html">Guide</a>
|
|
<a href="api.html">API</a>
|
|
<a href="https://gitter.im/lhorie/mithril.js">Chat</a>
|
|
<a href="https://github.com/lhorie/mithril.js">Github</a>
|
|
</nav>
|
|
</section>
|
|
</header>
|
|
<main>
|
|
<section>
|
|
<h1 id="css">CSS</h1>
|
|
<ul>
|
|
<li>Tutorials<ul>
|
|
<li><a href="installation.html">Installation</a></li>
|
|
<li><a href="index.html">Introduction</a></li>
|
|
<li><a href="simple-application.html">Tutorial</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>Resources<ul>
|
|
<li><a href="jsx.html">JSX</a></li>
|
|
<li><a href="es6.html">ES6</a></li>
|
|
<li><strong><a href="css.html">CSS</a></strong><ul>
|
|
<li><a href="#vanilla-css">Vanilla CSS</a></li>
|
|
<li><a href="#tachyons">Tachyons</a></li>
|
|
<li><a href="#css-in-js">CSS-in-JS</a></li>
|
|
</ul>
|
|
</li>
|
|
<li><a href="animation.html">Animation</a></li>
|
|
<li><a href="testing.html">Testing</a></li>
|
|
<li><a href="examples.html">Examples</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>Key concepts<ul>
|
|
<li><a href="vnodes.html">Vnodes</a></li>
|
|
<li><a href="components.html">Components</a></li>
|
|
<li><a href="lifecycle-methods.html">Lifecycle methods</a></li>
|
|
<li><a href="keys.html">Keys</a></li>
|
|
<li><a href="autoredraw.html">Autoredraw system</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>Social<ul>
|
|
<li><a href="https://github.com/lhorie/mithril.js/wiki/JOBS">Mithril Jobs</a></li>
|
|
<li><a href="contributing.html">How to contribute</a></li>
|
|
<li><a href="credits.html">Credits</a></li>
|
|
</ul>
|
|
</li>
|
|
<li>Misc<ul>
|
|
<li><a href="framework-comparison.html">Framework comparison</a></li>
|
|
<li><a href="change-log.html">Change log/Migration</a></li>
|
|
</ul>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
<h3 id="vanilla-css">Vanilla CSS</h3>
|
|
<p>For various reasons, CSS has a bad reputation and often developers reach for complex tools in an attempt to make styling more manageable. In this section, we'll take a step back and cover some tips on writing plain CSS:</p>
|
|
<ul>
|
|
<li><p><strong>Avoid using the space operator</strong> - The vast majority of CSS maintainability issues are due to CSS specificity issues. The space operator defines a descendant (e.g. <code>.a .b</code>) and at the same time, it increases the level of specificity for the CSS rules that apply to that selector, sometimes overriding styles unexpectedly.</p>
|
|
<p> Instead, it's preferable to share a namespace prefix in all class names that belong to a logical group of elements:</p>
|
|
<pre><code class="lang-css"> /* AVOID */
|
|
.chat.container {/*...*/}
|
|
.chat .item {/*...*/}
|
|
.chat .avatar {/*...*/}
|
|
.chat .text {/*...*/}
|
|
|
|
/* PREFER */
|
|
.chat-container {/*...*/}
|
|
.chat-item {/*...*/}
|
|
.chat-avatar {/*...*/}
|
|
.chat-text {/*...*/}
|
|
</code></pre>
|
|
</li>
|
|
<li><p><strong>Use only single-class selectors</strong> - This convention goes hand-in-hand with the previous one: avoiding high specificity selectors such as <code>#foo</code> or <code>div.bar</code> help decrease the likelyhood of specificity conflicts.</p>
|
|
<pre><code class="lang-css"> /* AVOID */
|
|
#home {}
|
|
input.highlighted {}
|
|
|
|
/* PREFER */
|
|
.home {}
|
|
.input-highlighted {}
|
|
</code></pre>
|
|
</li>
|
|
<li><p><strong>Develop naming conventions</strong> - You can reduce naming collisions by defining keywords for certain types of UI elements. This is particularly effective when brand names are involved:</p>
|
|
<pre><code class="lang-css"> /* AVOID */
|
|
.twitter {} /* icon link in footer */
|
|
.facebook {} /* icon link in footer */
|
|
/* later... */
|
|
.modal.twitter {} /* tweet modal */
|
|
.modal.facebook {} /* share modal */
|
|
|
|
/* PREFER */
|
|
.link-twitter {}
|
|
.link-facebook {}
|
|
/* later... */
|
|
.modal-twitter {}
|
|
.modal-facebook {}
|
|
</code></pre>
|
|
</li>
|
|
</ul>
|
|
<hr>
|
|
<h3 id="tachyons">Tachyons</h3>
|
|
<p><a href="https://github.com/tachyons-css/tachyons">Tachyons</a> is a CSS framework, but the concept behind it can easily be used without the library itself.</p>
|
|
<p>The basic idea is that every class name must declare one and only one CSS rule. For example, <code>bw1</code> stands for <code>border-width:1px;</code>. To create a complex style, one simply combines class names representing each of the required CSS rules. For example, <code>.black.bg-dark-blue.br2</code> styles an element with blue background, black text and a 4px border-radius.</p>
|
|
<p>Since each class is small and atomic, it's essentially impossible to run into CSS conflicts.</p>
|
|
<p>As it turns out, the Tachyons convention fits extremely well with Mithril and JSX:</p>
|
|
<pre><code class="lang-jsx">var Hero = ".black.bg-dark-blue.br2.pa3"
|
|
|
|
m.mount(document.body, <Hero>Hello</Hero>)
|
|
// equivalent to `m(".black.bg-dark.br2.pa3", "Hello")`
|
|
</code></pre>
|
|
<hr>
|
|
<h3 id="css-in-js">CSS in JS</h3>
|
|
<p>In plain CSS, all selectors live in the global scope and a prone to name collisions and specificity conflicts. CSS-in-JS aims to solve the issue of scoping in CSS, i.e. it groups related styles into non-global modules that are invisible to each other. CSS-in-JS is suitable for extremely large dev teams working on a single codebase, but it's not a good choice for most teams.</p>
|
|
<p>Nowadays there are <a href="https://github.com/MicheleBertoli/css-in-js">a lot of CSS-in-JS libraries with various degrees of robustness</a>. </p>
|
|
<p>The main problem with many of these libraries is that even though they require a non-trivial amount of transpiler tooling and configuration, they also require sacrificing code readability in order to work, e.g. <code><a class={classnames(styles.button, styles.danger)}></a></code> vs <code><a class="button danger"></a></code> (or <code>m("a.button.danger")</code> if we're using hyperscript).</p>
|
|
<p>Often sacrifices also need to be made at time of debugging, when mapping rendered CSS class names back to their source. Often all you get in browser developer tools is a class like <code>button_fvp6zc2gdj35evhsl73ffzq_0 danger_fgdl0s2a5fmle5g56rbuax71_0</code> with useless source maps (or worse, entirely criptic class names).</p>
|
|
<p>Another common issue is lack of support for less basic CSS features such as <code>@keyframes</code> and @font-face.</p>
|
|
<p>If you are adamant on using a CSS-in-JS library, consider using <a href="https://github.com/j2css/j2c">J2C</a>.</p>
|
|
|
|
<hr />
|
|
<small>License: MIT. © Leo Horie.</small>
|
|
</section>
|
|
</main>
|
|
<script src="lib/prism/prism.js"></script>
|
|
</body>
|
|
</html
|