Skip to content

GAVS – Global IT Consulting

Menu
  • Platforms & Products
    • Platforms & Products

      GAVS’ products will help change how you organize your IT Operations, bring meaningful and actionable insights to speed up network fixes, provide real data as quantifiable justification to adopt strategies that foster business improvements.

      • ZIF
      • Products
        • zDesk – Remote, Secure Desktop-as-a-Service (VDI+)
        • zIrrus
        • GTOps
        • TruOps
        • Close
    • Products & Platforms
      • Reimagining your Digital Infrastructure with Zero Incident FrameworkTM

        Read more
    Close
  • Services & Technologies
    • Services & Technologies

      GAVS is a global IT services provider with focus on AI-led Managed Services and Digital Transformation. GAVS’ AIOps platform, Zero Incident Framework ™ (ZIF), enables proactive detection and remediation of incidents and increases uptime, helping organizations drive towards a Zero Incident Enterprise™ . GAVS has transformed IT Enterprise delivery through ZIF’s Discover, Monitor, Analyze, Predict, and Remediate modules, to optimize business services continuity.

      • Digital Services
        • Auto Discovery and Dependency Mapping
        • Cloud Enablement
          • Cloud Advisory and Transformation
          • Close
        • Automation
        • Blockchain
        • Close
      • Cyber Security Services
        • Assessment & Advisory
        • Identity & Access Management (IAM)
        • Managed Detection & Response (MDR)
        • Managed Security Services (MSS)
        • Security Automation
        • Risk & Compliance
        • Close
      • Data Privacy Services
      • Consulting & Implementation Services
        • Cloud Advisory and Transformation
        • Data Center Assessment
        • Data Center-as-a-Service (DCaaS)
        • Infrastructure re-engineering
        • Data Center Consolidation & Migration
        • Close
      • Application Services
      • Enterprise Support Services
        • Managed Infrastructure Support
        • Remote Infrastructure Monitoring
        • End User Monitoring
        • Close
      • Microsoft Services
    • Services &Technologies
      • Reinforcement Learning- The Art of Teaching Machines

        Read more
    Close
  • Industries
    • Industries

      GAVS Technologies focuses on serving various industry verticals in their digital transformation through infrastructure solutions, adopting innovation and technologies in different domains. We offer services and solutions aligned with technology trends to enable enterprises to take advantage of futuristic technologies like DevOps, Smart Machines, Cloud, IoT, Predictive Analytics, Managed Infrastructure Services, and Security services.

      • Industries Overview
      • Healthcare
      • Banking & Financial Services
      • Manufacturing
      • Media & Publishing
    Close
  • Inside GAVS
    • Inside GAVS

      GAVS is a global IT services provider with focus on AI-led Managed Services and Digital Transformation. GAVS’ AIOps platform, Zero Incident Framework™ (ZIF), enables proactive detection and remediation of incidents and increases uptime, helping organizations drive towards a Zero Incident Enterprise™ . GAVS has transformed IT Enterprise delivery through ZIF’s Discover, Monitor, Analyze, Predict, and Remediate modules, to optimize business services continuity.

      • About Us
      • Client Speak
      • Alliances & Partnerships
      • Leadership Team
      • Social Responsibility
      • Events
      • Locations
      • Contact Us
      • Press Releases
      • Media Mentions
      • Awards and Recognitions
      • In Memoriam
      • Covid Care
    Close
  • Insights
    • Insights

      We bring you discerning insights on technology trends, innovation and organization culture, thru our collection of articles, blogs and more. Insights reflects our passion in driving advancements as we move forward creating new paradigms in business and work culture. You would find our thoughts on a variety of topics ranging from evolving technologies and ways it affects businesses and lives, transformational leadership, high impact teams, diversity, inclusion and much more.

      • Blogs
      • Articles
      • White Papers
      • Brochures
      • Videos
      • Case Studies
      • enGAge Magazine
    • insights
      • Seven Tips for Leading IT Modernization and Digital Transformation

        Read more

    Close
  • Work With Us
    • Work with us

      What it means to be a GAVSian?

      If you rate high on our SWAT test (Smart, Hardworking, Articulate, Technologically curious), GAVS’ hiring profile, we promise you excitement, inspiration and the freedom to succeed in our flat organization. Being a GAVSian, you would represent our cutting edge in technological advancement while we help you hone yourself into the person you aspire to be. That’s the level of personal interest we invest in you.

      • Career with GAVS
      • Company Culture
      • Diversity @ GAVS
      • Building a respectful workplace
    Close
