Style

Web presentation is balled up in Cascading Style Sheets (CSS), but there are additional tools that may be useful to those starting out, or re-learning the art of web development.

There are several critics of CSS preprocessors, and they have their points, but I’ll probably continue to use them. Here are the big ones, their pros and cons, and some options if you wish to write in plain CSS.

All of the below have some things in common:

  • Variables
  • Conditionals
  • Nesting
  • Plugins/Mixins
  • Inheritance
  • Functions
  • Math
  • A vanilla CSS file will pass nearly unaltered through any of these.

CSS Crush

CSS Crush, for the most part, is vanilla CSS with automatic generation of vendor prefixes.

Stylus

Stylus modifies the syntax by eliminating the need for braces and semicolons. You can include them if you like, but they are optional.

Less

Less, through less.js, allows its use in the browser without running it through a preproccessor, though for production this is discouraged.

Sass

Sass comes with two syntaxes, making it perhaps more flexible for writing than the others, provided you utilize the appropriate extension in your file. SCSS uses CSS syntax, and Sass eliminates the braces and semicolons.

So why would you pick any of these? They primarily add a step to deployment of your web page, and that’s about it, right?

It used to be that none of the features mentioned had much, if any, support within the CSS spec or browsers. CSS3, and most browsers, support CSS variables now. Conditionals for their primary use-case exist via @supports and @media. Math is also well-supported with calc, unless you’re trying to do something really fancy (and you can even mix units and percentages, which can’t be done with a preprocessor!).

It should be noted, especially in relation to CSS Crush, that Android, Chrome, iOS, Firefox for iOS, Safari, and newer versions of Opera all use the “-webkit-” browser prefix (Chrome, since v28, uses the Blink rendering engine, but this is a fork of WebKit). Desktop versions of Firefox still use “-moz-“. Internet Explorer and Microsoft Edge still use “-ms-“. But common practice now is for browser makers to hide these experimental features behind user-controlled flags/preferences which can help fast-track their production implementation in ridiculous version release schedules (every six weeks for Chrome and Opera, six-to-eight for Firefox. WebKit prefixes can still be useful, as many, if not most, of these eventually get standardized. So basically, if you use any browser prefix at all, “-webkit-” will allow you to cover between 67% and 73% of the desktop market and 94% to nearly 100% of the mobile market.

Variables in vanilla CSS require five extra characters to reference, and typing “var()” might seem tedious to you.

:root {
  --primary-color: #4042c8; /* pretend this is carefully chosen rather than totally random */
}

.colorful > p {
  color: var(--primary-color);
}

Nesting is perhaps not the most elegant, solution, and is arguably less maintainable, than specificity or defining classes for everything.

Lastly, while vanilla CSS files may come out of preprocessors relatively unscathed, those that use features of them may produce CSS files that are somewhat larger than expected.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.