Why you should stop writing CSS in “CSS”
8 April 2019
CSS is fun to write, but it can quickly get complicated. A typical example is having to scroll upwards to check the hexadecimal values of the colors you are using.
Typing a class or id selector several times within a single CSS file, or having to copy and paste every browser’s support prefix to your code each time for cross-browser compatibility can make your CSS file harder to maintain.
// cross-browser compatibility -webkit-transform: $property -ms-transform: $property transform: $property display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap;
The next time you want to write CSS, try not “writing” in CSS at all.
Instead, try using CSS Preprocessors.
What are Preprocessors?
According to MDN, a CSS preprocessor is a program that lets you generate CSS from the preprocessor’s own unique syntax. You write your CSS code in them and then generate a corresponding CSS file to style your HTML.
Though preprocessors have their own syntax, they are quite easy to catch up with, just a few differences from writing vanilla CSS.
6 Reasons Why You Should STOP Writing CSS in “CSS”
Preprocessors’ syntax gives room for some additional functionalities that deliver the following:
Preprocessors use variables to store reusable values. You can store any type of styling in a variable. It could be
font-family, or even values for your
When you define the variable, there is no need to remember the value. Recall the variable whenever you need the stored value.
// variables $my_font: Helvetica, sans-serif $my-color: #333 body font: 100% $my-font color: $my-color
We write HTML by nesting child/children in parent elements like the
a element in a
nav. When using preprocessors, you don’t have to write out the parent CSS selector (
nav tag in this case) each time.
Move to the next line and type the child element as shown below:
// navigation bar nav ul margin: 0 padding: 0 list-style: none li display: inline-block a display: block padding: 6px 12px text-decoration: none
a selectors are nested inside the
Some developers believe this is coming to CSS. But hey, it’s not here yet, it doesn’t hurt to get used to it before its arrival in CSS. :)
Preprocessors make CSS’s existing
import lets you split your CSS into smaller files for readability and maintainability. It takes the file you are importing and adds it to the file you are importing into.
// _reset.sass html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;
You can import the
reset.sass file as shown below:
// main.sass @import reset body font: 100% Helvetica, sans-serif background-color: #efefef
This means you can have the
main.sass file, then others like
variables.sass. You import other files into the
main.sass using the preprocessor’s import syntax.
The imported file is then added to the end of the
main.sass file (the file you imported into).
extend stores a styling or series of styling into a class. It works like a variable. It uses a placeholder class (%) to tell the compiler not to print the class unless extended.
When the class is extended into an element, then the element inherits all the styling properties saved in the placeholder class. You can still add unique styling if needed.
// This CSS will print because %message-shared is extended. // "%" illustrates the placeholder class %message-shared border: 1px solid #ccc padding: 10px color: #333 // This CSS won't print because %equal-heights is never extended. %equal-heights display: flex flex-wrap: wrap // This extends without adding any other styling .message @extend %message-shared // These extend with additional styling (green, red, yellow) .success @extend %message-shared border-color: green .error @extend %message-shared border-color: red .warning @extend %message-shared border-color: yellow
This saves time and keeps your CSS clean.
5. Arithmetic Operations
Preprocessors allow you to run arithmetic operations in your CSS. It supports standard mathematical operators like
// Arithmetic operations .container width: 100% article[role="main"] float: left width: 600px / 960px * 100%
Minification reduces your file size to speed up load time. It removes white spaces and unnecessary characters from your code (CSS in this case. Preprocessors allow you to generate a compressed version of your CSS. I know there are several other ways to generate this, but hey, this is cool as well. :)
Having to use the terminal when compiling is the main downside of using preprocessors. However, there are other ways to compile, such as using CodeKit, Compass.app, and GhostLab. There are now some in-editor plugins (like Live Sass Compiler on Visual Studio Code) to help with this as well.
Try out any preprocessor of your choice. I bet you won’t ever write CSS in “CSS” anymore. If you have been using preprocessors, share your experience in comments.
Peace out and happy coding!