Blog

Today we will talk about how you can make CSS styles awful, by solving the opposite task - learning how to create beautiful and clean CSS. This blog post is suitable mainly for the beginners, although this article can also be useful for their more experienced colleagues. Why do we need comments in CSS? They are written only by the beginners! You should always leave comments to your code, no matter how good of the specialist you are. After six months you can forget what's what, and then take a long time to figure it out. Lost time is the lost money and a bad mood. Of course, I don’t always want to comment, but it's still necessary. This is especially true for the code where some original and non-obvious techniques are used. Do not make your colleagues or yourself from the future suffer. Always remember to add the commenting! The harder the selectors, the better Oh yeah! You have just learned CSS (basics) and now you feel like the king of the world. It's time to show the unfortunate people around you just how complex selectors can be. Bad move. If you use too many selectors, you overly complicate CSS by closely linking all this to the HTML structure of your site or service. If the markup changes later, you'll have to change the CSS. And again we lose time, money and love of colleagues. There is a solution: just use classes and live life to the fullest. The simpler the structure, the easier it is to work with it. In CSS as in many other areas, the adage “The shortness is the sister of the talent” is relevant. Productivity in CSS? There is no need in it also. A major mistake is to forget about the performance of the site or service. If you do not take care of it, the consequences can negatively affect the entire online business of the company for which the site is created, and therefore your reputation. Do not make users nervous, do everything correctly right away. The fact that computers are now very powerful is no excuse: the code still needs to be optimized, and CSS is no exception. The simplicity of the selectors should be prioritized. And understanding how the browser works when searching for the next selector helps a lot. You are most likely viewing the selectors from left to right. But the browser does the opposite, so it can ignore the selectors that are found last. Take care of the browser as of yourself. Look at the CSS example in the image above. The browser in this case will check for the presence of all elements (*), as well as if they are child selectors of the (body). body * { ... } But why? The fact is that almost any visible element is ideally a child element. Verification is meaningless and ineffective. Bad naming of CSS styles? Naming your classes can be difficult for some of us, but this does not mean that you have to give up at the start. Honestly, I doubt that in some situations it is worth using a single letter as the name of a class. .u { font-size: 60rem; } Well, what if you take a super-detailed naming? .former-black-now-red-paragraph { color: red; } Well, so-so, you see. While the second option may seem acceptable, class reuse will be challenging. For example, if you want to make a paragraph a different color then such a name will look very strange. In general, it is best to call classes by content or by element-picture, if that is clearer. Try to call the classes meaningfully, but do not be a perfectionist in this matter. All good things should be in moderation. I want to use classes everywhere, it's so ... cool! Yes, classes are cool, many people like them. But they should be used only where it is needed. If you see that several classes will be constantly used together, simply group them into a separate class. How you will do it you can decide for yourself. But if you are writing a large application try grouping classes rather than having a huge number of them on each of the elements. And yes, avoid using modular classes when possible. I'm a CSS perfectionist. SASS, LESS is not for me! We are all kind of perfectionists. If you have an opportunity, you should use pure CSS without solutions like CSS-in-JS (an excellent solution for some React-projects). If you are developing a large application with tons of elements it is better to use a CSS preprocessor which will make the development a more interesting task which takes less time than in the case of working with pure CSS. It is not necessary, of course, to become a fanatic of the preprocessors, using them in every convenient and not very convenient case. Let's set !important everywhere Oh, this CSS never works! Let's fix the problem with dozens and hundreds !important scattered here and there! Great idea, right? Not really. A lot of !important makes your CSS too heavy. Generally speaking, this rule was created in the second half of the nineties to help web designers redefine existing styles. !important makes the browser understand: you need to forget about everything and use only the “enhanced” fragment. But if you use it in all cases and be lazy to solve the problem in another way you can get a rather big problem. It is best to use !important at the property level, not the selector, moreover, when you adjust third-party code or inline styles. Too frequent use of !important violates one of the main mechanisms of CSS - specificity. And finally, supporters of good CSS writing techniques can advise: Use the content structure in CSS that is a kind of table of contents which will help in case of need to find the necessary code sections. Make CSS readable. Create clean sets of rules making CSS easy to read. Separate jQuery plugin styles. Use a reset style file which allows you to reduce the difference in display in different browsers to obtain a general appearance. Do not use CSS animation often.

Blog

Bad, but yours: how to write a really awful CSS

Website Icons

Optimal Website Design

SEO Basics for Web Designers

WordPress Maintenance Service