Structuring your CSS for maintainability: rules and guile lines to write CSS
As you start work on larger stylesheets and big projects with a team, you will discover that maintaining a huge CSS file can be challenging. So, we will go through some best practices for writing CSS that will help us to maintain the CSS project easily.
http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.
Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.
Many web sites have moved away from table based layouts to CSS. But what about the longer term? Is you CSS efficient, maintainable and modular? Find out about taking your CSS to the next level.
Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15Andy McIlwain
“Custom CSS” is often touted as a feature for blogging and website services like WordPress, Tumblr, Blogger, and Squarespace. But a blank code editor can be a daunting thing for non-coders. Where do you even begin?
We’re going to tackle that problem in this session. We’ll explore the fundamentals of HTML & CSS, the building blocks of the web. You’ll learn how to use your browser to inspect page code, and how to write basic CSS to customize the look and feel of your blog or website.
A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013.
This talk doesn't address Drupal specifically, but it was aimed to give the audience of drupal developers a look into the state of the art.
CSS3 Basic Ideas Tags and Animations, Learn the Basic of CSS 3 with the help of this slideshare slideshow, detailed slides about CSS 3 are coming soon, Flash and Animations in CSS3 will be uploaded soon to teach you get rid of Flash, Javascript Animations, Silverlight etc,.. so why wait get ready to be a Rock-star in CSS3 designing. Keep in mind that in near future web technologies are going to rule the technology world and HTML, CSS and Javascript is going to play a key role in it.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
Back in the Drupal 7 days (aka last year), we came across some pretty large, hard-to-maintain Drupal 7 sites. The theme was often responsible for a lot of the cruft. We saw themes with excess code, too many template files, and not enough documentation.
The Drupal 8 theme layer provides new features like libraries and Twig blocks that can help us to build cleaner, better-organized themes. So now is a good time for themers to re-visit which theming techniques to use to create themes that are smaller, maintainable, and well organized.
Knowledge about Why HTML/CSS on WordPress?, Setup WordPres, What is Underscores?, Why Underscores?, How to get Underscores theme?, HTML Structure by Underscores, Some major working files for designers, Styling default elements, Alternative of Underscores, WordPress child theme, How to Create a Child Theme, Template Hirachy stucture, Create custom template and more...
Introduction to the styling language of the Web - CSS and learn its foundations. We will cover CSS syntax, how to add CSS to your HTML, various CSS properties, the box model, CSS units and custom properties. Understand how to use CSS to style individual elements and create layouts with an example of a styling the landing page of a portfolio.
Front End Best Practices: A Selection of Best Practices, Tips, Tricks & Good Advice For Today’s Front End Development. Practices mentioned in this presentation range from basic principles to more advanced tools and techniques. By Holger Bartel for WomenWhoCodeHK 23/07/2014
If you are new to CSS or have been using it for years this presentation should give you more insight into how to write and use CSS to make your web sites better.
Crafting Custom CSS @ PodCamp Toronto 2015 #PCTO15Andy McIlwain
“Custom CSS” is often touted as a feature for blogging and website services like WordPress, Tumblr, Blogger, and Squarespace. But a blank code editor can be a daunting thing for non-coders. Where do you even begin?
We’re going to tackle that problem in this session. We’ll explore the fundamentals of HTML & CSS, the building blocks of the web. You’ll learn how to use your browser to inspect page code, and how to write basic CSS to customize the look and feel of your blog or website.
A talk on front-end developer tools including Yeoman, Grunt.js, Require.js, Bower, and SASS given at Drupal Camp LA 2013.
This talk doesn't address Drupal specifically, but it was aimed to give the audience of drupal developers a look into the state of the art.
CSS3 Basic Ideas Tags and Animations, Learn the Basic of CSS 3 with the help of this slideshare slideshow, detailed slides about CSS 3 are coming soon, Flash and Animations in CSS3 will be uploaded soon to teach you get rid of Flash, Javascript Animations, Silverlight etc,.. so why wait get ready to be a Rock-star in CSS3 designing. Keep in mind that in near future web technologies are going to rule the technology world and HTML, CSS and Javascript is going to play a key role in it.
If you are a theme developer, using Sass or Syntactically Awesome Stylesheets is a time saving way to write your code and it is easy to learn once you are familiar with CSS. In this session, you will learn how to harness the power of variables, nesting, and mixins to take advantage of everything that SASS has to offer to write awesome code. In order to get the most from this session, you must have a good understanding of HTML and CSS.
Minimalist Theming: How to Build a Lean, Mean Drupal 8 ThemeSuzanne Dergacheva
Back in the Drupal 7 days (aka last year), we came across some pretty large, hard-to-maintain Drupal 7 sites. The theme was often responsible for a lot of the cruft. We saw themes with excess code, too many template files, and not enough documentation.
The Drupal 8 theme layer provides new features like libraries and Twig blocks that can help us to build cleaner, better-organized themes. So now is a good time for themers to re-visit which theming techniques to use to create themes that are smaller, maintainable, and well organized.
Knowledge about Why HTML/CSS on WordPress?, Setup WordPres, What is Underscores?, Why Underscores?, How to get Underscores theme?, HTML Structure by Underscores, Some major working files for designers, Styling default elements, Alternative of Underscores, WordPress child theme, How to Create a Child Theme, Template Hirachy stucture, Create custom template and more...
Css training tutorial css3 & css4 essentialsQA TrainingHub
Learn CSS - Cascading style Sheets to crate awsome looking for your general html Ui & Create responsive HTML Templates by understanding this css tutorial
Presentation on using CSS Frameworks (particularly BlueprintCSS) at the Scottish Web Folk meeting, Friday 17 April 2009 at the University of Strathclyde, Glasgow.
SPS Oslo - Stop your SharePoint CSS becoming a di-sass-ter today!Stefan Bauer
CSS can get overly complex and unwieldy very quickly - especially on SharePoint Projects. To achieve the SharePoint branding you desire, often results in thousands of lines of CSS across many files. This approach is error prone and also a maintenance nightmare! However, there is a better way…
SASS (“Syntactically Awesome Style Sheets”) is fast becoming the preferred approach to develop your CSS! SASS is an extension to CSS which arms you with programming features such as variables, functions, loops and many more.
Join my session and I will take you from a complete SASS novice to someone that knows where SASS fits and how to use it with SharePoint.
Key Takeaways :
- I will explain what SASS is and where you would use it.
- How to use SASS to brand SharePoint without requiring lengthy deployments.
- How to create simple Rich Text Editor Styles using mixins and includes.
- How to apply a Grid layout and make it Responsive.
- How to structure your branding correctly to make it more maintainable.
- How CSS 4 fits into the picture and does it make SASS obsolete?
Describes the philosophical, programming, methodology, and business standards needed to keep technical communication current in an increasingly technical era.
Vskills certified CSS designer Notes covers the following concepts.
1 CSS Basics
1.1 Introduction
1.2 Why to use CSS
1.3 CSS Editors
1.4 A CSS Example
1.5 Custom CSS
1.6 Cross Browser Testing
1.7 Including CSS
1.8 Validating CSS
Get complete e-book on CSS.
http://www.vskills.in/certification/Web-Development/certified-css-designer
Accelerate your Kubernetes clusters with Varnish CachingThijs Feryn
A presentation about the usage and availability of Varnish on Kubernetes. This talk explores the capabilities of Varnish caching and shows how to use the Varnish Helm chart to deploy it to Kubernetes.
This presentation was delivered at K8SUG Singapore. See https://feryn.eu/presentations/accelerate-your-kubernetes-clusters-with-varnish-caching-k8sug-singapore-28-2024 for more details.
Builder.ai Founder Sachin Dev Duggal's Strategic Approach to Create an Innova...Ramesh Iyer
In today's fast-changing business world, Companies that adapt and embrace new ideas often need help to keep up with the competition. However, fostering a culture of innovation takes much work. It takes vision, leadership and willingness to take risks in the right proportion. Sachin Dev Duggal, co-founder of Builder.ai, has perfected the art of this balance, creating a company culture where creativity and growth are nurtured at each stage.
"Impact of front-end architecture on development cost", Viktor TurskyiFwdays
I have heard many times that architecture is not important for the front-end. Also, many times I have seen how developers implement features on the front-end just following the standard rules for a framework and think that this is enough to successfully launch the project, and then the project fails. How to prevent this and what approach to choose? I have launched dozens of complex projects and during the talk we will analyze which approaches have worked for me and which have not.
Epistemic Interaction - tuning interfaces to provide information for AI supportAlan Dix
Paper presented at SYNERGY workshop at AVI 2024, Genoa, Italy. 3rd June 2024
https://alandix.com/academic/papers/synergy2024-epistemic/
As machine learning integrates deeper into human-computer interactions, the concept of epistemic interaction emerges, aiming to refine these interactions to enhance system adaptability. This approach encourages minor, intentional adjustments in user behaviour to enrich the data available for system learning. This paper introduces epistemic interaction within the context of human-system communication, illustrating how deliberate interaction design can improve system understanding and adaptation. Through concrete examples, we demonstrate the potential of epistemic interaction to significantly advance human-computer interaction by leveraging intuitive human communication strategies to inform system design and functionality, offering a novel pathway for enriching user-system engagements.
Essentials of Automations: Optimizing FME Workflows with ParametersSafe Software
Are you looking to streamline your workflows and boost your projects’ efficiency? Do you find yourself searching for ways to add flexibility and control over your FME workflows? If so, you’re in the right place.
Join us for an insightful dive into the world of FME parameters, a critical element in optimizing workflow efficiency. This webinar marks the beginning of our three-part “Essentials of Automation” series. This first webinar is designed to equip you with the knowledge and skills to utilize parameters effectively: enhancing the flexibility, maintainability, and user control of your FME projects.
Here’s what you’ll gain:
- Essentials of FME Parameters: Understand the pivotal role of parameters, including Reader/Writer, Transformer, User, and FME Flow categories. Discover how they are the key to unlocking automation and optimization within your workflows.
- Practical Applications in FME Form: Delve into key user parameter types including choice, connections, and file URLs. Allow users to control how a workflow runs, making your workflows more reusable. Learn to import values and deliver the best user experience for your workflows while enhancing accuracy.
- Optimization Strategies in FME Flow: Explore the creation and strategic deployment of parameters in FME Flow, including the use of deployment and geometry parameters, to maximize workflow efficiency.
- Pro Tips for Success: Gain insights on parameterizing connections and leveraging new features like Conditional Visibility for clarity and simplicity.
We’ll wrap up with a glimpse into future webinars, followed by a Q&A session to address your specific questions surrounding this topic.
Don’t miss this opportunity to elevate your FME expertise and drive your projects to new heights of efficiency.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
Neuro-symbolic is not enough, we need neuro-*semantic*Frank van Harmelen
Neuro-symbolic (NeSy) AI is on the rise. However, simply machine learning on just any symbolic structure is not sufficient to really harvest the gains of NeSy. These will only be gained when the symbolic structures have an actual semantics. I give an operational definition of semantics as “predictable inference”.
All of this illustrated with link prediction over knowledge graphs, but the argument is general.
UiPath Test Automation using UiPath Test Suite series, part 3DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 3. In this session, we will cover desktop automation along with UI automation.
Topics covered:
UI automation Introduction,
UI automation Sample
Desktop automation flow
Pradeep Chinnala, Senior Consultant Automation Developer @WonderBotz and UiPath MVP
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
UiPath Test Automation using UiPath Test Suite series, part 3
Structuring your CSS for maintainability: rules and guile lines to write CSS
1. Structuring your CSS for
maintainability
Class-9: Rules and guile lines to write CSS
Sanjoy K. Paul
Lead Application Developer | Software Architect | DevOps | Trainer
www.SanjoyPaul.com | skpaul@DevsStation.com | +880-1511-927992
3. KISS - Keep It Simple & Short(hand).
DRY - Don’t Repeat Yourself.
IMP - Important! is not that important.
- Make It Readable
- Keep It Consistent
- Use a Reset
TDS - Top-Down Structure
- Comment is the savier
- No Inline
4. Organizing your CSS
As you start work on larger stylesheets and big project with a team, you will
discover that maintaining a huge css file can be challenging.
So, we will go through some best practices for writing css that will help us to
maintain the css project easily.
5. How to keep your stylesheet organized and tidy?
6. Does our project have a coding style guide?
- If we are working in a team or existing project? then
- First thing to check is whether the project has an existing style guide for CSS?
- The team style guide should always win over your own personal preferences.
- There often isn't a right or wrong way to do things, but consistency is
important.
7. Keep it consistent
- set the rules for the project or are working alone,
- then the most important thing to do is to keep things consistent.
- Consistency can be applied in all sorts of ways,
- Using the same naming conventions for classes,
- choosing one method of describing color,
- or maintaining consistent formatting
- for example will you use tabs or spaces to indent your code? If
spaces, how many spaces?
8. Keep it consistent
Pros:
- Having a set of rules you always follow
- Reduces the amount of mental overhead needed when writing
CSS, as some of the decisions are already made.
Cons:
- Sometime it’s hard to maintain the consistency if you are in a
tight deadline
9. Formatting readable CSS:
There are a couple of ways you will see CSS formatted.
Some developers put all of the rules onto a single line
.box { background-color: #567895; }
h2 { background-color: black; color: white; }
Other developers prefer to break everything onto a
new line:
.box {
background-color: #567895;
}
h2 {
background-color: black;
color: white;
}
CSS doesn't mind which one you use. I personally find it is more readable to have each property and value pair on a new line.
10. Comment your CSS
Adding comments to your CSS will help
- Any future developer work with your CSS file
- Also will help you when you come back to the project after a break.
/* This is a CSS comment
It can be broken onto multiple lines. */
11. Comment your CSS
/* || General styles */
...
/* || Typography */
...
/* || Header and Main
Navigation */
...
- Add a block of comments between logical
sections
- It will help to locate different sections quickly
when scanning through,
- Or even give you something to search for to
jump right into that part of the CSS.
- If you use a string which won't appear in the
code you can jump from section to section by
searching for it. We can use || or --start an. ..end
12. Comment your CSS
We don't need to comment every single thing in our code, as much of it is self-explanatory. We only comment on the things where we make a
particular decision for a reason.
Another example: Including reference tutorial/any links as a comment. It will help us to recall in future.
/** CSS Code guideline
https://developer.mozilla.org/en-US/docs/MDN/Guidelines/Code_guidelines/CSS
*/
Example: we may have used a CSS property in a specific way to get around older browser incompatibilities.
.box {
background-color : red; /* fallback for older browsers that don't support gradients */
background-image : linear-gradient (to right, #ff0000, #aa0000);
}
13. Create logical sections in your stylesheet
It is a good idea to have all of the common styling first in the stylesheet. This means all of the styles which will generally
apply unless you do something special with that element. You will typically have rules set up for:
● body
● p
● h1, h2, h3, h4, h5
● ul and ol
● The table properties
● Links
Lets see some code...
14. Using CSS Vendor Prefixed
Some of these CSS browser prefixes have been listed below:
iOS: -webkit-
Safari: -webkit-
Firefox: -moz-
Chrome: -webkit-
Opera: -o-
MS/IE/Edge: -ms-
Each browser have a set of specifications related to any style. This is one of the reasons why browser prefixed are
implemented in order to ensure that these browsers support any of the specific features or style that we would like to
implement.
If we are planning to add a CSS 3 transition to any of our CSS code, then
we will can use transition property and implement a vendor prefix with it.
Below is the code for the same:
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
16. Break large stylesheets into multiple smaller ones!??
For example, you might have an online store as part of the site, with a lot of CSS
used only for styling the product listings and forms needed for the store. It would
make sense to have those things in a different stylesheet, only linked to on store
pages.
This can make it easier to keep your CSS organized, and also means that if multiple
people are working on the CSS you will have fewer situations where two people
need to work on the same stylesheet at once, leading to conflicts in source control.
17. CSS methodologies
- OOCSS (Object-Oriented CSS): Treats page elements as objects, giving all objects classes, treating the objects’ classes as single
entities in style sheets, and taking it from there.. https://github.com/stubbornella/oocss/wiki
- BEM (Block, Element, Modifier): Block Element Modifier is a methodology that helps you create reusable components and code
sharing in front-end development. - https://css-tricks.com/bem-101/
- SMACSS (Scalable and Modular Architecture for CSS): a flexible guide to developing sites small and large. Arguably
becoming one of the most useful contributions to front-end discussions in years. - http://smacss.com/
- Atomic CSS: is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function. -
https://acss.io/
- ITCSS - Inverted Triangle CSS: A sane, scalable, managed CSS architecture achieved with mindful CSS code organization. -
https://itcss.io/
18. HTML!
What we do to write HTML code?
- Always Declare Document Type (<!DOCTYPE html>)
- Use Lowercase “Element” and “Attribute” Names. Don’t mix uppercase and lowercase (body, div, article)
- Always Quote Attribute Values
- Always Specify “alt” for Images (and also width and height)
- Close All HTML Elements
- Close Empty HTML Elements? (<meta charset="utf-8" />, required in XML and XHTML)
- Never Skip the <title> Element (SEO)
- Add the lang and charset attribute, both are important for SEO indexing (SEO, <html lang="en-us" />)
- Meta Datas (key, description, og and )
- Avoid Long Code Lines
- Spaces and Equal Signs
- Blank Lines and Indentation. Don’t use it unnecessarily.
- Omitting <html>, <body>, <head> tags?
- Viewport
- Create Your HTML First
- It will be updated and continued with time..
19. Summary
KISS - Keep It Simple & Short(hand).
DRY - Don’t Repeat Yourself.
IMP - Important! is not that important.
- Make It Readable
- Keep It Consistent
- Use a Reset??
TDS - Top-Down Structure
- The Comment is the savior
- No Inline
- Maintain the Spacificity (*, tag, class, id)
- ...
20. Validating your CSS!
You can always use the W3C free CSS validator to examine whether your CSS code has been organized and structured
appropriately.
One of the other benefits of using it is to help you find errors within your stylesheet.
This will save your time to troubleshooting comparing to doing it manually.
Markup Validation Tool: https://validator.w3.org/
CSS Validation Tool: https://jigsaw.w3.org/css-validator/
Browser Compatibility Testing Tool: https://app.crossbrowsertesting.com/ https://www.lambdatest.com/