Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 3 years ago.
Improve this question
I noticed in Jira, they have obfuscated the CSS classes, so they look odd and they are different on every page refresh:
<div class="sc-dYaWWc dJrjAK">
<div class="sc-iLVaha hfGHeD">
<div class="sc-geAxOV krrXnm">
<div class="sc-bJT2cE bPFEwh">
<div class="sc-imDrJI jKvdHw">
<div class="sc-hAhkBK epXQAj">
...
What is the motivation behind this, maybe to prevent crawlers or other security concerns? Is it a worthwhile practice for general app development?
The main reason of obfuscated/scrambled CSS class names is the usage of CSS modules to provide style encapsulation and size reduction.
Style encapsulation (and style leakage) is still a great issue on the web, especially when web apps and sites becoming more-and-more complex over their lifetime.
Soon (hopefully), we'll have Shadow DOM capabilities in all browsers, until then some form of modular CSS solution is needed to properly encapsulate styles. Check out this article about it.
In summary:
CSS Modules provide modular,
reusable, and cross-browser solutions for:
Conflictless styles
Direct and clear style dependencies
Avoiding global scopes
React, Angular and Vue use their own solutions to this problem in their build-chain. Most modern MV* frameworks use CSS modules in some form.
And of course, one other benefit of using CSS modules is the initially more complex methods to successfully scrape the content of the specific web page.
Atlassian use react-css-modules for obfuscate and optimize his template for a simple reason:
Obfuscated CSS class names == smaller bundle size == less amount of data to transfer over network.
Obviously the obfuscate class is only on production build not on development stage.
modules property tells Webpack that class names needs to be obfuscated. You can set it to false in dev build and class names will stay the same as in CSS file. That is very useful for development.
Text from How to obfuscate CSS class names with React and Webpack.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I want to create a really simple blog and so far I learned HTML and CSS.
So if I want to add a new node or article, do I need to modify my HTML document and then upload it again or is there any other way?
If you're only using simple HTML
Then the css should be made in a way that would make it reusable, so that when you just add another article shouldn't affect anyhing else. The HTML however must be changed, as you'll need to add your content somehow
The thing is, no one uses plain HTML anymore. If you want everything to happen dynamically then you should use DOM manipulation frameworks. The most basic one of which is JQuery, while the most powerful ones as of now are React, Angular, and Vue
Well, of course you have to modify something and upload it again, but not necessarily the HTML code.
You could youse AJAX (Asynchronous JavaScript and XML) - which, by the way, you can also use with JSON instead of XML - then create a standard article model, get the latest article from your file with
fetch("your-file.xml-or-json-or-whatever").then(
function(response) { /* Do something with the response, see the link below for an example */ }
);
and finally turn it into a DOM element with JS.
This method is pretty inefficient, though, if you don't have a way to cut the output from your list of articles. In fact, if, say, you have one thousand articles, it's inconvenient (inconvenient to say the least) to serve them all and the just use the first ten. If you have a static server, you might want to split the content into multiple files. If, instead, you have access to PHP (or other HTML preprocessors), then you should consider cutting it dynamically. Below are some links to help you.
AJAX tutorial on W3Schools
Fetch documentation on Mozilla Developer
You could also think of using frameworks like Angular (or AngularJS) to make your website even more dynamic. However, those are better for web apps than websites, as I've heard that it's a bit harder for Google to register an Angular app.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
I'm back-end developer starting with front-end development. I've chosen angular2 for my application and I would like to use bootstrap with it.
As far as I know, using bootstrap is just putting right html classes on right html elements.
Should I put classes directly in my template? Or maybe I should group them somehow in application-specific classes and use only them in html? (So my html file would not be bootstrap specific. But CSS doesn't allow class inheritance, so I don't know if it is even possible).
Later, if I would like to modify something(colors, size, whatever), should I modify bootstrap sources or I can just attach my .css file to the html ?
Is using less or some other css-preprocessors connected to using bootstrap? I mean, is it possible to create custom looking application with bootstrap with just vanilla css?
Should I put classes directly in my template?
Yes you should. As you mention CSS classes do not support any kind of inheritance so the concept to create an abstraction layer is not feasible. Also, If you need to switch to a different CSS framework you will need to change the HTML also.
Should I modify bootstrap sources or I can just attach my .css file to the html ?
Bootstrap provides a customizing tool to override some of its default values so you could use that. Also, you can save your configuration to a JSON file and keep it for future reference.
For additional changes you should have a new CSS file to add new styles and override existing ones.
Is using less or some other css-preprocessors connected to using bootstrap?
CSS preprocessors output regular (vanilla) CSS. So, yes, it is possible to create Bootstrap-like applications with CSS only. Preprocessors will help you to have your CSS more easily maintainable.
it is possible to "extend" bootstrap css classes, maybe not with normal css classes, but css pre-processors (like LESS, which you mentioned) have the ability to create mixins that rely on existent styles. try that out.
though, there is nothing wrong with using bootstrap classes directly
if you want your styles to work a little different then how bootstrap usually does, do not change the bootstrap sources, but override the classes with your own css (there are a few exceptions, though, but only case specific).
using css-preprocessors (such as LESS or SASS) with bootstrap is well supported, there are even some libraries/projects related to it which you can easily find (here's an example).
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I have a fairly big single page application I'm working on. I can put the styles inline in the html tags, e.g. <div style="width:10px"></div>, or I can put it in a separate .css file and reference tags via classes or ids.
Obviously I'm using .css and classes/ids for styles (re)used many times. But there's a lot of one-off elements that just need a little specific adjustment here and there, e.g. a small margin to make it look just right, and creating a new class or id for each one of them seems extraordinarily cumbersome. I end up with lots of one-off classes and ids that are not easy to navigate, and instead of finding the style information where it's used (in the relevant tag), I have to go search in some random .css file.
Yet, the internet tells me it is always preferred to keep all my style information in .css files. Who's correct? Have I stumbled upon a specific case where inline styling is better, or would I somehow be shooting myself in the foot by doing that? Is there perhaps even a third way that is better?
Yet, the internet tells me it is always preferred to keep all my style information in .css files. Who's correct?
You do realise you're asking the internet here...? ;)
Having had to redo several websites where styling had been applied using inline tags, I can say without any hesitation that I would never, ever use them myself. They are a nuisance to maintain and unless you're keeping a close record of where and what you have applied the inline styles, it is difficult to ensure that your changes to global css files will be respected throughout the site.
If you do need page-specific css classes and you don't want to put them in the global css file, add them to the page head in a <style> element. Putting all your css in a single file has the advantage that the users' browsers will load the file and cache it, so that it won't need to be reloaded on other pages of the site.
If you are finding you have a lot of tweaks to make all over the place, it suggests the design may need rethinking or refactoring. This is particularly the case with margins and padding--you can make a lot of work for yourself by choosing the wrong combination to apply spacing to your document elements.
Even for the one off styles I think a nice approach would be to have a specific file used during development called oneoff.css for example where you could have your style rules for one off situations.
This makes them easy to find and you get the benefits of having external .css files (separation of concerns, reusability even if you think you will never need to reuse I bet you will, and cacheability).
You have to weigh the pros and cons in the context of your particular organization and applications. For example, standards are more important in a team environment than on an individual project or quick utility. Would inline styles on your pages be a surprise to someone making global changes?
For what it's worth, my large organization has a strict policy against inline styles, but in my opinion there's no definitive answer to your question. There's a good Stack Overflow post on this: Comparison of loading CSS inline, embedded and from external files
therefore define multiple classes and apply styles to an external file (external.css) is more orderly. however you can use online <tag style="..."></tag> or labels styles 'style'
<style>some style</style>,
will not have any problem it is important to have the code neat and tidy. that's it
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
We maintain a fairly large site with a lot pages. As the pages grew, so did the HTML and CSS. Is there any good way to document these? Like which page uses a particular selector, etc. What's the best practice for maintaining CSS for a large site?
In my experience, CSS is not maintainable. If CSS were a room in your house, it's the basement...it collects things over the years and after a while you tend to have more stuff in it that is of no use vs. stuff you want to keep.
As such, I recommend starting fresh every few years.
Barring that, some suggestions:
Maintain the CSS dev-side in as many separate files as it makes sense to have. Use a minimizer to compress and combine it all into one file for deployment.
look into OOCSS (Object Oriented CSS) methods. I try to use that these days for sites that have large teams of developers. The basic concept is to have more class names in your HTML, but what class names you have are much more re-usable across the entire site, so your CSS files should remain more streamlined.
build component libraries. A major goal is to NOT have specific css for each individual page. Instead, leverage reusable code and design patterns across the site.
We use rails and follow this architecture: http://codefastdieyoung.com/2011/03/css-js-organization-best-practice/
Depending on the framework you use, you might have to tweak the logic accordingly.
Brief explanation of the architecture:
In rails there is a way to specify a common ID for a group of pages.
For ex: all the pages related to users management can have this id: body#users-registration.
Similarly all the pages related to reporting services ca have this id: body#reporting-services
Having said that, have a common.css file which contains generic styles that are reusable across the site - like layout styles, li, p, panels, etc.
And then have separate css files for each & every group of pages: users-registration.css, reporting-services.css. These files will have the styles that are specific to the corresponding group.
In this way we have managed to avoid conflicts across the pages as well.
Note that we finally combine all the CSS files into a single css file and render that in production.
I've found that commenting my CSS and targeting HTML tags vs "class1, myselector27, etc" has made for a lot less code, and simpler to read later on. If I have a JavaScript event that needs to be isolated, I wrap that component in an id and comment the base CSS file accordingly.
reset.css
fonts.css
main.css
main.css
/*
** Image Slider for products.php
*/
#slider_products {...}
#slider_products #slide_container {...}
#slider_products h1, p {...}
#slider_products img {...}
If you are using an IDE (like NetBeans) these comments can be made visible (and you can also write as much descriptive text as necessary, if need be)
I've maintained CSS files for sites with over 200 pages of content, and those with 20 pages. In either case, my CSS files have never been in the 1200-lines-of-code-range, which I've seen in a friend's portfolio site (no names :-)), but his site is #best 20-30 pages - ALL of which share the same design, style, look - it's OVERKILL. One has to believe that if the CSS and code were to be combed-through those 1200 lines could be reduced substantially pretty quick.
There are a few things you can do.
Place your the CSS in your stylesheet in order of the page. So, header styles at the top, then main content styles, then footer styles. Below that, you can add additional styles for certain uses.
Use comments in your styles, e.g. /* ### Styles for Links in Main Content #### */
Use separate stylesheets for separate sections, if the CSS is large enough. So, if you have a section of the site that deals with a specific topic and it has significant style modifications, give it its own stylesheet and only reference it in that section.
Use the cascade wisely and cut down on the amount of css you write. A simple example here: http://csswizardry.com/toybox/use-the-cascade/
I've seen a few systems that delineate between CSS written for the interface, with reusable class names as DA points out, but they did go ahead and give an architectural breakdown of these classes, since their intention is to be reusable. Then they went on to use verbose selector names for components and granular features - which generally weren't documented, and were provided by 3rd parties mainly.
It worked fairly well, and I imagine if the interface were redesigned at some point it would be an arduous but doable job to re-work the interface CSS and documentation, while leaving the component styling down to the 3rd-party providers/developers, or whoever creates the components.
As the others have said, don't let CSS documentation lure you into avoiding minification, even if it isn't automated, but beware, if your CSS is sprawling and unaccountable when you minify, you may find your resulting styles aren't quite on par - depending on the minify settings used.
EDIT:
Hot off the Google+ feed - Jonathan Snook is writing up something related to this thread, here's the temporary link to keep an eye on: http://smacss.com/
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 7 years ago.
Improve this question
Stylesheet languages like Sass and Less allow us to organize our stylesheets like real programming source code, in more modular and manageable ways than raw CSS ever could. Using these languages is still a young art, and I'm curious to learn how other developers use them in practice.
One of the neat features about the openness of the web is that we can learn from others by peeking at their HTML and CSS. However, these new stylesheet languages allow developers to keep their stylesheet source code private and only share the compiled CSS output. The standard compiler settings will often have the stylesheet source folder outside the public webroot.
If you use a CSS preprocessor to develop a commercial (closed-source) website, would you consider the stylesheet's source language (Sass or Less) equivalent to the CSS in terms of openness, or is it proprietary source code?
On the one hand, these languages "only" give us different syntax for writing stylesheets, so their function is the same as the CSS that's already publicly visible.
On the other hand, they could be thought of as "source code" and considered proprietary, in the same way as the Ruby or PHP that drives the site is used to generate HTML.
Looking forward to your thoughts.
Looks like you and I are the only ones following the css-preprocessing tag, I just found this and wanted to share some thoughts.
For the small company I work for, we use the same homebrew CMS to manage every site, and there is a lot of magic involved in creating the css files. I don't use LESS or SASS, but a combination of cssmin and my own code. There are theme settings in the CMS that can affect it, and there are other things like url rewrites that have to read settings from php config files. The output is always there for anyone to see, but I wouldn't consider the code that generates it "open source" any more than the code that generates the html output.
Our CMS is not open source, so our policy is that when and if (hasn't happened yet) a client decides to drop us and "wants his website", we generate a static HTML version for them with absolutely no php source code. So they would get the static version of the css/js as well as static html. They are paying for a service, and not so much a product. We don't sell the CMS, we sell our services building the site and access to those same tools. I'm not sure how well this would bode if it happened, but that's our current policy.
Anyways, this might not be exactly what you meant, but I'm looking forward to hearing more on this if anyone ever finds it.