Back to blogs

Mechanism of Modern Cascading Style Sheets (CSS)

May 09, 2019
SHARE

In this blog post

  • By Sangavi Rajendran
  • 1. Beware of Margin Collapse:
  • 2. Use Flexbox For Layouts
  • 3. Do a CSS Reset
  • 4. Border-box for All
  • 5. Images as Background
  • 6. Write Better Comments
  • 7. Everyone Loves kebab-case
  • 8. Don’t Repeat Yourself
  • 9. CSS Animations with transform
  • 10. Em, Rem, and Pixel
  • 11. Validate
  • Conclusion

By Sangavi Rajendran

In this article, you will learn about the mechanics and the practical uses of CSS that you will find valuable as a developer. To effectively use Cascading Style Sheets, you must keep in mind how cascading works within the browser.

1. Beware of Margin Collapse:

Unlike most other properties, vertical margins are used to collapse when they meet. This means when the bottom margin of one element touches the top margin of another, only the bigger of the two survive. There are ways to overcome these behaviors, but it’s better to just work with it and use margins only going in one direction, ideally margin-bottom.

2. Use Flexbox For Layouts

The flexbox model exists for some reason. Floats and inline-blocks work, but  they are all essentially tools for the styling documents, not websites. Flexbox is specifically designed to make it easy to create any layout exactly the way it was imagined. The set of properties that come with the flexbox model give developers lots of flexibility, and once you get used to them, doing any responsive layout is like a piece of cake. Browser support is almost perfect, so there shouldn’t be anything stopping you from going full flexbox.

3. Do a CSS Reset

Although the situation has greatly improved over the years, there is still some variation in the way different browsers behave. The best way to resolve these issues are to apply a CSS reset that sets universal default values for all the elements, allowing you to start working on a clean style sheet that will deliver the same result everywhere .There are libraries like normalize.css and ress to do this very well, to correct all envisioned browser inconsistencies. If you don’t want to use a library, you can also do a clearer basic CSS reset yourself with styles: This may seem a bit harsh, but nullifying margins and paddings makes laying out elements much easier as there are no default spaces between them to take into account. The box-sizing: border-box; property is another good default, which we will talk about more in our next tip.

4. Border-box for All

Most beginners don’t know about the box-sizing property but it’s important. The best way to understand it’s two possible values:

content-box (default) – If we set width/height to an element, that’s just the size for it’s content. All paddings and borders are on top of that. e.g. a <div> has a width of 100 and padding of 10, our element will take up to 120 pixels (100 + 2*10)

Border-box – The padding and borders are included in the width/height. A <div> with width: 100px; and box-sizing: border-box; will always be 100 pixels wide no matter what paddings or borders are added.

Setting border-box to all the elements makes it so easier to style everything, since you don’t have to do math all the time.

5. Images as Background

When adding images to your design, if it’s going to be responsive, use a <div> tag with the background CSS property alternative of <img> elements. This may seem like more work for nothing, but it makes it easier to style images clearer, for keeping their original size and aspect-ratio, thanks to background-size, background-position, and other properties. A small drawback of this technique is that the web accessibility of your page will take a slight hit, as images won’t be drag properly by screen readers and search engines. This issue can be resolved by the object-fit, but it doesn’t have full browser support.

6. Write Better Comments

CSS might not be a programming language still it’s code needs to be documented. Some simple comments are all it takes to organize a style sheet and make it more accessible to all. For the larger sections of CSS such as major components or media-queries, use a stylized comment and leave a couple of new lines after. Remember that CSS doesn’t have single line // comments, so when commenting something out you still need to use the / / syntax.

7. Everyone Loves kebab-case

Class name and id should be written with a hyphen (-) when they contain more than one word. CSS is case-insensitive so camelCase is not an option. Earlier, underscores were not supported (they are now) which made dashes the default convention. When it comes to naming, you may also consider BEM, which follows set of principles which add consistency and provides a component-based approach to development. 

8. Don’t Repeat Yourself

The values for most CSS properties are inherited from the element one level up in DOM tree, hence the name Cascading Style Sheets. for example, font property- it is almost always inherited from the parent, you don’t have to set it again separately for each and every element on the page. Simply add font styles that will be most prevalent in your design to the <html> or <body> element and let them trickle down. Later, you can always change the styles for given element. What we are saying is to avoid repetition and use inheritance as much as possible.

