So i'm a beginner and have a problem with how to write my css. css itself has a lot lines of code and i think nowadays a lot of programmers using bootstrap and all website are look exactly the same, and i think both tailwind and bootstrap make the code dirty and hard to read and i rather write thousand lines of code than write dirty code.
so my questions are how do you write your css? and is it bad that i'm using simple css codes?.
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (28)
It's all about context, and I don't think any approach is bad if it's deliberate and thought through. It's also way different if you're the only one working on it vs a team.
I think in a lot of contexts, the worst thing you can do is force a dependency you don't need. Plain old CSS that automatically works in the browser is a pretty glorious thing. I maintain my mom's small business website and it's all plain-old-css — which is great because I really don't want to have to keep dependencies up-to-date if I only make a couple edits a year.
One general tip for CSS which I think applies to any way you write it: Think mobile-first. Designing and building in a desktop-first way is always more painful than making narrow screens and mobile context the default and working out from there.
Thank you very much i always did desktop first but i will try mobile next time. again thank you for helping me.
My approach is to review the sketch/xd/figma file and create a series of css variables with logical names. Once I have these I make a series of classes and/or IDS as 'utility-helpers' to add things like specific borders, font-weights etc.
Once the defaults are in its just a matter of applying them. Its a bit of setup but I find that its useful in the long run and makes amendments/reverts easier to deal with throughout the build as you can just amend variables rather then hunt them down throughout the site.
I hear you regarding tailwing and bootstrap, they're great frameworks but the build step can be a pain and if you don't like tons of classnames it can make your structural code look a bit of a mess. Though you can dodge this by creating your own classnames in tailwind and using the 'apply' method to load in the styles you want.
Anyway good luck. just keep building, breaking and fixing and you'll find your style in no time.
Thank you very much🙏🏻🙏🏻🙏🏻
Thank you very much🙏🏻🙏🏻
I highly recommend the BEM (Block-Element-Modifier) methodology. Since I switched to it, my CSS is way more organized.
I have written about some common mistakes when writing CSS with BEM. Maybe the article can help you. dev.to/visuellverstehen/common-mis...
Thank you very much, i'll read it.
web.dev loosely follows ITCSS which I find useful to be familiar with.
CUBE CSS seems like a scaled down version.
Thank you very much.
I don't think it's bad at all - on the contrary i think it's fantastic that you're trying to use just plain CSS and avoid unnecessary dependencies.
And for what it's worth, i too believe that most of the benefits of using CSS frameworks are overhyped, as well as the fears about vanilla CSS being too hard to learn.
As part of my css learning journey, I recently revamped my portfolio website that used Materialize framework, to now use just regular CSS. To my pleasant surprise I found that it's actually possible to write maintainable and clean CSS code this way, which went totally against all the reasons that people cite for using frameworks.
Thank you very much, yes i find it even easier to use plain css.
Hello Ali. What you should use depends on what you are building!
Lets say you start working for an organization and you are deployed to a project. If that project has a requirement of a specific CSS framework, then you have to use that framework only. You have to work according to project guidelines.
Some projects depend on a CSS framework like Bootstrap or Materialize while some use a custom made CSS framework. Whereas some organization give freedom to the developers to write his/her own CSS given the final UI looks similar to the design.
To answer your other question, how to write your own CSS?
I love writing my own CSS. I have made so many websites where I choose to write my own CSS rather than using a framework. I believe writing my own CSS gives me freedom. Here are some best practices which you can follow:-
Thank you very much!
Try automatic css duplication and similarity tool: github.com/ruilisi/css-checker
I open-sourced the above project to help reducing css code by pointing out duplication lines between css classes. Hope it can help you reduce your css codes.
Thank you very much🙏🏻🙏🏻
Consider the act of learning tailwind and bootstrap useful while also not using it when you have your own choices in the matter.
Coding is ultimately about collaboration, so having the skills to follow several different patterns, and then a personal style you go with is great!
Thanks for the advise.
I just use scss these days. It provides more flexibility than css. Also, there is nothing wrong with bootstrap if your goal is to release something quick to get to a users hand. Most users don’t care how the app looks; they care that it works. If you have the time and a team to customize and design your own styled application, then I’d use scss or learn how to customize bootstrap. You can easily waste weeks trying to make a fully responsive table that also has good ux doing your own css.
Thank you very much.