Best Practice for CSS Clear or Overflow

Best Practice for CSS Clear or Overflow

If you are in a situation where you always know what the succeeding element is going to be, you can apply the clear: both; value to that element and go about your business. This is ideal as it requires no fancy hacks and no additional elements making it perfectly semantic. Of course things don't typically work out that way and we need to have more float-clearing tools in our toolbox.

http://css-tricks.com/all-about-floats/

Best-practice approach to reset CSS styles on a specific element?

That will be very difficult/likely impossible to ensure. The type of solutions that Starx is referring to assume no preset styles other than the browser defaults, and "reset" in that context refers to harmonizing the inconsistencies across various browser defaults.

But in your case, your client CSS may already contain highly specific selectors such as

#someDiv .aClass a{float:left;}

... and applying those "CSS reset" solutions simply will not override this.

You can see that Truth's selectors also have lower specificity than this, and therefore will fail to ovetride the client's styles in such cases.

Your question is very similar: How to remove all inherited and computed styles from an element?

So the short answer is: there is no way to ensure this because you cannot "remove all inherited and computed styles from an element" ... update: ...unless you can anticipate and override every preexisting style declaration with new declarations having appropriate specificity.

Best Practices for HTML/CSS

That's a good start and you are going in the right direction.

Some further hints though, considering best practice:

1. Use descriptive names which are not explicitly telling their value. For example, do not use color_blue as class name because the color could change if you redesign your application. Better are names that reflect the purpose of that element, like default-action, disabled or emphasized. In the same manner, with-icon would be a better class name than icon_left. Names are about semantics, and not the visual representation.

2. Use specific selectors if applicable. For example, if the button classes are used by button elements use selectors like button.emphasized. That let's you reuse that class name for other types of elements (i.e. div.emphasized), so that you do not have to rename them into .button-emphasized and .block-emphasized.

   If you know more about the structure of your document, you could even distinguish between #content > button.emphasized and #sidebar > button.emphasized and use different button classes depending on the element hierarchy.

3. Use selector inheritance if applicable. If a class shares the same property-value pairs amongst others that differ, you should use inheritance. For example .emphasized for rules that apply to all elements using this class, and button.emphasized & div.emphasized for specific rules, which can overwrite the more general ("parent") selector.

4. Apply naming conventions. Usually, the names are lowercase and the minus sign is prefered instead of using the underscore. Therefore, with-icon is better than with_icon. You can also use uppercase letters like so: withIcon. Personally i prefer the first version.

How to explain CSS clear property?

Lets say we have two rows, where each row has 3 chairs.

Now imagine you are sitting on the chair in the middle of first row.

If you say clear:left, that means you're not allowing anybody to sit to your left, likewise, if you say clear:right, you are not allowing anybody to sit to your right.

And if you say clear:both you are not allowing anybody to sit on either side and to choose the next row of chairs!

What is the best practice to normalize CSS?

normalize.css is the way to go most likely. reset.css is intended to strip all of the default styles completely to their bare minimum (so for example h1 and h2 and the rest of the headings all have the same style) while normalize.css is more of a bare-bones but functional css reset (so you still have basic style differences, e.g. font size between h1 and h2 and so forth).

I believe initializr and HTML5BP use implementations of normalize.css.

what is best practice in regards to HTML propertys or CSS styling

Referring to the question...

For example, this is original size of Potato (original size):

<img src="https://images-na.ssl-images-amazon.com/images/I/811fGdwqf%2BL._SX355_.jpg">

---

Related Topics