# CSS Development Tips and Best Practices CSS ( [Cascading Style Sheets](/content/blog/best-practices-css-web-development/index.html)) is the language that defines a website’s presentation. Mostly, it's easy to learn at first. But writing it the right way is another skill. And one that's essential in professional web development. There are several ways to achieve goals in CSS, some of which are better than others. For example, many team members can access and change CSS files in a software company. Code can break if everyone involved is not following the same standards. This lack of protocol will most likely lead to rewriting it. Thus, developers must stay in touch with best practices to be on the same page as their teammates! So, let's take a look at our team's 12 tips and best practices regarding CSS. ## 1. CSS Readability Write with many lines and give a line to every property. Most people prefer multi-line CSS. Yet, there are a few cases when single-line CSS can be more readable. Multi-line CSS makes it easier to find specific properties, like in the example below. **A. Single Line** ```css .class {color: #fff; text-align: center;} ``` **B. Multi Line** ```css .class { color: #fff; text-align: center; } ``` ## 2. CSS Resets A reset is vital to deal with browser inconsistencies. Further, it helps avoid unpleasant surprises. It can be anything: from a few lines of code on top of your stylesheet to an entire library of styles, like `sanitize.css`. With a CSS framework, it’s not necessary to reset. Also, strategies for resets vary. Let's see it below! **Universal** ```css * { padding: 0; } ``` **Eric Meyer's** ```css html, body, div, h1, blockquote { padding: 0; } ``` **Browser Correction** ```css display: block; ``` **Opinionated** ```css box-sizing: border-box; ``` ## 3. CSS Patterns You should consistently organize your stylesheets. Following organizational patterns allow everyone to find sections of code. We use this index: - Reset. - Font-face (when needed). - Layout styles. - Global styles. - Page sections, in the order in which they appear. - Media Queries. ## 4. CSS Properties Save time and make your CSS more readable by using shorthand properties. These allow you to condense many properties into one convenient property. You can use shorthand properties for time-saving and make your CSS more readable. Even so, it’s important to know how they work before using them. Not defined values in the shorthand property will be set to their default. Thus, unwittingly, you can override defined styles. ```css body { background-color: #f4f4f4; background: no-repeat url("img_cat.gif") fixed center; } ``` ## 5. CSS Specificity Use the smallest amount of needed selectors to apply a property. In the spirit of keeping code as clean as possible, whenever possible, don’t be more specific than `.class`. In some cases, it may be necessary to use more than .class, especially when applying `.ID`. ID trump class in the specificity hierarchy: **ID > Class > Element**. Yet, a selector like `.div.class` is even more specific than an ID. ```css #real { font-size: 12px; } .fake { font-size: 14px; } div { font-size: 18px; } ``` ## 6. CSS Classes You should pay attention to correctly formatting classes. Use the – separator when writing classes! Don’t use camelCase or underscores to name them. **Correct:** first-section **Incorrect:** firstSection, first_section ## 7. CSS Selectors and Properties Space out multiple selectors and long properties. Make stylesheet reading easier with line spaces! ```css h1, h2, h3, background: url('a long URL') no-repeat left bottom other-property:...; ``` ## 8. CSS !important Property `!important` tends to be the last resource. Moreover, it only applies when specificity doesn’t work. This often happens with inline styles or styles injected with JavaScript. ## 9. CSS Calc () You’ve got a friend in `Calc()`! It allows you to use operators for properties with units of measure. For instance, height, width, font size, border, etc. ```css div { height: calc(100% - 80px); } ``` ## 10. CSS Units of Measure Get your units of measure clear! Fonts can get various measure types, like EM, PX, PT, REM, or %. Within those, the most used are PX and EM. - EM: This scalable unit equals the parent document’s font size. - REM: Also scalable but related to the root HTML element. - PX: Screen’s pixels. - PT: 1 PT equals 1/72 of an inch. - %: Percentage of the parent element’s font size. ## 11. CSS Box-Sizing By default, to determine the width, CSS adds element values to determine the width. But, wait — if height is not defined, where is _42px_ coming from? ```css div { width: 100px; padding: 20px; border: 1px solid black; margin: 20px; } ``` Use _box-sizing: border-box_ to make sizing easier to manage. ## 12. CSS NTH Children and Types You can target the children of certain elements, within groups of siblings, with `:Nth-child()` and `:nth-of-type()`. For example, in a `