81081

CSS multi-class or groupped class best practices

I new to CSS/CSS3 and I read in many places different way to build CSS files. Some people all tags in the same elements and some people divide elements and then use different classes in the HTML code. eg:

// css h1 { font: normal 20px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; } h2 { font: normal 16px Arial; color: black; margin: 1em 0; padding:0; border-bottom: solid 0.1em #ddd; }

so in the HTML they just have to put and that's it. If you need to change the border color then you have to change ALL tags that has the border-bottom.

<strong>OR</strong>

h1 { font: normal 20px Arial; } h2 { font: normal 16px Arial; } .colorBlack { color: black; } .headers { margin: 1em 0; padding:0; } .borderBottom { border-bottom: solid 0.1em #ddd; }

and in the HTML you use:

<h1 class="black headers borderBottom">h1</h1>

Very easy but everytime you have to put all the CSS you need

Is there any Best Practices on how to build CSS? Which way is better for performance or loading time?

Answer1:

I recommend to use:

h1, h2 { color: black; margin: 1em 0; padding: 0; border-bottom: solid 0.1em #ddd; } h1 { font: normal 20px Arial; } h2 { font: normal 16px Arial; }

The best practice: Keep your code readable. Readability is not achieved by separating a style definition in several useless classes.

Usually, you want the h1 and h2 tags to have similar styles. For that reason, I've grouped the styles. When you want another property value for a certain element, you can add another CSS definition. <strong>When the selector has a higher specificity, the new declaration will override the previous one(s).</strong>

Answer2:

I think both technics are useful. Personally I often put two or more classes when I need to separate one element from another (example last in row element should not contain margin-right) my code looks like:

HTML:

<div class="images-row"> <div class="image-item">...</div> <div class="image-item">...</div> <div class="image-item">...</div> <div class="image-item last-in-row">...</div> </div>

CSS:

.image-item { border:1px solid red; margin-right:20px; width:200px; height:200px; } .image-item.last-in-row { margin-right:0; }

(supported well in IE > 7 and other good browsers). This solution keeps the code quite clean and also makes me write less (I don't need to rewrite all the styles for the last element or add separate selectors). jQuery element handling is less confiusing (I need only one selector to match all .image-items).

Recommend

  • MySQL INSERT INTO SELECT JOIN
  • Google Charts With Tabs - Chart Area Incorrect
  • Uploading a file using ajax and php
  • to Parse JSON to NSArray in Swift
  • How to filter by date range in Spark SQL
  • targeting multiple selectors in a container for new different styles
  • overflow: hidden behind padding
  • How to solve this ComboBox item setting problem?
  • Set margins in RecyclerView adapter without xml
  • PHP automatically refresh page if the content of a specific file has changed
  • How to order or choose rows in MySQL GROUP BY clause?
  • how to do a GET request using retrofit2?
  • convert string to DateTime in C# with EDT at the end
  • Trim blank newlines from string in Ruby
  • Color a heatmap in Python/Matplotlib according to requirement
  • How to parse utc date
  • Contact form problem - I do receive messages, but no contents (blank page)
  • How to add closing tag for canvas in three js rendered Canvas?
  • How can I make this modal persistent?
  • Cut the background to expose the layer below
  • order post according to custom array position
  • how to display data from 1st point on words on y axis for line chart in d3.js
  • Content-Length header not returned from Pylons response
  • Avoid links criss cross / overlap in d3.js using force layout
  • Java: can you cast Class into a specific interface?
  • Repeat a vertical line on every page in Report Builder / SSRS
  • PHPUnit_Framework_TestCase class is not available. Fix… - Makegood , Eclipse
  • Change JButton Shape while respecting Look And Feel
  • What is the “return” in scheme?
  • AES padding and writing the ciphertext to a disk file
  • Updating server-side rendering client-side
  • How to extract text from Word files using C#?
  • How to apply VCL Styles to DLL-based forms in Inno Setup?
  • jquery mobile loadPage not working
  • Warning: Can't call setState (or forceUpdate) on an unmounted component
  • Calling of Constructors in a Java
  • Traverse Array and Display in markup
  • Transpose CSV data with awk (pivot transformation)
  • Why can't I rebase on to an ancestor of source changesets if on a different branch?
  • Can't mass-assign protected attributes when import data from csv file