?
Solved

Best practice - Using Utility Classes, Yes or No?

Posted on 2014-08-26
1
Medium Priority
?
92 Views
Last Modified: 2014-09-03
I'm trying to get away from years long habits of writing inline styles and move toward standalone stylesheets.

I'm wondering your thoughts on creating a utility class sheet (as well as sheets for specific purposes)

things like

.glow {
	color: white;
	text-shadow: black 0.1em 0.1em 0.2em;}
.indent-10{margin-left:10px;}
.indent-15{margin-left:15px;}
.margin-top-50{
	margin-top:50px}
.margin-top-75{
	margin-top:75px}

Open in new window


It seems to me to make sense especially when you can chain them

<div class="headline indent-15 glow">Some Text</div>

but does that follow best practice?

It does keep the page markup cleaner and does allow changes to the CSS without changing the page markup but something like this

.margin-top-75{
      margin-top:75px}

seems weird somehow.

I'll probably continue to do this in any case because it seems to work for me but I'm just wondering what others are doing.
0
Comment
Question by:SidFishes
1 Comment
 
LVL 58

Accepted Solution

by:
Gary earned 1500 total points
ID: 40286861
Nothing wrong with it, everyone has their own style of writing CSS
0

Featured Post

Hire Technology Freelancers with Gigs

Work with freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely, and get projects done right.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…
Suggested Courses
Course of the Month14 days, 8 hours left to enroll

840 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question