I am coding a .psd image to html. But i confused with the best practise to do so. i.e
for styling a achor like a button i use following style attributes
.button {
padding: 10px;
display: inline-block;
text-decoration: none;
background-color: #3f4551;
color: white;
background-image: url("../images/icons/icon_left.png") no-repeat 10px center;
}
now i can use the to get the desired result.
However i have lots of anchor which have same styling as before only with minor changes like icon on right side instead of left and different color,gradient etc.. so i decided to break it in multiple class i.e
.button{
padding: 10px;
display: inline-block;
text-decoration: none;
background-repeat: no-repeat;
}
.icon_left{
background-position: 10px center;
}
.color_blue{
color:blue;
}
now i can use these classes to style i.e <a href="#" class="button icon_left color_blue></a>"
But in this way the markup is getting more and more clumsy and weird.So i decided to ask for which is the best practice ??? THANKS in Advance :)
That's a good start and you are going in the right direction.
Some further hints though, considering best practice:
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.
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.
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.
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.
If I understand correctly ..Your on the right path! I know it looks like your source code is too stuffed but that's the way it works.Remember that classes are used for styling more than one element, and Id (if used in the proper way) are used to style a single entity/element
Related
Hello i'm creating a webpage from scratch and I'm running into a problem
I know using the style tag is not very good, but would it be in this case okay to use? or maybe is there a better way of doing it?
let's say I have this CSS
.group-box {
margin-left: 10px;
margin-right: 10px;
margin-top: 10px;
display: inline-block;
background-color: rgba(30,30,30);
padding: 15px;
height: 100px;
border: 1px solid rgba(10,136,0, 0.2);
}
and I have
<div class="groupbox"></div>
but now let's say I wanted to make my groupbox bigger for one-time use, is it okay to do?
<div class="groupbox" style="height: 300px;"></div>
or should I just make a whole separate class like a small-groupbox and a big-groupbox with all the same properties, just different heights values? I'm leaning more towards the style attribute. But maybe there is a better way?
I am wondering what the CSS "coding" standard would say about this question. my question is subjective, but I want to know what most others who are more experienced at CSS would do in my situation.
Thanks
It totally depends on ‘your situation’. In particular considering maintainability/readability for future developers. There can be no one right answer. Both methods are allowed by the standard.
The thing to watch if using classes is cascading/specificity which you can be confident are dealt with if using style.
But set against that is the ability in a stylesheet to use class names which have meaning. And there is true separation between styling and semantics, the styling not being ‘buried’ amongst HTML. You can also group settings so the maintainer isn’t hunting through many lines of code to find changes.
You can use both, however, it's always best practice to use external CSS, and class than inline-CSS, however if it's very few line, then it'll not affect the performance much.
I'm new in CSS and I have a question about blocks (actually I don't know how do we name the 'blocks' like #my-id{color: yellow} so if you can also answer that it would be great)
So, I wanted to know if it was possible to specifie how will type of a class comport, it would look like this:
.my-class{
h1{
color: yellow;
}
p{
color: blue;
}
}
I hope you understood what I want to explain, so please answer my two questions!!!
Technically, yes, but not when both blocks are rule sets. (e.g. you can put a rule set inside a media query).
Some other languages, such as SCSS, which can be transpiled to CSS, allow you to do that, but in CSS it is just invalid.
I'm curious to know which way is 'best' performance wise, think of this simple general example, I wish to have an element which contains text, to be bold underlined and blue of colour.
I can use this way:
<p class="bold underlined blue">Happy little clouds</p>
or
<p class="bold-underlined-blue">Happy little trees</p>
The first would obviously produce more classes, but the ultimate re-use of these classes seems to be better than making the one very specific class, but again on the other hand, producing more classes, I presume this would have performance implications.
The former approach (using multiple classes) is definitely better. Not only can you style the elements individually with:
.bold {
font-weight: bold;
}
.underlined {
text-decoration: underline;
}
.blue {
color: blue;
}
But you can also style them for specific combination with each other such as:
.bold.underlined.blue {
font-size: 18px;
}
In the above example, the font-size will only be applied if the corresponding element has all three classes, which would essentially be the same as the latter method in itself :)
Not only does using specialised classes give you more versatility, but it is also faster -- as you are likely to reuse styles like font-weight: bold multiple times throughout your document, a dedicated class means that you will only have to write the declaration once, rather than having to write it in each individual selector.
However, these specialised classes should only be created for things that you will reuse multiple times -- creating a specialised class for something that is only used once would be redundant.
Hope this helps!
For the purpose of this demo, I'll use a StackOverflow element for credibility.
If you sign out of SO, you can see a large call to action box at the top of the page. Even easier, just go to their new Portuguese version here - https://pt.stackoverflow.com/
Once you see the call to action box (captured below) go ahead and inspect it with developer tools.
On the div with the ID of hero-content, you will notice a style that I have pasted below:
#herobox #hero-content {
background: #fff7d8;
border: none;
}
I have done some research and as we all know, div ID's should be unique to the page. Although, if they are unique, why would a selector need to state an ID within an ID?
There are a couple of reasons.
Stylesheets can be reused between HTML documents. You may wish to distinguish between #hero-content that is a descendant of #herobox one page and of #somethingelse on another page.
The more likely one in this case is specificity. Assuming, for example, that #hero-content is a <div>, a general rule to set the styling of #herobox div would be more specific that #herobox #hero-content. Adding an extra id selector would increase the specificity.
It might be simply to increase the specificity of that selector.
For example, the author may have wanted to override...
#hero-content { border: 2px solid #333; }
It could also be a side effect of a tool like LESS, where the author may have originally written...
#herobox {
// Lots of other CSS.
#hero-content {
// ...
}
// Lots of other CSS.
}
I use the same 3-4 colors on 99% of the elements on my website. I know of absolutely no way this is possible, but I'd thought I would ask.
Is there any way to specify a color and quickly reference it within other elements further down the page? For example:
.red_color {
color: #FF0000;
}
Now, further down the page we have other elements:
div.example {
padding: 10px;
color: [REFERENCE ABOVE]
}
This way, if the color ever changes, I can update it in one place and all the other elements will follow suit.
I know it is possible if I list all the elements in one place, like:
div.example, div.other_example, p {
color: #FF0000;
}
But this way, every time I add another element to the stylesheet, I have to remember to add it to this list.
Any other ways of doing this?
Thanks.
Yes, but not in CSS. Look at using LESS or SASS. Then you can define variables and use them as you're suggesting.