Formatting & Tools

Sep 30 2020- POSTED BY projecth 0 Comment

Formatting CSS

A comprehensive example
h1 { font-size: 18pt; }
h2 { font-size: 16pt; }

.wrap {
  position: relative;
  z-index: 1;
  float: left;

  padding: 20px;
  margin: auto;
  width: 90%;

  border: 1px solid;
  border-radius: 12px;
}
.main-header {
  background: #3449EE;
  text-align: center;
}
  .main-nav a {
    display: inline-block;
    padding: 0;
    border-right: 1px solid #ccc;
  }
    .main-nav a:hover {
      text-decoration: underline;
    }
    .main-nav a:hover:last-child {
      border-right: none;
    }
.main-content {
  padding: 10px;
}
  .col {
    float: left;
    margin-left: 2%;
  }

...

Use CSS Comb to bring order to your CSS code.

Useful Tools

CSS Resets

You can create your own Reset CSS file, or use one of the commonly used ones out there like:

  1. Eric Meyer’s “Reset CSS” 2.0
  2. Normalize.css
Vendor Prefixes Tools
Good CSS Characteristics

Finally, all of the previously mentioned best practices will grant your code the characteristics of a good CSS code, and good CSS is as follows:

  • Predictable
    CSS rules behave as expected. Updating them shouldn’t affect other styles.
  • Reusable
    Decoupled from HTML, meaning when adding new HTML elements, we shouldn’t need to recode entirely CSS for them.
  • Maintainable
    DRY CSS code. We shouldn’t refactor our CSS everytime we update our project with new components.
  • Scalable
    CSS that can be easily managed by any developer; there should not be a learning curve to it.