Bad CSS habits

May 22, 2024
(©)
Scroll Down
Bad CSS habits

1. Fill up the wild card
The wildcard (*) selector affects all elements. It's okay to contain a line or two, but 1. Fill up the wildcard
The wildcard (*) selector affects all elements. It's okay to contain a line or two, but not a lot of style.


Wildcard selectors have more computations depending on HTML elements. Also, CSS issues that arise during development often erase them.

- Don't use a wild card if you can.

- If you use the library, you don't have to use it even more.

2. 2. h1,h2,h3,h4 ...
There are cases where heading elements are grouped and styled. Individual CSSs for element selectors are often applied, but giving them CSS in this way is often annoying without any special features. In particular, every time you introduce a library or create a new component, you may get additional styling due to the bundled style. This creates a terrible thing that needs to be modified for all elements affected by global element properties.

- If you want to give a common style, please use Class.

- If you have to write in h1,h2,h3 format, never write !important in it.

- There must be a better way, really.

3. Ignore HTML default properties
Many websites may find incorrect use of tags. In particular, the span tag is a frequently misused element. Since span has inline properties by default, giving width and height does not set a value. Even though it is a tag that should be used to select a part of the text, display: block; is used to show how to put width and height in it.

- Please use <span> for text only.

- Please use <li> in <ul> and <ol>.

- Please use <main> no more than once per page.

- Please do not write HTML tags while erasing the default properties.

4. Add the number of the overhead elements as you wish
The title element distinguishes well-designed websites. The title element indicates the importance of text, makes it easier to design, and can give a website-wide consistency. The search engine also judges the importance of H1 and H2 differently and processes the text.

- Please put the key message in h1 and h2.

- Please unify the style for h1, h2 rather than change it by page.

- If you need to change the margin or padding of the heading element, add a class and manage it.

5. Disable Library
Unless you have a specific reason to create a service without using a library, it's stupid. To sum up, it's really stupid. UI libraries can improve productivity by a factor of several, give style uniformity, and take the place of annoyance. And most of them are mobile-optimized libraries. If you reject all of these benefits and don't use the library, you should have a good reason.


I enjoy using Bulma.
- Please use the library.

- If you don't want a UI library, bring an animation library and use it.

- Sliders, accordions, check boxes, inputs, navigation bars, etc. Don't think about making them all with mobile optimization and styling, just use the library.

6. Apply width directly to <img>
The img tag basically changes the width according to the size of the image. That's why I often use it by forcing the width to be used. This is not a big problem most of the time, but it can create empty space when the size needs to change as the screen size changes. The best way is to wrap the img tag with a figure tag and so on, and design the img tag to respond according to the size of the figure tag.


To use the code above, if you give a class like is-128x128 to manage the size, it will not only give uniformity to all images, but it is also easy to manage the size.

The second method is to use the background-image property for div without using img tags.


This method can change fluidly depending on the size of the box containing the image, and there is no empty space created by setting the forced width. The advantage of this method is that it is convenient when text should be included in the image. (Note: It is important to put properties such as background-attachment differently depending on the situation. Generally, fixed is used a lot, but there are some problems related to mobile optimization issues, so make sure to test it when you apply it!)

7. !important Enjoy writing

!important, which ignores all CSS Preferred Selector rules, is often called a last resort and ban. !important has three characteristics.

- If the only answer is important, it's wrong to make it so far.

- !If you start writing the important, you must continue writing it.

- !important will end up colliding with another !important..

8. :before, :after not used
:before, :after is a really powerful friend. Personally, I think the tipping point between beginner and heavy is the virtual choice. :before can give points to subject elements, or dramatic effects to text and styling that you use repeatedly. It can also give you tremendous productivity.

- If you need to display a text box with hover, a virtual selector is recommended.

- It is also good to put a mark such as # or * before the subject element.

- Used for poor input, label styling.

9. Not using Flex
This is a common symptom in developers with weak front development.

It's a pity to see them struggling with online-blocking without a powerful tool called Flex. Flex makes it easier to adapt to different screens, manages alignment, aligns, and allows content to move in a flexible manner. Also, in React Native and others, display properties are only none and flex. Flex is now the default.


Do you still want to use an online block?


- Flex is now a must.

10. I don't know Grid
Grid layouts seem difficult, but if you know the rules, they're a powerful tool, especially when each component has to change to a set size within the grid.


The grid may be the only answer when the proportion of space in the grid needs to change, and when it has an animation effect within it. Of course, not all websites use the above design. It is widely used in fashion and media, where there is a lot of content and there is a lot of section separation. If you want to express a lot of content in three dimensions on your website, I recommend the grid.

- Learn the basic grid rules.

- An hour should be enough.

11. Do not write interaction effects
Surprisingly, almost all sites don't even use very simple interaction effects. Of course, interaction isn't necessary. If a site full of content, such as Naver, Facebook, and Daum, has an interaction effect, it will be complex and burdensome. However, it is essential if it is small in size, has less content, and needs dramatic effects.

- When you show the chart, add the interaction effect.

- When you show a meaningful number, don't just show it, but add an effect.

- Even if you show one image, there is a difference between what appears as it fades and what is just there.

12. Not using preprocessing tools


Now, it's rare to use only CSS. One of SASS, SCSS, Less, and Stylus is the era of basics. In particular, SCSS has almost the same basic grammar as CSS, and there is not much difficulty in learning.


- Use SCSS.

- Learn grammar with other preprocessing tools.

The same goes for my other writings, but all of the above stories are from my own experience. I put a style in wildcards, an unnecessary global style, I used span for blocks, and I didn't use preprocessing tools. Eventually, a lot of effort will produce terrible results.

Good websites show regularity in terms of uniformity, design patterns, and color sets. This makes websites easier for users to understand and more complete.

The guidelines above are essential for easily designing high-quality websites. No matter how much you learn by shoveling, coding is, but you don't have to copy the stupidity I did. Don't waste your time with the code you've written, like me, and use good tools to make it more comfortable and faster.