A simple, opinionated stylesheet for formatting semantic HTML to look like a CSS file.
CSSCV is a simple, opinionated stylesheet for formatting semantic HTML to look like a CSS file.
The simplest way to get started with CSSCV is to dive right into the HTML and get editing! There is nothing in the Sass that isn’t used in the HTML, so the
index.htmlfile acts as a comprehensive, real-world demo of what CSSCV can do.
Below is a more detailed overview of the ins-and-outs of the way CSSCV works.
CSSCV matches my own personal style of writing CSS, and uses a specific colour scheme, Solarized. Some of its other more opinionated features:
CSSCV comes with the option to [en|dis]able its styling. This is so that you can quickly and easily remove CSSCV’s unconventional look, and instead expose unstyled HTML in case you ever need to provide a more standard format of CV to recruiters or HR teams. Boring, but often vital. Enabling CSSCV is as simple as adding a class of
htmlelement; all of CSSCV’s styles are scoped to this namespace.
There are a series of simple yet strict rules to follow in order to use CSSCV. Rulesets are built using definition lists and comments and selectors are usually constructed using headings. Below is a simple example that we will deconstruct:
<h3 class="selector">Me</h3> <dl class="declarations"> <dt class="property">Name</dt> <dd class="value"><span class="string">Harry Roberts</span></dd> <dt class="property">Job</dt> <dd class="value"><span class="string">Consultant Front-end Architect</span></dd> <dt class="property">Location</dt> <dd class="value"><span class="string">Leeds, UK</span></dd> <dt class="property">Skills</dt> <dd class="value"> <ul class="value-list"> <li><span class="string">Front-end Architecture</span></li> <li>Design</li> <li>Development</li> <li>OOCSS</li> <li>Performance</li> <li><span class="string">Responsive Web Design</span></li> <li>Git</li> <li>Vim</li> <li>Agile</li> </ul> </dd> </dl>
Let’s take a look at what this does:
dlwhich has a class of
dds respectively. These, respectively, carry classes of
"Comic Sans MS") can be wrapped in a
spanwith a class of
string. This colours them differently and applies opening and closing quote marks.
font-family: "Comic Sans MS", cursive;) are marked up as either ordered- or unordered-lists which carry a class of
As we can see, the rulesets are formed of semantic HTML elements and heavy use of CSS pseudo-elements are used to apply CSS-like syntax (braces, (semi-)colons, quotes, etc).
This class gets applied to the
htmlelement and enables CSSCV
This class forces all elements which carry it to have one carriage return’s space between itself and the following element.
This increases the spacing from one to five carriage returns.
Anything carrying this class will be indented by your chosen tab size amount (defined in
This class is applied to an element which wraps each whole ruleset. It spaces rulesets apart from each other, and can also carry the
This class is applied to headings which introduce each ruleset. It adds a period before, and an opening brace after, the title of the ruleset.
This class is applied to an empty span in order to hyphen-delimit multi-word selectors. For example:
This class is applied to the definition list that will form the body of the ruleset. It adds a closing brace after the final declaration.
This class is applied to each
dtelement which is a declaration’s property. It indents the declaration as per your chosen tab size and adds a trailing colon and space.
This is applied to each
ddelement which becomes a declaration’s value. It adds a trailing semi-colon.
CSS often has values which contain spaces which need quoting, wrap these strings in a
spanthat carries the
This class simply colours any number-like values (e.g.
Any URL-like values can have the
.urlclass applied to them to prepend
CSS often contains comma-delimited lists of values. In CSSCV we mark these up as
These two classes allow you to use BEM-style naming without polluting your markup. To signify an element or modifier, use the corresponding class. You need to also use the
data-namespaceattribute in order to prepend the class with the correct block name, e.g.:
These classes, unsurprisingly, style markup to look like comments. The
.commentclass gives an inline comment, whilst
.comment-blockgives us a DocBlock style comment:
Foo Bar Baz
This is the attribution message that appears at the bottom of the CSSCV page. Including the message is not mandatory, but is appreciated.