Why Use CSS?

CSS can be used for very basic document text styling — for example changing the color and size of headings and links. It can be used to create layout — for example turning a single column of text into a layout with a main content area and a sidebar for related information. It can even be used for effects such as animation.

The Problem

Let's get real here for a second. In terms of web languages, CSS is considered to be the simplest. I mean, really, what could be easier than a simple list of properties affecting an element? And the syntax is almost identical to written English. Want to change the font size? There is a font-size CSS property. Want to change the color? There is a color property.

But despite of all these easy exterior, CSS is one complex system, especially if you're doing it at a professional level, at a high level, and at a high-performance level. The number of ways to select an element is astonishing; not to mention the number of layouts you can use in that set of selected items and how the presentation changes when you talk about supporting multiple browsers and editing engines.

It's easy to stumble upon CSS. Here are some common CSS mistake we all do as a beginner.

1. Overspecificity

.container #layout #header #title .logo a { display: block; }

These are using IDs, which significantly increases the specificity of our rule. They are long, and long selectors also increases the specifity. They unnecessarily prepend class names with an element (eg. .logo), This will not only increase the specifity, but it will also limit the reuse. Let's imagine we've a design comp and we are beginning to add styles to it.

2. Overusing !important

.container #section-a p { background-color: red !important; }

If you start using a few of these declaration, then eventually they will grow exponentially and will always override the properties with a higher specificity.

No !important.png

3. Writing everything into one single CSS file only

Having a 4500 line CSS file is NOT a good way to go. Even if you minify at a later date. You should start separating them into the 'views' or 'components' when you are working on a bigger project.

4. Senseless Random z-index values

.header {
  z-index: 9999999;
}

Many developers use high insanely high z-index values when trying to put something in front of other. If you do this, in case someone needs to move something up to the z-axis, that person will have to set an even higher z-index value, making things worse.

Example Of Senseless z-index Value.png

5. Sticking to plain CSS (Not using frameworks like Bootstrap, Materialize, etc)

You should not just use plain CSS while writing your code. You should use Frameworks also. You simply write less using these frameworks, because they have already written some things which you might have trouble with, like the good ol 'centering a div'.

6. Inconsistent naming

.header-b {/*...*/}

.header-logo-a {/*...*/}

.section-a > p {/*...*/}

These rules are especially common on projects maintained by multiple developers, but it happens on solo works as well. Your project should use a single naming convention. Choose the one that works well for you and your team and then stick with it only.

7. Not making your code organized

If you have CSS classes, ids for a navbar and the buttons inside it are also having CSS classes, put them right after one another rather than having same footer classes in between them. Get the gist, right?

8. Not reading documentation

Documentation is the least interesting, but the most important factor, the aspect of our codebase, and it also helps us understand and learn from the CSS. The first step is to be wise about commenting and documenting within your CSS. The second step would be to adopt an engine that pulls out those comments into a living documentation guide. css_ doc and KSS are the current libraries commonly used in CSS documentation.

Conclusion

Do not use too many specific selectors. Also, Avoid using prefixing classes with tag names.
Limit the use of !important declaration as much as possible.
Don't just write everything in one single CSS File.
Use z-index values wisely. Don't just give them random values.
Don't just use plain CSS in your Code, Use Frameworks too.
Use better naming convention and stick to it.
Make your code organized, so that others can also understand.
Read the documentation thoroughly.

This article is written by @AmTannny

meanii