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


    This is a translation of the article by Ohans Emmanuel, who has been working for many years in the development of websites and services. His main passion is CSS, here he feels like a fish in water. Ohans readily conveys his love for work and knowledge to readers.

    Today we will talk about how you can make CSS styles awful, by itself, solving the exact opposite task - to learn how to create beautiful and pure CSS. The material is suitable mainly for novice web designers and developers, although as a reminder, the article is also useful for their more experienced colleagues.

    Skillbox recommends: Online Profession Web Developer Developer online course .
    We remind: for all readers of "Habr" - a discount of 10,000 rubles when writing to any Skillbox course on the promotional code "Habr".

    Why do we need comments? They are written only by juniors!




    Comments to the code should always be left, no matter how good a specialist you are. After six months, you can forget what's what, and then for a long time to understand the nuances. Lost time is lost money and bad mood.

    Of course, I don’t always want to comment, but this is still necessary. This is especially true for those parts of the code where some original / non-obvious techniques are used.

    Do not make your colleagues or yourself from the future suffer, do not forget about the comments. Everyone speaks about the need for commenting, but, unfortunately, talk does not always mean the fulfillment of this rule.

    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 these unfortunate people around you how complex selectors can be.

    Bad move.

    If you use too many selectors, you overly complicate CSS by closely linking all this with 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 “Shortness is the sister of talent” is relevant.

    Performance? She also does not need




    A major mistake is to forget about the performance of the site or service. If you do not take care of it, the consequences may negatively affect the entire online business of the company for which the site is created, and consequently, on your reputation.

    Do not make users nervous, do everything 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 paramount. 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 about yourself.

    Look at the CSS example in the image above. The browser in this case will check the presence of all elements (*), as well as whether they are child body selectors.

    <sourcelang="css">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? We do as God put on the soul


    Naming can be difficult for some of us, but this does not mean that you need to surrender ashore.

    To be honest, I doubt that in some situations it is worth using a single letter as the name of a class.

    .u {
  font-size: 60rem;
}

    Well, 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 a paragraph wants to make 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. In general, 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, like everything else, 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 is a purely individual thing. But if you are writing a large application, try grouping the 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 - not for me!


    We are all kind of perfectionists. If there is such 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 to solve 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 case.

    We set! Important everywhere




    Oh, this CSS, it 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 and 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, 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, and 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 that will help in case of need to find the necessary parts of the code.
    • Make CSS readable, that is, create clean sets of rules, making CSS easy to read.
    • Separate jQuery plugin styles.
    • Use the reset style file, which allows you to reduce the difference in display in different browsers to obtain a general appearance.
    • Add CSS animation last.

    Skillbox recommends:

    Tags:

    Also popular now: