{"id":1222,"date":"2022-01-31T11:16:11","date_gmt":"2022-01-31T11:16:11","guid":{"rendered":"https:\/\/mobileaders.com\/?p=1222"},"modified":"2022-02-03T18:15:31","modified_gmt":"2022-02-03T18:15:31","slug":"why-dont-use-bootstrap-anymore","status":"publish","type":"post","link":"https:\/\/mobileaders.com\/why-dont-use-bootstrap-anymore\/","title":{"rendered":"Why don’t use Bootstrap or any CSS framework anymore?"},"content":{"rendered":"\n

If you don’t know bootstrap is, Bootstrap<\/a> is a CSS framework.<\/p>\n\n\n\n

All sites look the same!<\/strong><\/p>\n\n\n\n

When you start to see the same layout over and over, users <\/strong>are tired of seeing the same old Twitter Bootstrap theme again.\u00a0Black header, giant hero, rounded blue buttons, Helvetica Neue.<\/p>\n\n\n\n

Yes, we can customize the header to be a different color, maybe re-color some of the buttons, use a different font. finally, that doesn\u2019t change anything. it’s still\u00a0the same Bootstrap.<\/p>\n\n\n\n

Sometimes we can use CSS framework<\/strong><\/p>\n\n\n\n

There are some times it is appropriate to use CSS framework (Twitter Bootstrap\u2019s) defaults. Like for an\u00a0admin dashboard<\/strong>, an\u00a0open-source<\/strong><\/a> project\u2019s documentation, a<\/strong> prototype<\/strong>, or a weekend hackathon<\/strong>. However, once you go beyond the stage of a small test project, it\u2019s time to think beyond the black header, blue buttons, and grey 1px outlined boxes.<\/p>\n\n\n\n

Write your own CSS<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

I know that you write your own CSS style is very hard and this thing is not coming from the first time to write CSS, it’s come from more practice, more reading, or seeing another person style, all this I think will help you to organize your CSS skills so I’ve some rules I think will help you to do this.<\/p>\n\n\n\n

Don’t Repeat Yourself<\/strong><\/p>\n\n\n\n

Don’t Repeat Yourself This is a general software development principle and can be applied in any programming language, as well as in CSS. As we can understand from its name, DRY aims to avoid or reduce repetition as much as possible.<\/p>\n\n\n\n

For example, we can create 3 CSS classes for 3 buttons like this:<\/p>\n\n\n\n

.primary-button {\n  background: blue;\n  color: white;\n  border-radius: 5px;\n  padding: 10px 20px;\n  text-align: center;\n  font-size: 16px;\n}\n\n.form-button {\n  background: green;\n  color: white;\n  border-radius: 5px;\n  padding: 10px 20px;\n  text-align: center;\n  font-size: 16px;\n}\n\n.cancel-button {\n  background: red;\n  color: white;\n  border-radius: 5px;\n  padding: 10px 20px;\n  text-align: center;\n  font-size: 16px;\n}<\/code><\/pre>\n\n\n\n
Or we can use the DRY principle by writing the common rules\u00a0once<\/strong>\u00a0in an additional class and the different rules each in other classes:<\/p>\n\n\n\n
.button {\n  color: white;\n  border-radius: 5px;\n  padding: 10px 20px;\n  text-align: center;\n  font-size: 16px;\n}\n\n.primary-button {\n  background: blue;\n}\n\n.form-button {\n  background: green;\n}\n\n.cancel-button {\n  background: red;\n}<\/code><\/pre>\n\n\n\n
As we can see, applying the DRY principle avoids repetition, decreases the number of lines, and improves readability and even performance.<\/p>\n\n\n\n
Naming<\/strong><\/p>\n\n\n\n
I know that a form of naming classes is not easy, but once it is achieved it is very useful. They will help us to write CSS code in a more flexible, reusable, understandable, and manageable way. but we can do this with BEM<\/a>.<\/p>\n\n\n\n
\/\/ BAD NAMING\n\n.p {\n  \/\/ Rules\n}\n\n\/\/ GOOD NAMING\n\n.article-paragraph {\n  \/\/ Rules\n}<\/code><\/pre>\n\n\n\n
The\u00a0Block, Element, Modifier<\/strong>\u00a0methodology, (commonly referred to as\u00a0BEM) is a popular\u00a0naming convention<\/em>\u00a0for classes in HTML and CSS.<\/p>\n\n\n\n
Developed by<\/a>\u00a0the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project.<\/p>\n\n\n\n
It is based on making differences in CSS classes that fulfill different functions by naming the CSS classes in a special way so that their names describe their function.<\/p>\n\n\n\n
Don’t Use Inline-Styles<\/strong><\/p>\n\n\n\n
Well, there are arguments on the web about this: some are telling you never to use inline styles, while others are arguing that it can be useful in some cases. <\/p>\n\n\n\n
In my opinion,\u00a0the best practice is actually not using inline styles why.
<\/p>\n\n\n\n