This article is inspired by this article.
I am using the same format - a dialogue between two developers, one of which is giving different options to less experienced dev. While Jose's article is targeted more on JS tools and the environment setup, I decided to take another route and expand on a different topic, that has been both actively discussed and confusing lately - CSS and styling.
As a side note, I would suggest taking this article more as a fun reference of what's out there, rather than comparing it to your current stack. As ultimately, let's face it, web development has a long time ago entered the phase, where the most important skill is to learn what not to learn.
-Phone ringing-
Hi there!
Long time, my friend!
I heard you still do code?
Yup, mostly front-end! What's up?
As you know I haven't written a single line of code since 2016 due to a career change. Yesterday I got contacted by one of my old friends to create a new website about his business. He wants it to be custom styled and fully responsive.
Good for you! A nice side project is always nice!
I have a similar project template in React I developed back then. I was thinking to use it as a basis. The problem is - it comes with this single huge 3000 line CSS file, which is super hard to follow, multiple things are repeating, not structured at all, and so on. I'm calling to get your advice.
I'm here to help, ask me anything.
So, my initial idea was to re-visit it, clean up the unnecessary stuff, re-arrange the order, and write comments to make more sense of stuff.
Alright. Are you gonna do all of that in your single CSS file?
Yeah. I need to create some color scheming, add some interactivity on user actions, fix some media queries, etc, so I was thinking it would fit.
It's surely achievable, tho nowadays I would not do vanilla CSS anymore!
What would be my options, considering a couple of requirements I gave you?
You could use some framework with predefined colors, implemented effects, and responsiveness, for example.
Oh, like Bootstrap?
You could use it. Although it would not be my preference.
Why? I mean it was quite popular way back then when I left.
It still is. There are also some others like Foundation, Bulma, Materialize, Semantic UI to name a few.
Then why not just simply use one of them?
They all have their quirks and perks. The main downside is that websites look all-too-familiar, template-based, and quite honestly, dull.
Oh, so am I limited to do my own styles then?
Don't get me wrong. You surely can, but in that case, you would have to overwrite a lot of stuff. You would have to add a lot of custom CSS.
I see. But framework would at least simplify my layout and responsiveness, I guess..
By the way, what approach do you currently use for your layout?
I use CSS floats.
Since you would not want to affect styles, maybe you could use something lightweight like Skeleton or Pure CSS.
Pure CSS? My style sheet already is pure CSS!
No. There is also a lightweight library called like that - a set of small, responsive CSS modules.
Weird. Well, I'm not familiar with either of them in that case.
Then you should at least upgrade your layout to Flexbox.
Gosh! What's that?
Flexbox is a one-dimensional layout model, that offers space distribution between items in an interface and powerful alignment capabilities without using float or positioning.
Sounds neat, I never liked floats anyway. Why did you say 'at least', when referring to Flexbox?
I mean there are other alternatives for layouts, like CSS GRID.
And what does it do?
Essentially it's a much more powerful system compared to Flexbox, using a two-dimensional layout system.
Two dimensions? Like X and Y axis?
It lets you layout content in rows and columns and has many features that make building complex layouts straightforward.
Alright, seems like a pretty powerful tool. I guess I could use it.
It might have a steeper learning curve, but once you master it, it's pretty rewarding.
So, what would be my alternatives for styling?
You could write custom CSS and use extended features like CSS variables, mixins, nesting, imports, and maybe even some math and helper functions for your styling to make it more organized.
Variables and functions in CSS? Did I hear it right?
Absolutely right!
Is that some special syntax in CSS I'm not aware of?
You would use some CSS pre-processor for that.
What would you recommend for that?
You could try out SASS/SCSS, for example.
Two? What's the difference between them?
SASS is a style sheet language that has two syntaxes. The newest one is known as brace syntax or SCSS. The second, older syntax is known as the indented syntax or just SASS. Only the most recent one is mainly used now.
So did they purposely put different syntax names, to confuse people?
SCSS is actually a superset of CSS, similar to Less. Both came out around the same time.
Less? What's next? A pre-processor called More?
Well, I haven't heard of that yet. You never know nowadays, tho.
Good. As if there wasn't anything for me to catch up as it seems!
I don't want to confuse you, but there are also other pre-processors like Stylus, CSS Crush and Myth.
Stop! Enough of all these! Let's move on!
Alright. You told me, you might be working with animations, right?
I haven't yet planned that far, but there could be some stuff like gradient colors, box shadows, and transitions.
That means you could be dealing with some experimental CSS features at some point. I would recommend using some post-processors for that.
What are they? Are we switching from Pre to Post now?
CSS post-processors can parse regular CSS and transform it without any special syntax required. By that, for example, you can make sure vendor prefixes get automatically added when needed.
Then how would I achieve that?
You could use PostCSS and auto-prefixer plugin for that.
Damn, I'm getting confused!
You could do even more awesome stuff with various PostCSS plugins like identify errors and inconsistent conventions in your CSS, automatically change classes to avoid name conflicts, and so on.
Alright, guide me back! Where were we? SASS?
If that's your weapon of choice. They call it the superpowers of CSS.
None of these processors, tho, would give me any guidelines towards best practices, right?
Unfortunately. That's why you would have to choose a proper CSS architecture, a methodology on how to write your CSS.
Like what?
Like BEM, for example.
And what does it, whatever it means, do?
Essentially it's a naming convention that makes your front-end code easier to read and understand, easier to work with, easier to scale, by creating class names based on the nesting levels of components in the block. It uses block, element, and modifiers pattern.
Yeah, but whether this way the class names would become pretty verbose?
Depending on the complexity of your markup they would. If you want, there is another alternative, called SMACSS.
Are you just randomly making these up? So what's different in that?
The idea of this architecture is to not mix code of several categories on a single file, because it can be very complicated to find a simple line of code to change. CSS structure is based on five categories: base, layout, modules, state, and theme.
Oh, so the other one follows an even more detailed pattern?
Yes. There are also some others you can check out, like OOCSS and SUITCSS.
Alright, one thing is for granted. Goodbye 8 hours of sleep for the next few months.
It's not that scary. At the end of the day, these are just some guidelines on how to structure your styles.
So once I've chosen my architecture, I just change my CSS extension to SCSS, import it and I'm ready to go?
Not exactly. First, you need to set it up in your project and then compile it to regular CSS.
What a surprise! So how do I go with that?
You need to install node-sass package first in order to use it and then you could include the watch command in your scripts, so it recompiles every time there is a change. Or you can use some bundler like Webpack to do that.
Alright. So after all of that my SCSS is still an external file that I import into my React component?
Correct.
Well, finally! At least we agreed to something!
You know what? Wait! Since you will be designed components, you should probably try CSS-in-JS.
Wait, what? CSS-in-JS? You mean writing CSS directly in JS?
Well, kinda.
I thought CSS and JS were two different technologies!?
Well, they are. I mean, not anymore.
Come on! Please tell me you are kidding!
I'm not. Modern web development has been oriented that way, for quite a while now, actually.
So do I paste everything from SCSS to my component and pray to God it will somehow magically work?
Nope, first, you set up CSS-in-JS support by installing a proper dependency. For example, React has a library called styled-components, allowing you to write component-level styles in your app.
So where and how do I write them?
Styled-components make use of tagged template literals to style your component. You create a variable that would hold our styling and also act as a wrapper around content.
So my styles are strings now? This is just too confusing!
Yeah, it might take a while to get used to it. Tho, if you prefer a more traditional way, you can go with inline styles. First, you define the styling rules as object properties and then add them to your elements using style tags via JSX.
Object properties? That means the styles are still directly included in JS file, right?
Yeah. Well, if you don't want to define your styles in components directly, you can use CSS modules.
Modules in CSS? I'm just aware of JS modules being introduced with ES6.
Actually, it's not an official spec or an implementation in the browser but rather a process in a build step, that changes class names and selectors to be scoped. Make sure you include modules.css in your filenames, otherwise they will not work.
I see. Since I am familiar with the concept from JS, I might use them.
Before you settle down for your final approach, I would still recommend checking out other CSS-in-JS libraries Radium, Aphrodite, and Emotion, tho.
I thought we were friends!? What's the point of all this CSS and JS mixing?
Depending on the project, there might actually be lots of them. But, to put it simply, the main advantage surely is that it enables developers to encapsulate both the UI of a component and its behavior together, within a single source.
Alright. Then someone just should create a tool like JSS and call it a day! Adios CSS!
You know what? There actually is.
Now, this is becoming TOTALLY ridiculous!
JSS or React-JS is an authoring tool for CSS. It's a new styling strategy that hasn’t been adapted so much. It is framework agnostic and consists of multiple packages like the core, plugins, and framework integrations.
I called you to give me advice on my vanilla CSS and now we are talking about a tool called JSS. AWESOME!
You're right, forget that! Maybe you would better like some low-level utility-first approaches.
This is COMPLETELY nuts, man!
No, no! I'm being dead serious! I would recommend looking into Tailwind CSS. Instead of opinionated pre-designed components, Tailwind provides low-level utility classes that let you build completely custom designs.
YEAH, YEAH... And you are telling me as if I'm gonna use any of that!
Actually, you should look into Atomic CSS architecture. It simply defines a set of classes representing single-purpose styling units. And you could even use a tool like Atomizer to generate your style sheets.
LISTEN, DUDE! So you just keep mentioning all that gibberish to me, from fancy frameworks and multi-dimension layouts to mystic pre-post compilers, mixed CSS-in-JS libraries, various CSS architectures, and now Atomic CSS generation tools just to irritate me or what?
No, why would you think like that? I brought up all this Atomic CSS approach as it's the most recent one and pretty radical to other methodologies out there. The styling is done using classes, where each class will have only one style. Breaking down styles into atomic, or indivisible, pieces. A basic foreground and background color change on hover could look like this simple one-liner: <div class="Bd Bgc(#0280ae):h C(#0280ae) C(#fff):h P(20px)"></div>.
That's enough. YOU WANT MY HEAD TO EXPLODE?
But man, I just tried to...
You think you're funny? Here is mine. NO CSS. Now, how about THAT? Who is the KING now?
Sounds fancy, although...
I said ENOUGH! I just gonna remove all the styles and hope my client will see my project awesomely styled. If he calls back, I'm gonna answer and say these are invisible styles and only the chosen ones can see them.
-Call ended-
Hello?
I hope you enjoyed the read!
Feel free to follow me on Twitter, LinkedIn, GitHub, Hashnode and DEV!
Contact me via hi@madza.dev for more.