Very Useful Tips For Writing Modern HTML CSS

1. Beware of Margin Collapse
Unlike most other properties, vertical margins crash when found. This means that when the bottom margin of one element touches the top edge of another element, only the larger of the two survives. This is a simple example:

.square {
    width: 80px;
    height: 80px;
}
.red {
    background-color: #F44336;
    margin-bottom: 40px;
}
.blue {
    background-color: #2196F3;
    margin-top: 30px;
}

Instead of 70px between the red and blue squares, we only have 40px, and the edges of the blue squares are not considered at all. There are many ways to combat this behavior, but it is best to use it alone and use only one direction, preferably a lower margin to use the margins.

2. Use Flexbox For Layouts
The Flexbox model exists for a reason. Floating and online blocks work, but they are essential tools for designing documents rather than websites. Flexbox, on the other hand, is specifically designed to facilitate the creation of any design.

.container {
    display: flex;
    /* Don't forget to add prefixes for Safari */
    display: -webkit-flex;
}

The set of properties that come with the flexbox model gives developers a lot of flexibility (no puns), and once you get used to it, making the responsive design is a piece of cake. Today's browser support is almost perfect, so there is nothing stopping you from accessing the full flexbox.

3. Do a CSS Reset
Although the situation has improved a lot over the years, there are still many changes in the way different browsers behave. The best way to solve this problem is to apply a CSS reset, set common defaults for all elements, and allow you to start working with clean style sheets to produce the same results anywhere.
There are libraries like normalize.css, minireset, and res that do this, correcting all imaginable browser inconsistencies. If you don't want to use the library, you can perform a very basic CSS reset using the following styles:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

This may seem a bit harsh, but eliminating margins and padding does make design elements easier because there is no predetermined space between them to consider. The size of the box: the border-box; property is another good default value, which we will discuss in detail in the next tip.

4. Border-box for All
Most beginners don't know the size of the box, but it's actually very important. The best way to understand its role is to look at its two possible values:
Content-box (default): When we set the width/height for an element, its content size. All the mats and edges are on top. If a <div> has a width of 100 and a fill of 10, our element will occupy 120 pixels (100 + 2 * 10).
Border-box: Fill and border are included in width/height. <div>; with a width of 100 pixels; and box size: border-box; it will be 100 pixels wide regardless of the padding or edges added.
Setting a border on all elements makes it easier to design everything because you don't have to do mathematical calculations all the time.

5. Images as Background
When adding images to your design, especially if you want to respond, use a <div> tag with CSS properties instead of an <img> element in the background.
This seems to be more useless, but in fact, due to background size, background position and other properties, it makes it easier to design the image correctly, maintaining its original size and aspect ratio.

img {
    width: 300px;
    height: 200px;
}
div {
    width: 300px;
    height: 200px;
    background: url('/media/2016/08/bicycle.jpg');
    background-position: center center;
    background-size: cover;
}
section{
    float: left;
    margin: 15px;
}

Img element

Div with background image

 

One disadvantage of this technique is that the web accessibility of your pages will be slightly hit because screen readers and search engines will not be able to properly track images. This problem can be solved with impressive object settings, but the browser is still not fully supported.

6. Better Table Borders
The table in HTML is not fun. They are peculiar, almost impossible to responsive, and in general, they are difficult to design. For example, if you want to add a simple border to a table and its cells, it's likely to end with this:
As you can see, there are a lot of repeating borders everywhere, which doesn't look good. This is a quick and uncut method to remove all curved edges: just add a border fold: fold; to the table.

7. Write Better Comments
CSS may not be a programming language, but its code must still be logged. Style sheets can be organized with just a few simple comments to make it easier for your colleagues or future self-access.
For larger CSS parts, such as major components or media queries, use stylized comments and leave a few lines below:

/*---------------
    #Header
---------------*/
header { }
header nav { }
/*---------------
    #Slideshow
---------------*/
.slideshow { }

Details in the design or less important components can be marked with a line of comments.

/*   Footer Buttons   */
.footer button { }
.footer button:hover { }

Also, keep in mind that CSS doesn't have a single line of comments, so you still need to use // syntax when commenting on something.

/*  Do  */
p {
    padding: 15px;
    /*border: 1px solid #222;*/
}
/*  Don't  */
p {
    padding: 15px;
    // border: 1px solid #222;  
}

8. Everyone Loves kebab-case
When the class name and ID contain multiple words, they must be written with a dash ( - ). CSS is not case sensitive, so camelCase is not an option. A long time ago, underscores were once incompatible (now they are), which makes the script a default convention.

/*  Do     */
.footer-column-left { }

/*  Don't  */
.footerColumnLeft { }
.footer_column_left { }

9. Don't Repeat Yourself

The values of most CSS properties are inherited from the first-level elements in the DOM tree, so the name is Cascading Style Sheets. Take the source attribute as an example, almost always inheriting from the parent, you don't have to reconfigure it for each element of the page.
Simply add the most common font styles in your design to the <html> or <body> element and let them drop down. Here are some good defaults:

html {
    font: normal 16px/1.4 sans-serif;
}

After that, you can always change the style of any given item. What we are talking about is just to avoid duplication and use inheritance as much as possible.

10. CSS Animations with transform
Do not set the animation of the element left/up/down/right by directly changing the width and height of the element. It's best to use the transform() property because it provides a smoother transition and makes it easier to understand as you read the code.
This is an example. We want to animate a ball and slide it to the right. Do not change the value of the left, it is best to use translate():

.ball {
    left: 50px;
    transition: 0.4s ease-out;
}
/* Not Cool*/
.ball.slide-out {
    left: 500px;
}
/* Cool*/
.ball.slide-out {
    transform: translateX(450px);
}

The transformation and all its functions (translation, rotation, scaling, etc.) have almost universal browser compatibility and are free to use.