Refactoring HTML and CSS – 1stWebDesigner

Tutorials & tips about Web Design & Wed Development.

Something that happens often when adding content and styles to our web projects is inadvertently using too much HTML markup. For example, the <div> element is often used to group or wrap elements to add CSS to them. But it’s not always necessary to throw a <div> around the element that needs to be styled. Every HTML element is its own box and can be styled. In this example, the CSS style will look the same whether you add it to the <h1> element or its container element.

Create rules for writing CSS

I always start with the base CSS, which are styles that are applied globally. Then add more specific styles as needed. When I say global CSS, I’m referring to the styles that are applied to all or most of the elements on the page, such as the font-family, defining font colors, general margin and padding styles and font sizes. These global styles are applied to the basic type selectors such as body, headings and links. Then get more specific as needed by applying styles using CSS classes. Even then, start with the more generic class styles like page wrappers and page layout styles.

As the project progresses, CSS styles can be added into related groupings such as the header and footer or specific page content, to keep things organized and easy to find.

Reduce repetitive code

Reduce CSS specificity

See the Pen Reduce specificity by Christina Truong (@christinatruong)on CodePen.0

Do you need to select links, in a “submenu,” in a nav? If so, then use:

If you need to select only links in a “submenu” that specifically uses an ordered list, then use:

But if you just need all the links in any submenu, use the most direct and simple way to get there:

The above article “Refactoring HTML and CSS – 1stWebDesigner” was published here.

We trust you found the above useful and/or interesting. Similar content can be found on our blog:
Please let me have your feedback in the comments section below.
Let us know which topics we should cover for you in future.