I am working on a project using twitter bootstrap.
I wanted to know if it is a bad practice to use our custom class names along with bootstrap classes in the same div or container.
For Eg :-
<div class="container user-profile"> // is this bad practice?
</div>
Should we create another div for class user-profile :-
<div class="container">
<div class="user-profile">
</div>
</div>
Thanks
No, what you are referring to bad practice is not bad practice, especially in light of cluttering the DOM with additional elements.
It is better to add additional classes to an element than to add additional DOM elements each with a new class
There is nothing wrong with adding additional classes to elements, this is how CSS has been created to work. However, you need to be aware that frameworks like Bootstrap rely on their classes for the functionality they offer, so by adding your own you do risk style collision (e.g overwriting a style Bootstrap otherwise was relying on).
With that in mind, Bootstrap uses fairly effective selectors making it unlikely you can so readily override its functionality, but keep it in mind if you're experiencing unexpected side-effects.
DOM elements are there for creating purpose (holding content), CSS is there for creating style, as such, if you are looking to simply add style, dont also add purpose!
Related
I am trying to make an existing website responsive using Bootstrap. The issue is that some classnames in the existing css files there are classes defined that have the same name as in the Bootstrap css files.
I was curious, if there is a way to define the stylesheet to be used as a source for the class styles?
Imagine that there is container class defined in the original CSS files and the container class defined in the Bootstrap CSS. Is it possible to somehow distinguish between them? Or only renaming will do the trick?
Think on it well before dealing with this.
You can link one or another css on the declaration, but obviously it will work only the linked one on this view. (recommended if you don't need both)
If you link both (not recommended), the load of each can be different that you expect, creating visual glitches or loosing usabillity.
You can deal with load times expecting it to load as it's supposed (the first linked before the second one) that it's a bad idea because it depends on many things to work as it's supposed, or using javascript to make some stylesheet load after (not recommended).
Use !important statement (highly not recommended)
Why it's not recommended?
You will be overriding properties and values, making it unstable and increasing your load time, specially if you use javascript.
You'll loose the control over which property the browser is applying to an object and which not. Specially because Bootstrap will take preference over some properties even if the other css loads after (due to well accurated selectors).
!important, ironically is less important than a well accurated selector, so it only work sometimes dealing with Bootstrap. By the other part, it will make difficult each time you need to override a property value (try not to override if possible, but if needed, it's recommendable to use better selectors or different classnames or IDs to get a clean maintainable code).
What you can do?
you've different options.
The first one (the best one) is split this custom css into different css stylesheets depending on the view are needed, to avoid loading styles when there's no reference to them. The second step is to clean those css files, changing classnames to not interfere with bootstrap, and deleting possible duplicate or override of properties that bootstrap already has. You'll have a clean, fast and pretty css.
The second one is to change classnames on your css and cleaning it of possible override of properties that interfere with bootstrap.
The fastest one, if you hate a little the web owner, is simply changing classnames on your custom css, and the references to them on your HTML plus bootstrap classes:
< div class="customContainer container"> ...
And start praying for the overrides to don't cause glitches on some version of some browser.
EDIT:
You've another option, that is editing bootstrap framework classnames, which is not recommended because you'll need to produce documentation and will be less maintainable (loads of programers/designers know bootstrap but not your modified bootstrap), and you'll have to waste loads of time doing it well.
Just add a custom class like "custom-container" and add style to this class.
Rename the classes is the option for existing css. Same name is not option.
Change your initial class names as the default bootstrap classes are needed to make your site responsive, or better still do an edit of the bootstrap bundle
Step 1:
Load your custom css file after you load your bootstrap.
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
If that is still not working just add it as important. But avoid using this trick as it can override styling from base.
Eg:
p {
color: red !important;
}
Step 2:(better one)
You can use IDs for styling.
#custom_id p{
color: red;
}
<body id="custom_id">
I will recommend you to use ID, because id is unique and use for specific styles. its always good to use rather than using !important on class properties later. Another option is rename classes.
First add bootstrap css and then add your css. The style in your class will override the bootstrap class styles(some styles in bootstrap are made important so that classes you should make important in your style).
What are the advantages of using custom attributes over use of classes. I see that custom attributes are used at more places. New frameworks such as Polymer also makes use of attributes more heavily. I am aware of custom data attributes, but attributes are also used at other places than data attributes. Polymer has attributes such as layout, horizontal, inline etc.
I am looking for advantages/disadvantages in following areas-
use in defining css styles
Query Selectors
Semantics
Thanks in advance.
Attributes have a couple of advantages over classes. Firstly, being able to simply put down an attribute is more readable:
<nav center fullbleed>
vs.
<nav class="fullbleed center">
Attributes are also easier to avoid conflicts when it comes to css selectors: It's easier to make a mistake when using css selectors such as nav .center > #fullbleed . Classes do offer more options, allowing a eprson to swap ids and classes, but this can often become a mess as they have to figure out whether you need to use .strong vs. #strong.
I've been doing some freelance html/css work, and lately I've come across a div:class"innertube" and its usually nested inside of a div:id. My question is what is an innertube and why is it used?
The class attribute is used to distinguish between CSS, well, classes. For example, if you have <div class="outertube"> and <div class="innertube">, these two div elements would have different formatting applied to them. It's up to the programmer to decide what names to give the classes.
http://www.w3.org/TR/html401/struct/global.html#h-7.5.2
Often times I see something like this:
<body>
<div class="container">
</div>
</body>
Why not just do:
<body class="container">
</body>
You are perfectly free to do any of the following:
add a class or id attribute to the body element;
directly apply CSS to the body element, with or without class or id attributes; or
directly apply CSS to the html element, although without the class or id attributes and with some important caveats.
Any of these are perfectly legitimate uses of CSS and HTML.
Why <div id="container"/>? Through the years, many CSS techniques have employed arbitrary container elements for conceptual simplicity, to avoid certain cross-browser inconsistencies or because they were simply too complex to be achieved otherwise. A couple of more subtle reasons include that in older browsers, one could not apply CSS to the html element directly, and there were (and are) certain unusual or restricted properties for those elements—often for obvious reasons. (They were sometimes described as being "magic" for this reason.)
These all conspired to create a situation where to achieve almost any moderately complex layout, it was inevitably much easier to just start out with a squeaky-clean container element. Though the practice started as a means to an end it soon became just part of the scenery, and now many developers don't think twice about adding that sprinkling of extra markup.
No, there is nothing that says you can't add a class to the body.
Attaching a class to the body is actually quite common in various CMSes and is very handy for theming or styling specific pages.
From looking at your example, if you just want to use the body as a container, why even bother with the class? There should only be one body element, so just call that in your selector.
Walter, it may make sense if you needed to apply a slightly different subset of styling to a page with a custom body tag.
Using a wrapping div is usually for some presentational reason and make not make sense semantically; if you don't need it for your project, don't use it. Sometimes only using the body tag to contain the page is too inflexible for some layouts, and as Jordan says some old browsers cannot apply CSS to the root element.
I can imagine it can get complicated fast trying to debug style issues when there are multiple classes associated with elements. Currently I'm using multiple classes but in a way that one type of class is for jQuery manipulation and the other is for style. So I can have an element
<div id='myDiv' class'ActionControl SearchBox'></div>
where the .ActionControl is used by jQuery and the .SearchBox has a style associated in the CSS file. Is this right or wrong? What do people more experienced with this think?
What issues have other people come up against? How have they been resolved?
As long as your code is comprehensible, maintainable and clear to others, your system is good.
There is no standard I am aware of in how to give CSS classes, except one:
If you need to target a single element in the page using JS or CSS you should use an ID and not CLASS.
This is definitely a good practice...
What you have to keep in mind always is not to remove the class attribute, instead you will be removing the classes you exactly want to remove.
Also, another problem (not for me) is that multiple classes are not supported for OLDER browsers.
Keep in mind to code your CSS in a way it prevent code duplication so a float:left class can be used in many different elements, this is to keep code clear.
I can't see anything wrong with that. Probably, you could prefix the jQuery classes with e.g. jActionControl, so you have a better overview over who uses what classe if it gets really ugly with many classes.
Of course, you can assign as many classes as you want so there is nothing wrong with your approach in my eyes.
Another way to use multiple classes is to get a kind of inheritance.
.thing { ..blah.. }
.thing.subthing { ..tweaks.. }
<div class="thing"></div>
<div class="thing"></div>
<div class="thing subthing"></div>
Here all the things get "blah" applied to them, but only the subthing div gets the tweaks.
Yes, it can get complicated. As with any power tool, you need to apply it judiciously and with discipline.