BLOG

If you don’t know bootstrap is, Bootstrap is a CSS framework.

All sites look the same!

When you start to see the same layout over and over, users are tired of seeing the same old Twitter Bootstrap theme again. Black header, giant hero, rounded blue buttons, Helvetica Neue.

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’t change anything. it’s still the same Bootstrap.

Sometimes we can use CSS framework

There are some times it is appropriate to use CSS framework (Twitter Bootstrap’s) defaults. Like for an admin dashboard, an open-source project’s documentation, a prototype, or a weekend hackathon. However, once you go beyond the stage of a small test project, it’s time to think beyond the black header, blue buttons, and grey 1px outlined boxes.

Write your own CSS

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.

Don’t Repeat Yourself

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.

For example, we can create 3 CSS classes for 3 buttons like this:

.primary-button {
  background: blue;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.form-button {
  background: green;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.cancel-button {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

Or we can use the DRY principle by writing the common rules once in an additional class and the different rules each in other classes:

.button {
  color: white;
  border-radius: 5px;
  padding: 10px 20px;
  text-align: center;
  font-size: 16px;
}

.primary-button {
  background: blue;
}

.form-button {
  background: green;
}

.cancel-button {
  background: red;
}

As we can see, applying the DRY principle avoids repetition, decreases the number of lines, and improves readability and even performance.

Naming

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.

// BAD NAMING

.p {
  // Rules
}

// GOOD NAMING

.article-paragraph {
  // Rules
}

The Block, Element, Modifier methodology, (commonly referred to as BEM) is a popular naming convention for classes in HTML and CSS.

Developed by the team at Yandex, its goal is to help developers better understand the relationship between HTML and CSS in a given project.

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.

Don’t Use Inline-Styles

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.

In my opinion, the best practice is actually not using inline styles why.

• Inline styles make your pages bigger: If you’d like every paragraph on your site to appear a certain way, you can do it once with six lines or so of code in an external stylesheet. If you do it with inline styles, however, you have to add those styles to every paragraph of your site. If you have five lines of CSS, that’s five lines multiplied by every paragraph on your site. That bandwidth and load time can add up in a hurry.
• Inline styles don’t separate content from design: Inline styles are exactly the same as an embedded font and other clunky design tags that modern developers rail against. The styles affect only the particular, individual elements to which they’re applied; while that approach might give you more granular control, it also makes other aspects of design and development—such as consistency—more difficult.
• Instead of using inline styles, use external stylesheets: They give you all the benefits of CSS best practices and are easy to use.  all the styles used on your site live in a separate document that is then linked to a web document with a single line of code. External stylesheets affect any document they are attached to. If you have a 20-page website in which each page uses the same stylesheet—which is typically how it’s done—you can make a change to every one of those pages simply by editing those styles once, in one place.
  

In the end, this is all my opinion and you can agree with me or disagree but I hope to see your comment’s with your opinion because this will help me to update my knowledge