Thoughts on Styling

November 25, 2020

Styling. Styling is one of the areas in Software Development that everyone has opinions on. Throughout our bootcamp, styling was never something any of us ‘loved’. A few of us like the idea of styling but as soon as you start down the path of learning to style, things can get pretty convoluted pretty quickly. I want to look at three different areas of styling and exam them, from my early perspective.

First, CSS. Plain ole CSS. In many ways I keep coming back to CSS. There are other great libraries and ways to style but nothing provides the flexibility and breadth of creativity options like normal CSS. There are ‘downsides’ to CSS but the downsides usually come down to the individual’s love or hate for CSS. Class or classNames can make the code blurry. ID’s and classes and element selectors can be confusing. If you are able to understand these concepts, you can be much more creative.

Second, Material UI and others like it. Material UI is very nice. It looks nice and is really convenient. The biggest plus is all the ready made components that you can plug and play into your code. However, the convenience also becomes the inconvenience. Unless you like spending hours in docs, which it seems does not happen a lot for styling, Material UI components tend to keep you bound to the components. Altering them is not really that intuitive. If you do alter them most of the time things get a little weird. However, if your app is really simple and you just want nice plug and play components, Material UI and its kind might be for you.

Third, Tailwindcss. I am newly acquainted with Tailwindcss. First impressions after the learning curve is wow. I love it. However, I have found myself wanting to have more options. Again, I am learning Tailwindcss so I believe that there is a way to make custom properties, I just have not got there yet and I want to go back to CSS because I ‘know’ I can figure that out. I also find myself trying to do a lot, as in, use Next JS but want all the freedom of not using Next JS for styling. If that confuses you and frustrates you, me too.

So, ultimately I think the main take away for me from writing and thinking through this is plan. Know what you are wanting to build before you go into. I know that coding something morphs over time and my plan changes but if I want to build a portfolio that shows a lot of creativity but is clean, I am probably going to need to stick with normal CSS. If I want clean and well put together, TailwindCSS along with Next JS is amazing.