This guide has been written with the purpose of empowering members of &yet to write better front-end systems in Jade and Stylus. It follows standard CSS conventions but also introduces preferential choices of our team. Feel free to treat it as an inspiration for writing your own code guides.
doctype html html(lang='en') head meta(charset='utf-8') meta(name='viewport', content='width=device-width, initial-scale=1') link(rel='stylesheet', href='css/main.min.css')
UTF-8 encoding and custom characters instead of HTML entities. To access the list of characters hit
⌘+⌃+Space (Command + Control + Space). This method of invoking special characters list might not work in certain apps like Sublime Text, but will work in Chrome or IM.
head meta(charset='utf-8') title from &yet ❤︎
link(rel='stylesheet', href='css/main.min.css') input.form-input(type='text', required) a.button(href='/', title='A buttton')
Complying with Jade syntax in some cases means extensive use of piping to separate plain text from nested tags (like
To avoid unreadable and cumbersome markup use regular HTML tags.
For regular nesting scenarios use indentation or block expansion.
// Regular nesting ul li a(href='#') Link li: a(href='#') Link // Correct p A paragraph with <strong>emphasized text.</strong> // Incorrect p | A paragraph with strong emphasized text.
Chain classes directly after the element.
For structuring content make use of new HTML5 sectioning elements.
header(role='banner') h1 This is a website main(role='main') p Main content of my site footer(role='contentinfo') p © 2015
Feel free to use a bare-minimum and standard-compliant boilerplate as a starting point for templating—see on Github.
.selector property: value
We are using Stylus as a preprocessor of choice. Go here for documentation.
%placeholderwhere relevant). Read more about the extend concept here.
Put declarations in the following order:
See more examples on CSS Tricks.
.selector display: block width: 100px height: 100px position: absolute top: 0 left: 0 font-family: sans-serif line-height: 1.5 background: black cursor: pointer
Specificity determines which CSS rule is applied by the browsers to a given element.
js-*prefixed classes (e.g.
Put media queries at the end of the file, where the modified element was defined. Make sure styles affecting desktop resolutions are inside a media query as well, the only styles placed outside should be shared by all resolutions.
We are aiming towards building scalable and maintainable front-end systems, that are easy to pick up and contribute to even without prior knowledge of the codebase. That goal makes structure and architecture crucial. CSS should be divided into small, easily comprehensible modules that serve a single purpose (i.e. define reusable, standalone interface elements).
Use the following structure:
└── styl ├── globals │ ├── _variables.styl │ ├── _helpers.styl │ └── _colors.styl ├── libraries ├── templates │ ├── home.styl └── components ├── buttons.styl ├── type.styl ├── grid.styl └── forms.styl
globals—where global, reusable variables (such as fonts, colors, spacing) or helper classes go.
libraries—where you can add external libraries, if written in Stylus (otherwise place the minified version in
templates—optionally for styles corresponding to particular pages (shouldn't be necessary with well defined components)
components—for storing standalone interface modules such as buttons, forms or grids.
This guide is a result of years of learning how to write good front-end. It wouldn't be possible without people who dedicated a great amount of time and poured their hearts into spreading the knowledge. Thank you.