For situations where I need to set special-case widths of elements, I've been using some utility classes like width--8em. I considered at first that this would be more maintainable but now I'm starting to wonder because I end up with so many one-off classes. Is there a performance advantage regarding reflow one way or the other? Any other maintainability advice welcome.
class
<div class="width--5rem">example</div>
with CSS like
.width--5rem {
width: 5rem;
}
style
<div style="width: 5rem">example</div>
Functionally, there is no difference. It is more commonplace (and better practice) to use classes and place all CSS in external files and link them with:
<link type="text/css" rel="stylesheet" href="pathToCSSFile"/>
I agree with acarroz5 where I prefer to put all of my element styling in css files. If you have dozens or hundreds of html files that use the inline style of 5em but then decide you want to change them all to 10em, you'd have to do a "find in files" to see where they all are and then potentially have to change each file manually. If you have a class defined in 1 css file, all you have to do is change that one value in that one file to get the desired effect. Much less time consuming and much more efficient.
I try not to use too many special-case element positioning or dimensions if I can avoid it - for me, it just seems to make things on the page look messy and seems to throw off symmetry.
If you really need to use some special case styling, maybe put all the special cases in it's own css file - that way they're easier to find and modify.
Related
I have a page that has 20 elements just like:
<div style="border:1px solid #000; cursor:pointer; font-size:20px; line-height:30px;">Hello</div>
What would be the benefits to do this below:
<style>
.custom_style{border:1px solid #000; cursor:pointer; font-size:20px; line-height:30px;}
</style>
<div class="custom_style">Hello</div>
<div class="custom_style">Hello</div>
<div class="custom_style">Hello</div>
...
Visually it's the same and, since I am not loading any external CSS file with the class custom_style, I am wondering how these 2 codes perform.
If it was a JS code I would be plenty of alternatives to check the efficiency of the code, but since this is pure HTML/CSS how can I check that? And if instead of 20 elements I had 200?
EDIT
I thank you all for the help but maybe I was not clear on my question. I dont wanna know the pros/cons of inline styling. I would like to measure performance, rendering performance. Which one would render faster? And by how much? Sorry if I made you lose your time. Despite that, all answer so far are pretty clear and should be considered by people thiking about using inline/class styles.
DRY (Don't Repeat Yourself) Code
Say, if you want to change a value, font-size: 24px, you might do n number of times than doing once in CSS. Plus the size of the code is smaller too.
Cascading / Overriding
I wouldn't talk about putting the CSS in a separate file, but definitely, inline styles are frowned upon, as inline styles cannot be overridden other than using !important.
Presentation / Content Separation
You should really separate the both.
Inline vs Class (Selectors)
Selectors is the natural consequence of sharable style rules, however
they came to CSS together with a complex selectors specificity
concept.
Style rules defined inline can not be reused between many nodes. They
need to be defined and parsed over and over, even if they are exactly
the same.
Application of inline styles to every element from JavaScript has a
reasonable overhead in the library layer responsible for that.
Inline Styles are still good, when you need to animate specific
properties of a specific element.
Inline Styles implement only a subset of CSS. They don’t have media
queries, keyframes, pseudo selectors etc.
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).
I got a lot of repeating CSS conditions (with only numerical differences) in my CSS file. I'm wondering how I can make it have less conditions?
ps. I know LESS or SASS can make it easier, but it will still generate the same amount of CSS in the end.
FIND CSS HERE
Any other feedback is also welcome!
There isn't really much you can do. In the end the browser will interpret the css as it is looking in your file.
You could do the following though:
1.Group selectors together. This may affect the readability and structure of your css.
.row div.gutter-lg-10,.row div.gutter-md-10 { padding-right: 10px; }
2.You can minify your css for production which will save you some bandwidth.
What you're doing is the absolute opposite of Good CSS(tm).
The point of having CSS next to HTML is the separation of semantics and presentation. This is achieved through anchoring CSS rules to generic markup so the HTML is not polluted by presentational concerns. This of course only works if you use generic classes and IDs that are relevant to semantics. So for example:
<p class="red-background-with-bold-font">This is extremely wrong</p>
<strong class="error">This is extremely right</strong>
The second example is good because it does not imply anything about presentation, and you might change it to italic green one day without breaking semantics, or touching HTML.
Now have a look at your CSS:
.row div.gutter-xs-60 { padding-right: 60px; }
div[class*="col-"][class*="-x-10"] { width: 10px; }
div[class*="col-"][class*="-p-35"] { width: 35%; }
What you're essentially doing here is making a huge-ass CSS monster to avoid having to use inline styles. There is however absolutely no added value in that, since the HTML is still hardcoded in the end: you cannot change the meaning of -x-10 to have a width of 20px one day without causing major obfuscation, meaning there was never separation of concerns to begin with.
So in the end - inline styles are not always wrong as is sometimes taught. If you are rendering some custom elements, just use them, it's what they're there for:
<div style="width:20px;padding-right:60px">This is far better and clearer...</div>
<div class="row-x-20 gutter-xs-60">...than this draconic invention</div>
And it renders a lot faster too, avoiding the hundreds of partial-classname selectors, and saves tons of bandwidth in mostly unused CSS.
I would like to add something. As I can see there many repeating styles in your CSS which can be generated by a javascript code using simple loops and conditions, this way you can achieve much smaller CSS file (just in case you want to save bandwidth).
You can see here how you can do that here : How to dynamically create CSS class in JavaScript and apply?
Ofcourse this may lead to a performance issue(because you will generate that script every time you load that page) but that will be negligible to notice. Give it a try :)
This can be one of ways of having "less conditions in you CSS file".
Just got a new webpage with css for a fancy box popup from the design team;
And they don't know or don't care to look for existing classes and ids;
I need a working solution without any IFRAME
The problem is that there are already over 20.000 css lines in the main css file, and at some point something will get overwritten and the entire website will do a big BANG!
This new webpage has very common class and id names, and I am talking about almost 100 tags with css properties;
I want to know if there is a method to encapsulate this new css properties and the future ones;
And if there is a way to do this, how can it be done?
With this webpage I got lucky, I pasted the tags with content and just before this, I used the style type"text/css' tag; But i will not always be lucky;
Just because we get webpages with css code written by different people, it does not seam fair to me to create new css classes if some of the properties or names or ids intersect with each other.
I now have about 10 classes for the a tag and im most part, the properties are the same;
Use targeted rules and let the cascade take care of it for you. Put your popup in a wrapper with as detailed of a name as you like.
<div id="myPopupDivWithCommonIds">
<!-- rest of popup -->
</div>
And target your css rules to that div.
#myPopupDivWithCommonIds .error { color: bright-pink; }
#myPopupDivWithCommonIds #main { width: 93.21%; }
Etc. etc. This takes care of the css rules and prevents your new stuff from overflowing. You will have to take care to make sure none of the other rules trickle down; the best way for that is to judiciously overwrite any properties that are defined (what Pekka said). You could also go nuclear on it and include a custom 'reboot' or 'bootstrap' stylesheet and again re-target all of its rules to your new popup div (like you said, it's difficult for 20k lines of css; but including another file with the resets rules targeted to your div by appending the #id selector as above helps a little).
Oh, and that still doesn't address the problem of repeated ids technically being invalid markup and very likely to interfere with any JavaScript you're trying to run on that page.
If this sounds like a mess, well, it is. Your developers and designers have got it to that point and short of a serious refactoring, you're not going to get back to a clean solution. An iFrame may seem like a hack or impossible for your use case, but it really would clean up a lot of your correctly foreseen problems.
You're creating an HTML layout. Let's assume that you don't need the benefits of multiple stylesheets, that a small increase in HTML size is not a concern, and that you have a style which will only be used once. I'm often in favour of using an inline style here, as I view the repetition of your CSS class name or ID as the cost of an abstraction you don't currently need, and may not ever use.
Standard doctrine these days is to always create HTML layouts using semantic markup and CSS styles, so am I missing something here? Please let me know your thoughts.
Even if you only use a particular style once there are still benefits to keeping it with your other styles and not putting it inline. First, there is the separation of concerns that leads to improved maintainability. If you know you are going in to make only a style change, there is a single place to look for any changes. Another benefit is the self-documentation from having to type out the class name. By giving that style a name, even though it is used once, it makes the semantic code below more declarative -- you can read that not only is this random p a paragraph, it is also, say, the intro paragraph.
This is, of course, assuming that you are never going to use that particular style again. If you might than there is even more reason to factor it out into a named style. Inline styles aren't evil, but they are somewhat of a gateway drug.
Ideally your CSS should be "Object Oriented" (at least, as OO as CSS can be). You should "inherit" from classes that set common properties and create new classes when you define properties that could be used elsewhere.
Take a look at the OOCSS project which is trying to espouse these principles (or re-introduce them as it were).
To quote Welbog:
... It seems to me that "OOCSS" is just CSS that isn't written haphazardly. Much the same way you can write non-object-oriented designs in OO languages, you can easily mess up the fundamental ideals upon which CSS was created. OOCSS seems to be saying, "Let's not screw up anymore, guys."
One advantage of keeping the HTML and CSS separate is that you can re-skin the webpage without changing any of the HTML.
Steve
There are some situations in which I usually neglect creating a new class for a simple style change on a single element. It is usually pretty clear when you are doing it that there's a low-to-zero chance of you needing to apply that particular style to something else later down the road. The most common case for me is when I need something to have a particular padding/margin to be in the right place but it's not an element important enough to have its own ID.
This may not be a popular opinion here, but in those scenarios I don't think an inline style is evil.
Personally, I've found that I have an element or two and I would put an inline style in, go back and see that I need more than that element, so I'd change it to a class or forget about it and be not able to change it.
You could also try putting a certain div / page class, and write descendent styles for that in the stylesheet instead of inline elements.
Also, if you ever decide to add javascript, you won't already have a well-labeled class there and you'll need to change it.
Usually this isn't much problem with dynamically generated websites, but it can become a large problem when you go overboard and have tons of inline tags to switch out. It also can make it harder for people if they wish to disable styles for accessability etc-- you usually can overcome this by using a class.
Say, using <b style="color:red">bold</b> instead of body.products div b {color:red}.
I'm personally a fan of selectors, not using too many classes. They are more reusable, and you can edit the whole site in one place with the stylesheets.
But this is overkill <p style="font-weight:bold;font-size:1.2em; text-index:20px;">Indented Bold Paragraph</p> so it this <p class="indent bold larger">text</p> instead you can door ``<p><b></b></p>.
"A foolish consistency is the hobgoblin of little minds"
So, in this case is which is the foolish consistency? :) Why does DRY take precedence over the separation of markup and style?
Can you be sure that your CSS rule will only be used once? More over, how can you be sure that it won't need to be changed in the future, and how can you be sure that you would be the person needing to make the change? Are you sure you even need to add a class or id to target this unique element?
I guess I am having trouble seeing how adding
<input type="submit" style="border: 1px solid red;"/>
is some how "superior" to 12 or so more characters
<input type="submit" class="b-red">
.b-red {border: 1px solid red;}
or to a potentially equivalent character count
input {border:1px solid red;}
Of course there are situations where every rule of thumb can and should be violated. The question is, what do you gain from following DRY that outweighs the importance of following markup/style dichotomy?