9. CSS Animations with transform

Don’t animate elements by directly changing their width and height, or left/top/bottom/right. It’s preferred to use transform() property as it provides smooth transitions and triggers your intentions to make it easier to understand while reading the code. It Transform, as well as all of its many functions (translate, rotate, scale, etc.) have universal browser compatibility and that can be used freely.

10. Em, Rem, and Pixel

There is a lot of confusion whether people should use em, rem, or px values for setting the size of elements and text. Truth is, all three options are  applicable and have their pros and cons.

em – The value of 1em is relative to the font-size of direct parent. Also used in media-queries, em is great for responsiveness, but it can get really confusing tracing back the exchange rate of ems into pixels for each element (1.25em of 1.4em of 16px = ?).

rem – Relative to the font-size of <html> element, rem makes it  clearer flexible to scale all headings and paragraphs on the page. Leaving the <html> with it’s default fontsize and setting everything with rem is a great approach accessibility-wise.

px – Pixels give us precision but does not  offer any scaling when used in responsive designs. It is reliable, easy to understand, and present a good visual connection between value and actual.

Most of the times em and rem can save you a lot of work, particularly when building responsive pages.

11. Validate

Validating CSS is not important as validating HTML or JavaScript code, but running your code through a CSS Linter can still be very useful. It will tell if you’ve made any mistakes, warn you about bad practices, and give general tips for improving the code.

Just like minfiers and autoprefixers, there are plenty of free validators available:

Online tools: W3 Validator, CSS Lint

Text editor plugins: Sublime Text, Atom

Conclusion

Modern CSS is easy to get overwhelmed by many different methodologies, you should think of them as different possible tools you can use when you face a sufficiently complex  CSS codebase. You have the properties necessary to identify an effective visual layout and then bring it to fruition. By following these techniques we can eliminate the browser compatibility issues and other common css fixes.



Master Data Management Software Tools
Data Management Architectures
Read More
Digital Service Desk AI Software
Identity GRC Challenges and Issues in the Metaverse
Read More
Data Center as a Service Providers in USA
Data Lakehouse – The Latest Entrant in Data Management Architectures
Read More
GAVS – Global IT Consulting

Copyright © 2022, GAVS Technologies.

  • Privacy Policy
  • Cookie Policy
  • Terms of use
  • Contact Us
  • Platforms & Products
    • Platforms & Products
    • Products
      • Zero Incident Framework ™
      • Products
      • zDesk – Remote, Secure Desktop-as-a-Service (VDI+)
      • GTOps
      • TruOps
      • zIrrus
  • Services & Technologies
    • Services & Technologies
    • Digital Services
      • Digital Services
      • Auto Discovery and Dependency Mapping
      • Cloud Enablement
        • Cloud Advisory and Transformation
      • Automation
      • Blockchain
    • Data Privacy Services
    • Cyber Security Services
      • Cyber Security Services
      • Risk and Compliance
      • Security Automation
      • Managed Security Services (MSS)
      • Managed Detection and Response (MDR)
      • Identity and Access Management
      • Assessment and Advisory
    • Consulting & Implementation Services
      • Consulting & Implementation Services
      • Cloud Assessment & Advisory
      • Data Center Assessment
      • Data Center-as-a-Service (DCaaS)
      • Infrastructure re-engineering
      • Data Center Consolidation & Migration
    • Application Services
    • Enterprise Support Services
      • Enterprise Support Services
      • Managed Infrastructure Support
      • Remote Infrastructure Monitoring
      • End User Monitoring
    • Microsoft Services
  • Industries
    • Industries Overview
    • Healthcare
    • Banking & Financial Services
    • Manufacturing
    • Media & Publishing
  • Inside GAVS
    • Inside GAVS
    • About Us
    • Industries
    • Client Speak
    • Alliances & Partnerships
    • Leadership Team
    • Social Responsibility
    • Events
    • Find us
    • Reaching us
    • Press Releases
    • Media Mentions
    • Awards and recognitions
    • In Memoriam
    • Covid Care
  • Insights
    • Insights
    • Articles
    • Blogs
    • White Papers
    • Case Studies
    • Brochures
    • Videos
    • enGAge Magazine
  • Work with us
    • Work with us
    • Career with GAVS
    • Company Culture
    • Diversity @ GAVS
    • Building a respectful workplace

Schedule a Demo