Best way to write CSS

Question

Hi, I'm building a website, I'm a little confused about how to write CSS. I want me to use different classes for the same style, should I create a class specific to the style and use them anywhere ... let me use an example ...

Suppose I want to give a minimum height, should I use this:

.div1,.div2,.div3{min-height:335px;} 

and use HTML as follows:

 <div class="div1">afads</div> <div class="div2">fads</div> <div class="div3">fads</div> 

or should I do it like this: CSS:

 .minheightstyle{min-height:225px;} .leftitems{float:left;} .red{background-color:red;} .blue{background-color:blue;} .grey{background-color:grey;} 

HTML:

 <div class="minheightstyle leftitems red">my text in red bg</div> <div class="minheightstyle leftitems blue">my text in blue bg</div> <div class="minheightstyle leftitems grey">my text in grey bg</div> 

how this is the best way to optimize and which I should use, it matters.

Answer 1

I would also. I would not be the first, because these are classes if the elements have the same styles.

I would not be the last, because it defeats the purpose of styles if you are going to create custom classes for each style element. Consider the following:

 <div class="font-size color margin text padding float-left">some div</div> 

In the above example, this is terribly close to using only inline CSS. To change the look above, you will need to change the actual HTML instead of a simple class.

I would prefer to create a generic class, for example. article with article design instead of saying class="font-verdana margin color" etc. You might have a dot for the color, because you want to use different colors for the three div , but in general these three div should have the same class.

Answer 2

Technically, this does not matter, since both will work the same.

However, the goal should be to make your css understandable, reusable, and perfectly minimal, and you should target your selectors and rules to show this.

Some rules, such as background and colors, usually apply only to a specific element. For this reason, you must apply it to the id of the element for which you want to target:

 <div id="header">XXX</div> #header { background-color: red; color: #000; } 

Remember: the identifier must be unique and apply to only one element on the page. Classes are used when you are aiming for multiple elements.

If you apply rules to multiple elements, you would like to use a class. There are many cases where the rules are applied similarly to your second example, for example, the clearfix class, which is often applied to a large number of elements. Others, for example, may be a little unnecessary. In your first example, you would be better off targeting the parent shell, and then have a rule like this:

 .parent > div { min-height:335px; } 

At the end of the day, these are often personal preferences, but just remember that your code should be as neat as possible.

One thing that I always remember when writing code: "If I pass this on to another developer, will they be able to understand what is happening at first sight?"

In the case of another developer adding or modifying your code , it is much easier for them to edit their CSS than edit HTML , which is especially true if they use CMS or something that applies to different template files. For this reason, if you start adding red and leftitems to HTML, the developer will have to rewrite the current rules if they decide that they don’t want the particular element to be red or justified to the left, which can quickly get messy.

For all advanced users reading this, I would recommend using SCSS rather than CSS, as it can make some of them much easier, as it allows nesting and variables inside your CSS - http://sass-lang.com/

Hope this helps!

Answer 3

I would call classes for what they represent, not for how they look. Therefore, the red class is a bad idea. When you decide that all red text should be blue, you can end up using css as follows:

 .red { color: blue; } 

It makes no sense and actually makes the style a lot more complicated.

Answer 4

First of all, do not put your CSS classes in use with names suggesting a visual intent, such as "minheightstyle". Part of the CSS idea is to separate content and style, a proven advantage that you are trying to invalidate with the class names that you show. So, this is your first rule of thumb - if you want to mark an element, you don’t mark it just for styling, you put it in a hint about how this element differs from others in relation to its content. For example, with your three div s, if all are the same, then they can be selected as children of their parent, for example:

 #parent > div { min-height: 300px; } 

If one of them is a selected menu item (for example), you can assign it a class of "selected" and adjust it accordingly:

 #selected { min-height: 300px; } 

In general, try talking about structure when designing selectors, rather than thinking about style. This is probably the advice that you discard by resorting to simpler measures, but I assure you that this is the best investment you can make if you are serious about web design today. Separation of content and style is absolutely necessary, and not only with today's HTML and CSS, it is relevant in other areas.

And secondly, you must remember that the rules that you write are applied slavishly by the browser - that is, elements that ultimately exceed you with your stylesheets must use their own style in accordance with CSS requirements, recounted from the fact that was, That is, if you (for example) decided to redefine the style of all elements with the following selector:

 * { margin: 0; padding: 0; } 

.. because you decide that you are tired of small discrepancies between browsers, applying your small margins and gaskets here and there, and you want steel controls for fields and gaskets on your pages, then you should know that the browser will bind the rule above (either compute the style right then, and there, or put it off for later) for every element that you have. Knowing this, you should understand whether it is better to apply the rule above to some elements. The same reasoning is usually applied to background images - is it better to apply the background color to the children of the element or just to the element itself (the result is often indistinguishable visually)?

  <div id="menu"> <div>Apples</div> <div>Oranges</div> <div>Bananas</div> </div> 

  #menu > div { background-color: brown; } 

or

  #menu { background-color: brown; } 

As for your immediate problem, a good rule of thumb is code minimization, including both markup and style. Get rid of identical class names for children, CSS is quite capable of choosing them without class names:

 <div id="foo"> <div>my text in red bg</div> <div>my text in blue bg</div> <div>my text in grey bg</div> </div> 

 #foo > div { min-height: 300px; float: left; } #foo > div:nth-child(1) { color: red; } #foo > div:nth-child(2) { color: green; } #foo > div:nth-child(3) { color: blue; } 

Of course, there are other ways to choose things in the above, but just try applying knowledge of how CSS works. Abstraction from details is good, but optimization requires knowledge of these details. Try not to talk about the style when developing your markup - type it as if the author (your) style was always turned off or typed its tag elements based on the content. Then apply CSS, browse (often need wrappers, but this is the life of web developers now), and repeat. But try to keep the content and style separate - the change should have minimal impact on the other.

Answer 5

 .text {in-height:225px; float:left;} .red{background-color:red;} .blue{background-color:blue;} .grey{background-color:grey;} <div class="text red">my text in red bg</div> <div class="text blue">my text in blue bg</div> <div class="text grey">my text in grey bg</div> 

Answer 6

if all divs should have the same css style, just use one class and pass it to all your divs if you don't need to use multiple classes for each div:

 <div class="divv">afads</div> <div class="divv">fads</div> <div class="divv">fads</div>r code here 

.divv {min-height: 335px;}