This article is inspired by this article.
I am using the same format - a dialogue between two developers, one of which are 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 an another route and expand a different topic, that has been both actively discussed and confusing lately - CSS and styling.
As a side note, I would suggest to take this article more as a fun reference of what's out there, rather that comparing it to your current stack. As ultimately, let's face it, web development has 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 write a single line of code since 2016 due to career change. Yesterday I got contacted by one of my old friends to create 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 couple of requirements I gave you?
You could use some framework with pre-defined 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, 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 cold 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 ether 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 offer 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 much more powerful system compared to Flexbox, using two-dimensional layout system.
Two dimensions? Like X and Y axis?
It lets you to lay out content in rows and columns, and has many features that make building complex layouts straightforward.
Alright, seems as 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 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 have'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 to use 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 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 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 event 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 next few months.
It's not that scary. At the end of 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 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 which 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 makes 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 more of traditional way, you can go with inline styles. First you define the styling rules as an object properties an 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 component 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 to check 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, it the main advantage surely is that it enables developers to encapsulate both the UI of a component and itβs 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 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 to look 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, Hashnode and DEV for more!
Top comments (33)
To be honest, I hate every part of CSS and frontend development. I found out that I suck at designing and not every designs meet to the specifications of the client.That's why I went into bacakend development and I have never once regretted my decision
I feel you! Which technologies are you mainly working with?
Well I work with Vue.js, react and JavaScript for frontend while I use node.js,express.js and PHP for backend
We share the same feelings hahaha
I knew I wasn't the only one! hahah xdd
I just use vanilla CSS with BEM methodology - no pre-processors, and the only post-process is minifying the file. π€· Gotta KISS!
Exactly! More than enough to design everything you can think of ;)
That's it!! And so long as your team is onboard with structure and naming methodology, you don't need anything fancy :)
Indeed. Otherwise you can quickly lost track of your styling, create bloat load of extra classes, and the use case of
!importantbecomes a norm.. xddI love this article @madarsbiss . It exactly tells the story of confusion regarding CSS. CSS is a simple concept but the layout implementation in the browser forces us to learn how browsers use it. When we start combining and cascading things, we are easily able to spend a day or two trying to figure out something simple like I don't want that space, I don't want it there, I want row layout instead of column layout. This is why 3rd party solutions are everywhere. Everybody has an opinion.
As you mentioned, might as well carve out a week just to do simple refactoring and it's all done manually. There are some interesting ways to convert this psuedo language into a real one for sure. The more I use CSS the more I want it to act just like JavaScript or even better Typescript.
So until that day comes, (and I'm working on the ideas of that solution every day) I have thrown out all frameworks and use HTML Grid for all layout. With Angular's view encapsulation, I style for each view only. The global CSS is for global only styles. This at least cuts the debug problem down to the minimum. The Grid solves almost all layout issues.
Gone through myself, so I just wanted to express the feeling xdd
Most of the criticism in this article refers to the plethora of API/specs, libraries, and methodologies. Definitely it is confusing and frustrating at times with the choices overload and ever-changing trends. Same can be said about any part of web development thoughβthis fragmentation characterizes the web dev world in general. Heck, how many ways do we have to define a function in JS? To render a page (server side, client side, SSG some of the content and client-render the rest)?
CSS tools' increasing complexity also grows from JS tools' increasing complexity (eg. CSS-in-JS like Styled Components would not gain so much traction if not bcs of React's component-based UI approach).
I don't mind any of those getting called out. What I do object is when people (speaking generally, not necessarily the OP) use this to diss CSS as a whole. Just acknowledge it's a skillset on its own--some are good at / keen on it, some others are not--not some "easy" throwaway skillset that every coder can do.
Anyway, personally I have better peace of mind when not trying to catch up with all the latest tools (both CSS and JS). For many cases, writing plain CSS + CSS variables is enough for me. π€·π½ββοΈ
When it comes to styling, we have never invented anything new, we have just optimized existing methods to achieve more specific tasks. They are all just styles after all.
Honestly, this is how I think about JavaScript. It seems impossible to create a small website without tooling that's twice as complicated.
Haha, JS has been like that for a quite some time :)
CSS has cached up, that's for sure xdd
This is so true.
When you want to create a simple website, without the unnecessary luggage, but then you get lost in all of the aboveπ.
"Jack of all trades, master of none" comes to mind xdd
Thank you so much for this article! Funny and educational at the same time, also helped to clear my mind from the myriad of options, tooling, conventions (and lack thereof) that exists today.
That was exactly my initial purpose on creating this piece! So happy you found it useful!
This should be a Seinfeld episode π€£. Great summary tbh.
Hahah, yeah xdd Lately I was a bit tired of reading CSS this and CSS that everywhere, so I decided to put it all together, to reveal the bigger picture :)
Honestly as everyone is saying. Totally right. This is the general feel nowadays, there is always to much around. Thank you for this.
Thank you for reading. You're welcome! :)
I belong to the frontend clan for web development. I seldom write CSS since I fully depending on Yogurt for styling UI. Vanilla.js, Vue.js, and Alpine.js are favorite tools. I create web components with API callbacks which make my frontend development much easier. But skipping the CSS is more like Zen.
Funny and interesting article! I can now read info about some new CSS ways
Thanks! Glad you liked it :)