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
Latest comments (28)
Thank you very much🙏🏻🙏🏻
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🙏🏻🙏🏻🙏🏻
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🙏🏻🙏🏻
I use bootstrap and have no Problem but it's cool to use bootstrap and anywhere you want , you can reboot bootstrap 😃
Thanks for sharing!
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.
Using tailwind ✨
Thanks for sharing.
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 prefer to use the BEM method. Pretty simple to understand its code later on.
Thank you very much.
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.