{"id":13,"date":"2018-01-12T13:18:37","date_gmt":"2018-01-12T13:18:37","guid":{"rendered":"http:\/\/efelti.com\/tech\/?p=13"},"modified":"2020-11-11T22:03:00","modified_gmt":"2020-11-11T22:03:00","slug":"enhancing-styling-flexibility-by-using-css-for-html-files","status":"publish","type":"post","link":"https:\/\/efelti.com\/tech\/?p=13","title":{"rendered":"Enhancing Styling Flexibility by Using CSS for HTML files"},"content":{"rendered":"\n

There are a lot of talks how to make an HTML page more flexible to style by using CSS files without touching HTML file.<\/p>\n\n\n\n

This sample pages where for a same HTML page we have different kinds of styles from a competition to show the power of CSS: CSS Zen Garden – Beauty of CSS Design<\/a> in the page you can display all of designs<\/a> using same HTML file without changing it. Totally different styles which also includes responsive UI and animations.<\/p>\n\n\n\n

Is each HTML file always like this? There are some hints of do-s or don’t-s developers need to take care to avoid the rigidity of styling.<\/p>\n\n\n\n

Avoid CSS inline style as much as possible<\/h2>\n\n\n\n

Inline style is not un-useful for simplicity e.g. if we want to style HTML e-mail, or a single static page where we does not have capability to include external styling file.
But once we plan to have dynamic styled page, we need to avoid it as possible (since the internet browser will prioritize inline style (embedded style) higher than CSS file style from external source).<\/p>\n\n\n\n

Have HTML with Structural Semantic instead of Content Only<\/h2>\n\n\n\n

Instead of having unstructured content, in case there are structural concept of the page, structure it using structural semantic. If you are working with HTML5, use the semantic tags (main, sections, navigations, headings, headers, footers, figures, etc.). If you are using previous HTML versions use div and span semantics to structure the page.<\/p>\n\n\n\n

Define Class(es) for Each of HTML Structural Section<\/h2>\n\n\n\n

Define class(es) of each structural section of the HTML pages make it more easier to select it within CSS instead of complex selection using tagging. It will make the code also more readable for the CSS files for the sections to be styled.
If I am talking about structural section, I did not mean only for section tag of HTML5 but also for div, span, table, li, nav, etc, anything related with structural semantic which are not content related (like paragraph, etc.).<\/p>\n\n\n\n

Avoid of Using of br-tag for Styling Space<\/h2>\n\n\n\n

The br-tag is useful to create line break inside content. But br-tag should not be use for styling. Style the spaces using margin and padding feature in CSS instead.<\/p>\n\n\n\n

Use Shadow DOM Selector in case of Working with Capsulated Components<\/h2>\n\n\n\n

In case you are working with components, e.g. using Angular Framework, React, etc. Your CSS inside the component seems to be un-editable. You might think you can’t edit it from parent component. However this is not true.
Components based frameworks use so called Shadow-DOM technology. You can still modify the HTML styles from parent using Shadow-DOM selector (:host etc.) without changing the HTML of the sub-components.<\/p>\n\n\n\n

Useful Links<\/h2>\n\n\n\n

Other references:<\/p>\n\n\n\n